# Icon

This component renders an icon from a predefined list. Choose the one that suits your needs.

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

render('Playground', () => <App />);

function App() {
  return <Icon name="AppsMajor" />;
}

```

```js
import {extend, Icon} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const icon = root.createComponent(Icon, {name: 'AppsMajor'});

  root.appendChild(icon);
});

```

## IconProps

### IconProps

### accessibilityLabel

value: `string`

A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or `label` supplied will not be announced to screen readers.

### id

value: `string`

A unique identifier for the icon.

### name

value: `IconName`

Specifies the name of the icon that will be displayed.

### size

value: `| 'base'
    /**
     * `fill` will take the space available in the container and keep the icon's proportion.
     */
    | 'fill'`

Adjusts the size of the icon.

### tone

value: `'inherit' | 'critical'`

Set the color of the icon.

- `inherit` will take the color value from its parent, giving the link a monochrome appearance.

## Related

- [Image](https://shopify.dev/docs/api/admin-extensions/components/media/image)

## IconName

List of available Icons for the Icon component

## Related

- [Image](https://shopify.dev/docs/api/admin-extensions/components/media/image)