# Icon
A component that renders an icon from the POS asset catalog.
### Example icons

```tsx
import React from 'react';

import {
  Icon,
  Screen,
  ScrollView,
  Navigator,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  return (
    <Navigator>
      <Screen name="Image" title="Image Example">
        <ScrollView>
          <Icon name="call" size="minor" />
          <Icon name="card-reader" size="major" />
          <Icon name="circle-cancel" size="spot" />
          <Icon name="orders" size="caption" />
          <Icon name="star" size="badge" />
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

export default reactExtension('pos.home.modal.render', () => (
  <SmartGridModal />
));

```

```ts
import {
  Navigator,
  Screen,
  ScrollView,
  Icon,
  IconName,
  IconSize,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const iconsData: {name: IconName; size: IconSize}[] = [
    {name: 'call', size: 'minor'},
    {name: 'card-reader', size: 'major'},
    {name: 'circle-cancel', size: 'spot'},
    {name: 'orders', size: 'caption'},
    {name: 'star', size: 'badge'},
  ];
  const scrollView = root.createComponent(ScrollView);

  iconsData.forEach((iconData) => {
    const icon = root.createComponent(Icon, {
      name: iconData.name,
      size: iconData.size,
    });
    scrollView.append(icon);
  });

  const screen = root.createComponent(Screen, {
    name: 'Icon',
    title: 'Icon Example',
  });
  screen.append(scrollView);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);
});

```


## Icon

### IconProps

### name
A name used to render the icon.
### size
Size of the icon.
### IconName

'add-customer' | 'analytics' | 'apps' | 'arrow' | 'arrow-left' | 'backspace' | 'card-reader' | 'call' | 'cancel' | 'not-stocked' | 'cash' | 'checkmark' | 'caret-down' | 'checkmark-active' | 'checkmark-inactive' | 'chevron-up' | 'chevron-right' | 'chevron-down' | 'circle-alert' | 'circle-cancel' | 'circle-checkmark' | 'circle-disconnected' | 'circle-info' | 'circle-outline' | 'clock' | 'collections' | 'copy' | 'credit-card' | 'custom-payment' | 'custom-sale' | 'discount' | 'external-link' | 'flag' | 'flip-camera' | 'gallery-view' | 'gift-card' | 'help' | 'hide-keyboard' | 'home' | 'horizontal-dots' | 'keypad' | 'lightning' | 'link' | 'list' | 'list-view' | 'lock' | 'mail' | 'available-at-other-locations' | 'menu' | 'minus' | 'mobile' | 'note-report' | 'drawer' | 'orders' | 'shopify-payments' | 'play-button' | 'plus' | 'products' | 'radio-active' | 'radio-inactive' | 'rearrange' | 'receipt' | 'refresh' | 'register' | 'retrieve-cart' | 'image-placeholder' | 'save-cart' | 'scan-barcode' | 'search' | 'send' | 'settings' | 'shipment' | 'split-payment' | 'sort' | 'staff' | 'star' | 'unordered-list' | 'connectivity-warning' | 'internet' | 'delivery' | 'shop-pay'
### IconSize

'minor' | 'major' | 'spot' | 'caption' | 'badge'
## Related
- [Figma UI Kit](https://www.figma.com/community/file/1255225508400961281/shopify-pos-ui-kit)