---
title: Thumbnail
description: Thumbnails are used as a visual anchor and identifier for an object.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/thumbnail
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/thumbnail.md
---

# Thumbnail

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

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

##### JavaScript

```ts
import {extend, Thumbnail} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const thumbnail = root.createComponent(Thumbnail, {
    size: 'small',
    scaleType: 'fit',
    source: 'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-favicon.png',
    alt: 'Shopify',
  });

  root.appendChild(thumbnail);
  root.mount();
});
```

##### React

```tsx
import React from 'react';
import {extend, render, Thumbnail} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <Thumbnail
      size="small"
      scaleType="fit"
      source="https://cdn.shopify.com/shopify-marketing_assets/static/shopify-favicon.png"
      alt="Shopify"
    />
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| size? | `"small" \| "base" \| "medium" \| "large" \| "extraLarge"` | |
| scaleType? | `"fill" \| "fit" \| "crop"` | |
| source | `string` | URL for the thumbnail image. |
| alt | `string` | Alt text for the thumbnail. |

***