---
title: Icon
description: Displays graphic symbols to communicate meaning and functionality. Use to enhance navigation, indicate actions, or provide visual context alongside text.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsmedia/icon
md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsmedia/icon.md
---
# Icon
Displays graphic symbols to communicate meaning and functionality. Use to enhance navigation, indicate actions, or provide visual context alongside text.
## Properties
* color
ColorKeyword
Default: 'base'
Modify the color to be more or less intense.
* id
string
A unique identifier for the element.
* size
SizeKeyword
Default: 'base'
Adjusts the size of the icon.
* tone
ToneKeyword
Default: 'auto'
Sets the tone of the icon, based on the intention of the information being conveyed.
* type
SupportedIconNames
Default: ''
The type of icon to display.
### ColorKeyword
```ts
'subdued' | 'base' | 'strong'
```
### SizeKeyword
```ts
'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'
```
### ToneKeyword
Tone is a property for defining the color treatment of a component. A tone can apply a grouping of colors to a component. For example, critical may have a specific text color and background color. In some cases, like for Banner, the tone may also affect the semantic and accessibility treatment of the component.
```ts
'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical' | 'accent' | 'custom'
```
### SupportedIconNames
```ts
'external' | 'alert-circle' | 'apps' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'backspace' | 'barcode' | 'battery-low' | 'bolt-filled' | 'bullet' | 'camera-flip' | 'caret-down' | 'caret-up' | 'cart' | 'cart-down' | 'cart-filled' | 'cart-send' | 'cart-up' | 'chart-line' | 'chart-vertical' | 'check' | 'check-circle-filled' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clipboard-checklist' | 'clock' | 'collection' | 'credit-card' | 'credit-card-reader' | 'delete' | 'delivery' | 'desktop' | 'disabled' | 'disabled-filled' | 'discount' | 'discount-add' | 'discount-automatic' | 'discount-code' | 'discount-remove' | 'drag-handle' | 'drawer' | 'duplicate' | 'edit' | 'email' | 'exchange' | 'flag' | 'gift-card' | 'graduation-hat' | 'grid' | 'hide-filled' | 'home' | 'home-filled' | 'image' | 'images' | 'info' | 'inventory' | 'inventory-edit' | 'inventory-list' | 'inventory-transfer' | 'keyboard-hide' | 'keypad' | 'link' | 'list-bulleted' | 'list-bulleted-filled' | 'live' | 'live-critical' | 'live-none' | 'location' | 'lock' | 'maximize' | 'menu' | 'menu-filled' | 'menu-horizontal' | 'minimize' | 'minus' | 'mobile' | 'money' | 'money-split' | 'note' | 'order' | 'order-draft' | 'order-filled' | 'package' | 'package-cancel' | 'package-reassign' | 'payment' | 'person' | 'person-add' | 'person-filled' | 'phablet' | 'phone-out' | 'play-circle' | 'plus' | 'point-of-sale' | 'point-of-sale-register' | 'print' | 'product' | 'product-filled' | 'profile' | 'question-circle-filled' | 'receipt' | 'refresh' | 'return' | 'scan-qr-code' | 'search' | 'send' | 'settings' | 'shipping-label-cancel' | 'sort' | 'star-circle' | 'star-filled' | 'store' | 'tablet' | 'transaction-fee-add' | 'unlock' | 'variant' | 'view' | 'wallet' | 'x' | 'x-circle'
```
### Examples
* #### Code
##### Default
```html
```
## Preview
