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

```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
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
Sets the appearance (color) of the icon.
### size
Adjusts the size of the icon.
### source
Specifies which icon to display

Check the list of available icons [here](/docs/api/checkout-ui-extensions/components/media/icon#icons)
### id
A unique identifier for the component.
### 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' | 'store' | 'success' | 'truck' | 'verticalDots' | 'warning' | 'warningFill'