# Icon

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

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

```

## IconProps

### IconProps

### accessibilityLabel

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

value: `Appearance`

Sets the appearance (color) of the icon.

By default the icon will inherit the color of its parent.

### size

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

Adjusts the size of the icon.

### source

value: `IconSource`

Specifies which icon to display

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

### id

value: `string`

A unique identifier for the component.