---
title: Thumbnail
description: 'Display a small preview image representing content, products, or media.'
api_version: 2025-10
api_name: admin_extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2025-10-rc/polaris-web-components/media/thumbnail
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2025-10-rc/polaris-web-components/media/thumbnail.txt
---

# Thumbnail

Display a small preview image representing content, products, or media.

## Properties

* alt

  string

  An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `s-image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `alt` is displayed on screen instead. This has the benefit of letting a sighted buyer know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4) to learn more.

* size

  "small" | "small-200" | "small-100" | "base" | "large" | "large-100"

  Adjusts the size the product thumbnail image.

* src

  string

  The image source (either a remote URL or a local file resource).

  When the image is loading or no `src` is provided, a placeholder will be rendered.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/app-home/using-polaris-components#event-handling).

* error

  OnErrorEventHandler

* load

  CallbackEventListener\<typeof tagName> | null

### CallbackEventListener

```ts
(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null
```

### CallbackEvent

```ts
Event & {
  currentTarget: HTMLElementTagNameMap[T];
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-thumbnail
    alt="White sneakers"
    src="https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg"
  ></s-thumbnail>
  ```