---
title: Icon
description: >-
The icon component renders graphic symbols to visually communicate actions,
status, and navigation throughout the interface.
api_version: 2026-07
source_url:
html: >-
https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/media-and-visuals/icon
md: >-
https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/media-and-visuals/icon.md
api_name: checkout-ui-extensions
---
# 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.
Icon components support multiple sizes, semantic tones, and integration with components like [button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/button), [badge](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/badge), and [chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/chip). For recognized payment brand marks, use [payment icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/media-and-visuals/payment-icon) instead.
### Support Targets (29)
### Supported targets
* [purchase.checkout.actions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation#navigation-target)
* [purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/block#block-target)
* [purchase.checkout.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#line-item-targets)
* [purchase.checkout.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-cart-line-list-)
* [purchase.checkout.contact.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/information#information-target)
* [purchase.checkout.delivery-address.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-delivery-address-)
* [purchase.checkout.delivery-address.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#delivery-address-targets)
* [purchase.checkout.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/footer#footer-target)
* [purchase.checkout.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/header#header-target)
* [purchase.checkout.payment-method-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#render-after-payment-methods-)
* [purchase.checkout.payment-method-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#payment-targets)
* [purchase.checkout.pickup-location-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#render-after-pickup-locations-)
* [purchase.checkout.pickup-location-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-list-targets)
* [purchase.checkout.pickup-location-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-option-item-target)
* [purchase.checkout.pickup-point-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#render-after-pickup-points-)
* [purchase.checkout.pickup-point-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#pickup-points-targets)
* [purchase.checkout.reductions.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-reductions-after-)
* [purchase.checkout.reductions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#reductions-targets)
* [purchase.checkout.shipping-option-item.details.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-item-targets)
* [purchase.checkout.shipping-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-option-)
* [purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-options-)
* [purchase.checkout.shipping-option-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-list-targets)
* [purchase.thank-you.announcement.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/announcement#thank-you-announcement-)
* [purchase.thank-you.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/block#block-target)
* [purchase.thank-you.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#line-item-targets)
* [purchase.thank-you.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#thank-you-cart-line-list-)
* [purchase.thank-you.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/information#information-target)
* [purchase.thank-you.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/footer#footer-target)
* [purchase.thank-you.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/header#header-target)
#### Use cases
* **Visual indicators**: Add visual indicators to buttons for actions like save, delete, or edit.
* **Status communication**: Display status icons for success, warning, error, or informational states.
* **Navigation cues**: Provide visual cues in links or navigation elements.
* **Feature identification**: Help buyers quickly identify features or sections with recognizable icons.
***
## Properties
Configure the following properties on the icon component.
Configure the following properties on the icon component.
* **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
### Display icons
Add visual cues to help buyers identify checkout actions. This example displays common icons for cart, delivery, store, and settings using the `type` property.
## Display icons
## html
```html
```
### Pair an icon with a text label
Add an icon beside text to reinforce a message visually. This example renders a store icon inline with a pickup availability label using an `s-stack` with `direction="inline"`.
## html
```html
Available for in-store pickup
```
### Apply semantic tones
Communicate status through color-coded icons. This example displays icons with warning, success, info, and critical tones to convey different states at a glance.
## html
```html
```
### De-emphasize an icon
Lower the visual prominence of an icon for secondary content. This example displays a help icon with `tone="neutral"` so it doesn't compete with primary actions.
## html
```html
```
### Use in buttons
Reinforce button actions with visual cues. This example places icons inside buttons for add-to-cart and remove actions with appropriate tones.
## html
```html
Add to cart
Remove
```
### Use in badges
Enhance status badges with visual indicators. This example pairs badges with icons to show fulfilled and action-required order states.
## html
```html
Fulfilled
Action required
```
***
## Best practices
* **Use meaningful icons to support actions and status, not decorate**: Icons should clarify what an action does or indicate state. Use icons with well-established meanings such as a trash icon for delete actions, a checkmark for completed status, or a warning icon for errors. Avoid adding icons purely for visual interest.
* **Use tones consistently to communicate semantic meaning**: Apply `info` for neutral guidance,`success` for confirmations, `warning` for issues that need attention, and `critical` sparingly for problems that must be resolved immediately.
* **Pair with text labels**: Don't rely on icons alone to communicate meaning. Always pair icons with visible text for clarity and accessibility.
* **Maintain consistency across your interface**: Always use the same icon for the same action or concept throughout your extension. If you use a pencil for edit in one place, use it everywhere. Inconsistent icon usage confuses buyers.
* **Size appropriately**: Use `base` for standard inline icons, `small` for compact layouts, and `large` when extra emphasis is needed. Avoid mixing sizes in the same row. Inconsistent sizing creates uneven vertical alignment and makes the UI feel unpolished.
***