Icon

The Icon component renders pictograms or graphic symbols. It can act as a wayfinding tool or as a means of communicating functionality.

Anchor to IconPropsIconProps

'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'

'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowUpRight' | 'arrowDown' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caretDown' | 'cart' | 'cashDollar' | 'categories' | 'checkmark' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronDown' | 'clipboard' | 'clock' | 'close' | 'creditCard' | 'critical' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'email' | 'error' | 'errorFill' | 'external' | 'filter' | 'geolocation' | 'gift' | 'giftFill' | 'grid' | 'hamburger' | 'hollowCircle' | 'horizontalDots' | 'image' | 'info' | 'infoFill' | 'list' | 'lock' | 'magnify' | 'map' | 'marker' | 'minus' | 'mobile' | 'note' | 'orderBox' | 'pen' | 'plus' | 'profile' | 'question' | 'questionFill' | 'reorder' | 'reset' | 'return' | 'savings' | 'settings' | 'star' | 'starFill' | 'starHalf' | 'store' | 'success' | 'truck' | 'upload' | 'verticalDots' | 'warning' | 'warningFill'

Anchor to ExamplesExamples

Anchor to Basic IconBasic Icon

Basic Icon

Basic Icon

ReactJS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

import {

reactExtension,

Icon,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return <Icon source="discount" />;

}

9

1

2

3

4

5

6

7

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

export default extension('purchase.checkout.block.render', (root) => {

const icon = root.createComponent(Icon, {source: 'discount'});

root.appendChild(icon);

});

React

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

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

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

JS

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

export default extension('purchase.checkout.block.render', (root) => {
  const icon = root.createComponent(Icon, {source: 'discount'});

  root.appendChild(icon);
});

Anchor to Best practicesBest practices

• Use meaningful icons to support actions and status, not decorate: Icons should clarify what an action does or indicate state. Use icons with well-established meanings such as a trash icon for delete actions, a checkmark for completed status, or a warning icon for errors. Avoid adding icons purely for visual interest.
• Use appearances consistently to communicate semantic meaning: Apply info for neutral guidance, success for confirmations, warning for issues that need attention, and critical sparingly for problems that must be resolved immediately.
• Pair with text labels: Don't rely on icons alone to communicate meaning. Always pair icons with visible text for clarity and accessibility.
• Maintain consistency across your interface: Always use the same icon for the same action or concept throughout your extension. If you use a pencil for edit in one place, use it everywhere. Inconsistent icon usage confuses buyers.
• Size appropriately: Use base for standard inline icons, small for compact layouts, and large when extra emphasis is needed. Avoid mixing sizes in the same row. Inconsistent sizing creates uneven vertical alignment and makes the UI feel unpolished.

Anchor to LimitationsLimitations

• The Icon component's source property only accepts values from the predefined IconSource set. Custom SVG icons, icon fonts, or external icon libraries aren't supported.
• Custom pixel or percentage dimensions aren't supported for the size property. Use the accepted values listed in the size property description above.
• The Icon component's color is determined by the appearance property. Custom colors or gradients aren't available.

Anchor to IconsIcons

Anchor to AppearanceAppearance