---
title: Icon
description: >-
  Icons are pictograms or graphic symbols. They can act as wayfinding tools or
  as a means of communicating functionality.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/media/icon
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/media/icon.md
---

# Icon

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

## IconProps

* source

  IconSource

  required

  Specifies which icon to display

  Check the list of available icons [here](https://shopify.dev/docs/api/checkout-ui-extensions/components/media/icon#icons)

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

* appearance

  Appearance

  Default: 'base'

  Sets the appearance (color) of the icon.

* id

  string

  A unique identifier for the component.

* size

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

  Default: 'base'

  Adjusts the size of the icon.

### Appearance

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

### Size

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

### IconSource

```ts
'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'
```

### Examples

* #### Basic Icon

  ##### React

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

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

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

  ##### JS

  ```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

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/icon-default.png)

## Icons

![](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/icon-all.png)

## Appearance

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