--- 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. api_version: 2026-04 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/media-and-visuals/icon md: >- https://shopify.dev/docs/api/customer-account-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. Icon components support multiple sizes, semantic tones, and integration with components like [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button), [badge](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/badge), and [chip](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/chip). For recognized payment brand marks, use [payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/media-and-visuals/payment-icon) instead. ### Support Targets (24) ### Supported targets * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### 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 customers quickly identify features or sections with recognizable icons. *** ## Properties 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** **'base' | 'small' | 'small-200' | 'small-100' | 'large' | '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** **'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'** **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 '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' | 'cart' | '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' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x' ``` *** ## Examples ### Display icons Add visual cues to help customers understand available actions. This example displays common icons for store, orders, favorites, and settings. ## Display icons ![A row of icons displaying store, orders, favorites, and settings pictograms from the checkout icon set.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/icon-default-CopEUfZi.png) ## html ```html ``` ### Pair an icon with a text label Pair an icon with text to provide contextual information. This example places an info icon next to a delivery estimate label. ## html ```html Delivery estimate ``` ### Apply semantic tones Communicate status through color-coded icons. This example displays icons with warning, success, info, and critical tones. ## html ```html ``` ### De-emphasize an icon De-emphasize supporting icons with a neutral tone. This example presents a help icon in a softer visual style. ## html ```html ``` ### Use in buttons Nest icons inside [button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) components to reinforce actions. This example adds return and contact icons as children of action buttons. ## html ```html Request return Contact support ``` ### Use in badges Add icons to [badge](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/badge) components for quick status recognition. This example shows neutral and critical badges with matching icons. ## html ```html Delivered Action needed ``` *** ## 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 customers. * **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. ***