---
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-04/web-components/actions/button),
[badge](/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge),
and
[chip](/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/chip)
to enhance visual communication.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/icon
md: >-
https://shopify.dev/docs/api/checkout-ui-extensions/latest/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-04/web-components/actions/button), [badge](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge), and [chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/chip) to enhance visual communication.
### Support Targets (29)
### Supported targets
* purchase.checkout.actions.render-before
* purchase.checkout.block.render
* purchase.checkout.cart-line-item.render-after
* purchase.checkout.cart-line-list.render-after
* purchase.checkout.contact.render-after
* purchase.checkout.delivery-address.render-after
* purchase.checkout.delivery-address.render-before
* purchase.checkout.footer.render-after
* purchase.checkout.header.render-after
* purchase.checkout.payment-method-list.render-after
* purchase.checkout.payment-method-list.render-before
* purchase.checkout.pickup-location-list.render-after
* purchase.checkout.pickup-location-list.render-before
* purchase.checkout.pickup-location-option-item.render-after
* purchase.checkout.pickup-point-list.render-after
* purchase.checkout.pickup-point-list.render-before
* purchase.checkout.reductions.render-after
* purchase.checkout.reductions.render-before
* purchase.checkout.shipping-option-item.details.render
* purchase.checkout.shipping-option-item.render-after
* purchase.checkout.shipping-option-list.render-after
* purchase.checkout.shipping-option-list.render-before
* purchase.thank-you.announcement.render
* purchase.thank-you.block.render
* purchase.thank-you.cart-line-item.render-after
* purchase.thank-you.cart-line-list.render-after
* purchase.thank-you.customer-information.render-after
* purchase.thank-you.footer.render-after
* purchase.thank-you.header.render-after
## Properties
* **id**
**string**
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
* **size**
**'small' | 'large' | 'base' | 'small-200' | 'small-100' | 'large-100'**
**Default: 'base'**
The size of the icon.
* `'base'`: Default size that works well for most use cases.
* `'small'`: Small icon for inline use within text or compact UI elements.
* `'small-200'`: Extra small icon for the most compact contexts.
* `'small-100'`: Small icon suitable for tight or dense layouts.
* `'large'`: Large icon for emphasis or prominent display.
* `'large-100'`: Extra large icon for maximum visual impact.
* **tone**
**'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'**
**Default: 'auto'**
The semantic meaning and color treatment of the icon.
* `'info'`: Informational content or helpful tips.
* `'auto'`: Automatically determined based on context.
* `'neutral'`: General information without specific intent.
* `'success'`: Positive outcomes or successful states.
* `'warning'`: Important warnings about potential issues.
* `'critical'`: Urgent problems or destructive actions.
* `'custom'`: Inherits a custom color from its parent element's CSS.
* **type**
**'' | ReducedIconTypes**
The type of icon that will be displayed. You can specify an icon name from the available icon set, or use an empty string to show no icon.
### ReducedIconTypes
The subset of icon types available in checkout and customer account surfaces. This is a narrowed set from the full Shopify icon library, containing only the icons supported in these contexts.
```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
```