---
name: Thumbnail
category: Images and icons
keywords:
  - photo
  - picture
  - image
  - small thumbnail
  - medium thumbnail
  - large thumbnail
  - image preview
---

# Thumbnail

Use thumbnails as a visual anchor and identifier for an object. They should be used along with text to provide context.

---

## Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

### Problem

Merchants are scanning the page, orienting themselves or searching visually for a particular item.

### Solution

Thumbnails provide a visual anchor and help structure the page. Because they are a visual representation, thumbnails make individual items identifiable at a glance.

---

## Best practices

Thumbnails should:

* Be one of 3 sizes:
  * Small (40 × 40 px): Use when the medium size is too large for the layout, or when the thumbnail has less importance
  * Medium (60 × 60 px): Use as the default size
  * Large (80 × 80 px): Use when an thumbnail is a major focal point. Avoid this size in lists of like items.

---

## Content guidelines

Any time you use an image to communicate a concept on Shopify, it’s important to use descriptive [alt text](/content/alternative-text). Doing this is important for [accessibility](/principles/accessibility) because it allows screen readers to describe what’s in the image to people who may not be able to see it.

For thumbnails, we recommend using a format that describes what will show in the image:

* `alt="Photo of {product}"`, e.g. "Photo of black t-shirt with cartoon tiger"
* An empty `alt=""` attribute ignores the image in assistive technologies such as screen readers, and may be used on decorative thumbnails


## Examples

### Default thumbnail

Use as the default size (medium).

```jsx
<Thumbnail source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg" alt="Black choker necklace" />
```

### Small thumbnail

Use when the default size is too large for the layout, or when the thumbnail has less importance.

```jsx
<Thumbnail source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg" size="small" alt="Black choker necklace" />
```

### Large thumbnail

Use when a thumbnail is a major focal point. Avoid this size in lists of like items.

```jsx
<Thumbnail source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg" size="large" alt="Black choker necklace" />
```

---

## Related components

* To present a thumbnail representation of an individual or business in the interface, [use the avatar component](/components/images-and-icons/avatar)