Migrate to the Polaris icon component

The Polaris icon component displays small visual indicators and symbols. It replaces the previous Icon component and is available as <s-icon> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris icon component.

Anchor to sourcesource

The previous Icon source prop is now called type. Icon names have changed from camelCase to kebab-case, and some icons are renamed.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <>
      <s-icon type="check" />
      <s-icon type="arrow-left" />
    </>
  );
}

import {
  reactExtension,
  Icon,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <>
      <Icon source="checkmark" />
      <Icon source="arrowLeft" />
    </>
  );
}

Anchor to appearanceappearance

The previous Icon appearance prop is now called tone.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return <s-icon type="check" tone="success" />;
}

import {
  reactExtension,
  Icon,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return <Icon source="checkmark" appearance="success" />;
}

Anchor to sizesize

The size prop values have changed.

For more on the scale system, see Scale.

Anchor to Removed propertiesRemoved properties

Anchor to accessibilityLabelaccessibilityLabel

The Polaris icon component no longer supports accessibilityLabel directly. To provide a screen-reader label, render a <s-text accessibilityVisibility="exclusive"> next to the icon.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <>
      <s-text accessibilityVisibility="exclusive">
        More information
      </s-text>
      <s-icon type="info" />
    </>
  );
}

import {
  reactExtension,
  Icon,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return <Icon source="info" accessibilityLabel="More information" />;
}