Choose a version:

Icon

Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality.

Anchor to iconpropsIconProps

Anchor to source source required: Specifies which icon to display

Check the list of available icons here
Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the icon. When set, it will be announced to buyers using assistive technologies and will provide them with more context.
Anchor to appearance appearance Default: 'base': Sets the appearance (color) of the icon.
Anchor to size size Extract<, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'> Default: 'base': Adjusts the size of the icon.
Anchor to id id string: A unique identifier for the component.

IconProps

accessibilityLabel
A label that describes the purpose or contents of the icon. When set, it will be announced to buyers using assistive technologies and will provide them with more context.
```
string
```
appearance
Sets the appearance (color) of the icon.
```
Appearance
```

size

Adjusts the size of the icon.

Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'>

source
Specifies which icon to display Check the list of available icons [here](/docs/api/checkout-ui-extensions/components/media/icon#icons)
```
IconSource
```
id
A unique identifier for the component.
```
string
```

export interface IconProps extends IdProps {
  /**
   * A label that describes the purpose or contents of the icon. When set,
   * it will be announced to buyers using assistive technologies and will
   * provide them with more context.
   */
  accessibilityLabel?: string;

  /**
   * Sets the appearance (color) of the icon.
   *
   * @defaultValue 'base'
   */
  appearance?: Appearance;

  /**
   * Adjusts the size of the icon.
   *
   * @defaultValue 'base'
   */
  size?: Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'>;

  /**
   * Specifies which icon to display
   *
   * Check the list of available icons [here](/docs/api/checkout-ui-extensions/components/media/icon#icons)
   */
  source: IconSource;
}

Appearance

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

Size

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'

IconSource

'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowUpRight' | 'arrowDown' | 'bag' | 'calendar' | 'camera' | 'caretDown' | 'cart' | 'checkmark' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronDown' | 'clock' | 'close' | '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' | 'return' | 'savings' | 'store' | 'success' | 'truck' | 'verticalDots' | 'warning' | 'warningFill'

Was this section helpful?

Basic Icon

import {

reactExtension,

Icon,

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

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return <Icon source="discount" />;

}

examples

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

Preview

Anchor to iconsIcons

Was this section helpful?

Anchor to appearanceAppearance

Value	Description
`"accent"`	Conveys emphasis and draws attention to the element.
`"interactive"`	Conveys that the element is pressable, hoverable or otherwise interactive.
`"subdued"`	Conveys a subdued or disabled state for the element.
`"info"`	Conveys that the element is informative or has information.
`"success"`	Convey a successful interaction.
`"warning"`	Convey something needs attention or an action needs to be taken.
`"critical"`	Conveys a problem has arisen.
`"monochrome"`	Takes the color of its parent.

Was this section helpful?