---
title: Icon
description: >-
The icon component renders graphic symbols to visually communicate actions,
status, and navigation throughout the interface. Use icon to reinforce button
actions, indicate status states, or provide wayfinding cues that help users
understand available functionality.
Icons support multiple sizes, tones for semantic meaning, and can be
integrated with other components like
[button](/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/actions/button),
[badge](/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/badge),
and
[chip](/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/typography-and-content/chip)
to enhance visual communication.
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/media-and-visuals/icon
md: >-
https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/media-and-visuals/icon.md
---
# Icon
The icon component renders graphic symbols to visually communicate actions, status, and navigation throughout the interface. Use icon to reinforce button actions, indicate status states, or provide wayfinding cues that help users understand available functionality.
Icons support multiple sizes, tones for semantic meaning, and can be integrated with other components like [button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/actions/button), [badge](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/badge), and [chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/typography-and-content/chip) to enhance visual communication.
## Properties
* **id**
**string**
A unique identifier for the element.
* **size**
**'small' | 'large' | 'base' | 'small-200' | 'small-100' | 'large-100'**
**Default: 'base'**
Adjusts the size of the icon.
* **tone**
**'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'**
**Default: 'auto'**
Sets the tone of the icon, based on the intention of the information being conveyed.
* **type**
**'' | ReducedIconTypes**
### ReducedIconTypes
```ts
'cart' | 'note' | 'settings' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'
```
Examples
## Preview
### Examples
* #### Code
##### Default
```html
```