---
title: Migrate Thumbnail from Polaris React
description: Learn how to migrate Polaris React Thumbnail to Polaris web components.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/thumbnail
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/thumbnail.md
api_name: app-home
---

# Migrate Thumbnail from Polaris React

Use `s-thumbnail` for a compact resource preview and preserve meaningful alternative text. Use `s-image` when the image is primary content rather than a thumbnail.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `Thumbnail` | [`s-thumbnail`](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/thumbnail) | Direct |

***

## Map thumbnail properties

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `source` | `src` | Preserve the resource image URL and fallback behavior. |
| `alt` | `alt` | Name the represented resource, or use an empty value for a decorative duplicate. |
| `size="extraSmall"` | No exact equivalent; start with `size="small-200"` | Verify density in the containing table or list. |
| `size="small"` | `size="small"` | Keep the compact size when it still fits the destination layout. |
| `size="medium"` | `size="base"` | The default size was renamed. Don't pass `medium` through. |
| `size="large"` | `size="large"` | Keep for prominent resource previews. |

The destination also provides `small-100` and `large-100` intermediate values. Choose among the documented scale based on the resource hierarchy, and use one consistent size within a table, list, or grid.

***

## Migrate the call site

1. Inventory every `Thumbnail` call site and record the content, state, events, and accessibility behavior it uses.

2. Open the linked Polaris web component reference and map only documented properties, slots, and events.

3. Move unsupported responsibilities into adjacent content or app state instead of passing old props through.

4. After verification, remove the `Thumbnail` import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

***

## Preserve these behaviors

* Accessible names, semantics, and keyboard behavior.
* Visible content plus disabled, loading, selected, or error state that affects the task.
* Click, change, submit, and navigation behavior used by app logic.

***

## Test and remove Polaris React

Test every migrated `Thumbnail` state used by the app. For interactive destinations, verify keyboard operation, focus, and accessible naming. For content destinations, verify document structure and alternative text where applicable. Compare behavior rather than pixel-for-pixel styling.

Don't remove `@shopify/polaris` while another component still imports it. Once all call sites are migrated, remove the package and its provider-level setup, then run the app's full test suite.

***

## Migration example

## Migrating Thumbnail

##### Polaris web components

```tsx
export function ThumbnailMigrationExample() {
  return (
    <s-thumbnail
      src="https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg"
      alt="White sneaker"
      size="large"
    />
  );
}
```

##### Polaris React

```tsx
import {Thumbnail} from '@shopify/polaris';

export function ThumbnailMigrationExample() {
  return (
    <Thumbnail
      source="https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg"
      alt="White sneaker"
      size="large"
    />
  );
}
```

***