Thumbnail

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

Examples

Use as the default size.

import {Thumbnail} from '@shopify/polaris';
import React from 'react';

function ThumbnailExample() {
  return (
    <Thumbnail
      source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
      alt="Black choker necklace"
    />
  );
}

Use to present a thumbnail in a condensed layout, such as a data table cell or an action list item.

import {Thumbnail} from '@shopify/polaris';
import React from 'react';

function ThumbnailExample() {
  return (
    <Thumbnail
      source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
      size="extraSmall"
      alt="Black choker necklace"
    />
  );
}

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

import {Thumbnail} from '@shopify/polaris';
import React from 'react';

function ThumbnailExample() {
  return (
    <Thumbnail
      source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
      size="small"
      alt="Black choker necklace"
    />
  );
}

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

import {Thumbnail} from '@shopify/polaris';
import React from 'react';

function ThumbnailExample() {
  return (
    <Thumbnail
      source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
      size="large"
      alt="Black choker necklace"
    />
  );
}

Use to render an icon inside of thumbnail.

import {Thumbnail} from '@shopify/polaris';
import {NoteMinor} from '@shopify/polaris-icons';
import React from 'react';

function ThumbnailExample() {
  return <Thumbnail source={NoteMinor} size="large" alt="Small document" />;
}

Props

Want to help make this feature better? Please share your feedback.

  • alt

    Required
    string

    Alt text for the thumbnail image

  • source

    Required
    any

    URL for the image

  • size? Size

    Size of thumbnail

  • transparent? boolean

    Transparent background

Best practices

On web, thumbnails should:

  • Be one of 4 sizes:
    • Extra small (24 x 24 px): use in tightly condensed layouts
    • 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.

On Android and iOS, thumbnails should:

  • Be one of 2 sizes:
    • Default (40 × 40): use as the default size.
    • Large (72 × 72): 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. Doing this is important for 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:

  • On web, alt="Photo of {product}". For example, “Photo of black t-shirt with cartoon tiger”.
  • On web, an empty alt="" attribute ignores the image in assistive technologies such as screen readers, and may be used on decorative thumbnails.
  • On iOS, imageView.accessibilityLabel = "Photo of {product}". For example, “Photo of black t-shirt with cartoon tiger”.
  • On Android, android:contentDescription="Photo of {product}". For example, “Photo of black t-shirt with cartoon tiger”.

    👋

    We've made some improvements to our website to help you build more efficiently with Polaris.