---
title: Icon
description: Icons are small visual indicators from a set of pre-defined glyphs.
api_name: product-subscription-extensions
source_url:
  html: 'https://shopify.dev/docs/api/product-subscription-extensions/components/icon'
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/icon.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/icon.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/icon.md#guidelines)

# Icon

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).

Icons are small visual indicators from a set of pre-defined glyphs.

##### JavaScript

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

extend('Playground', (root) => {
  const icon = root.createComponent(Icon, {
    source: 'cancelSmallMinor',
  });

  icon.appendChild('This is the best extension.');
  root.appendChild(icon);

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

##### React

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

function App() {
  return <Icon source="cancelSmallMinor" />;
}

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

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| source | `"cancelSmallMinor" \| "searchMinor" \| "starHollow" \| "starFilled" \| "sortMinor"` | Pre-defined glyph content to display. |
| accessibilityLabel? | `string` | Text describing the icon, to be read to screenreaders. |

***

## Guidelines

| ✅ Do | 🛑 Don't |
| - | - |
| Use Icons to provide visual indicators to your actions, such as sorting and searching | Use the same accessibility label for every Icon |
| Use a unique accessibility label that describes the Icon, so that the merchants device’s screen reader can announce the content | |

For more guidelines, refer to Polaris' [Icon related guidelines](https://polaris.shopify.com/components/images-and-icons/icon#related-guidelines).

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/icon.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/icon.md#guidelines)