Icon

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

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

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();

});

import React from 'react';

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

function App() {

return <Icon source="cancelSmallMinor" />;

}

extend(

'Playground',

render(() => <App />),

);

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();
});

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

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

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

Anchor to PropsProps

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.

Anchor to GuidelinesGuidelines

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

Was this page helpful?