---
title: Icon
description: >-
Icons are pictograms or graphic symbols. They can act as wayfinding tools or
as a means of communicating functionality.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/icon
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/icon.md
---
Migrate to Polaris
Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.
# 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 customers understand available functionality.
Icons support multiple sizes, appearances for semantic meaning, and can be integrated with other components like [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/button) and [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/badge) to enhance visual communication.
### Support Targets (25)
### Supported targets
* CustomerAccount::KitchenSink
* [customer-account.footer.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.order-index.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.order-status.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.profile.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/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/2025-07/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.
* **source**
**IconSource**
**required**
The name of the icon to display.
* **accessibilityLabel**
**string**
A label that describes the purpose or contents of the icon. When set, it will be announced to users using assistive technologies and will provide them with more context.
* **appearance**
**Appearance**
**Default: 'base'**
The color of the icon, set using a design-system keyword.
* **id**
**string**
A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.
* **size**
**'extraSmall' | 'small' | 'large' | 'base' | 'fill'**
**Default: 'base'**
The size of the icon.
* `extraSmall`: The smallest available icon size.
* `small`: A compact icon size, smaller than the default.
* `base`: Renders the icon at its standard size.
* `large`: A larger icon for increased visual prominence.
* `fill`: Stretches the icon to fill the available space in its container while preserving its aspect ratio.
### Appearance
A keyword that maps to a predefined color or visual treatment from the design system. Used to convey meaning or emphasis through color. - \`base\`: The default color for the element set within the theme. - \`accent\`: Conveys emphasis and draws attention to the element. - \`decorative\`: Uses the \`decorative\` color set within the theme. - \`interactive\`: Conveys that the element is pressable or hoverable. Deprecated; use \`accent\` instead. - \`subdued\`: Conveys a subdued or disabled state. - \`info\`: Conveys informational content. - \`success\`: Conveys a successful interaction. - \`warning\`: Conveys something needs attention or action. - \`critical\`: Conveys a problem has arisen. - \`monochrome\`: Takes the color of its parent, giving a uniform appearance.
```ts
'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
```
### IconSource
The name of the icon to display. Each value maps to a specific pictogram from the icon set.
```ts
'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowUpRight' | 'arrowDown' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caretDown' | 'cart' | 'cashDollar' | 'categories' | 'checkmark' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronDown' | 'clipboard' | 'clock' | 'close' | 'creditCard' | 'critical' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'email' | 'error' | 'errorFill' | 'external' | 'filter' | 'geolocation' | 'gift' | 'giftFill' | 'grid' | 'hamburger' | 'hollowCircle' | 'horizontalDots' | 'image' | 'info' | 'infoFill' | 'list' | 'lock' | 'magnify' | 'map' | 'marker' | 'minus' | 'mobile' | 'note' | 'orderBox' | 'pen' | 'plus' | 'profile' | 'question' | 'questionFill' | 'reorder' | 'reset' | 'return' | 'savings' | 'settings' | 'star' | 'starFill' | 'starHalf' | 'store' | 'success' | 'truck' | 'upload' | 'verticalDots' | 'warning' | 'warningFill'
```
***
## Examples
### Display an icon
Render a graphic symbol from the built-in icon set. This example displays a single discount icon at its default size.
## Display an icon
## Display an icon
##### React
```tsx
import {
reactExtension,
Icon,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return ;
}
```
##### JS
```js
import {extension, Icon} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const icon = root.createComponent(Icon, {source: 'discount'});
root.appendChild(icon);
});
```
### Apply semantic appearances
Communicate status through color-coded icons. This example pairs `success`, `warning`, and `critical` appearances with status messages so customers can quickly identify the state of each item.
## Apply semantic appearances
##### React
```tsx
import {
reactExtension,
Icon,
Text,
InlineStack,
BlockStack,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
Order confirmed
Address needs review
Payment failed
);
}
```
##### JS
```js
import {extension, Icon, Text, InlineStack, BlockStack} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
function createRow(iconSource, appearance, label) {
const icon = root.createComponent(Icon, {source: iconSource, appearance});
const text = root.createComponent(Text, {}, label);
const row = root.createComponent(InlineStack, {spacing: 'small'});
row.append(icon);
row.append(text);
return row;
}
const stack = root.createComponent(BlockStack, {spacing: 'base'});
stack.append(createRow('checkCircle', 'success', 'Order confirmed'));
stack.append(createRow('warning', 'warning', 'Address needs review'));
stack.append(createRow('error', 'critical', 'Payment failed'));
root.append(stack);
});
```
### Pair icons with text labels
Combine icons with text labels to reinforce meaning. This example shows fulfillment options with matching icons so customers can scan the list quickly.
## Pair icons with text labels
##### React
```tsx
import {
reactExtension,
Icon,
Text,
InlineStack,
BlockStack,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
Store pickup
Standard shipping
Free returns
);
}
```
##### JS
```js
import {extension, Icon, Text, InlineStack, BlockStack} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
function createRow(iconSource, label) {
const icon = root.createComponent(Icon, {source: iconSource});
const text = root.createComponent(Text, {}, label);
const row = root.createComponent(InlineStack, {spacing: 'small'});
row.append(icon);
row.append(text);
return row;
}
const stack = root.createComponent(BlockStack, {spacing: 'base'});
stack.append(createRow('store', 'Store pickup'));
stack.append(createRow('delivery', 'Standard shipping'));
stack.append(createRow('return', 'Free returns'));
root.append(stack);
});
```
### Compare icon sizes
Adjust icon prominence with the `size` property. This example displays the same search icon at `extraSmall`, `small`, `base`, and `large` sizes side by side.
## Compare icon sizes
##### React
```tsx
import {
reactExtension,
Icon,
InlineStack,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
);
}
```
##### JS
```js
import {extension, Icon, InlineStack} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const row = root.createComponent(InlineStack, {spacing: 'base', blockAlignment: 'center'});
['extraSmall', 'small', 'base', 'large'].forEach((size) => {
row.append(root.createComponent(Icon, {
source: 'search',
size,
accessibilityLabel: `${size} search icon`,
}));
});
root.append(row);
});
```
***
## Best practices
* **Use icons to support actions and status, not decorate**: Icons should clarify what an action does or indicate state. Use a trash icon for delete actions, a checkmark for completed status, or a warning icon for errors. Avoid adding icons purely for visual interest.
* **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.
* **Pair icons with text labels whenever possible**: Icons work best as visual reinforcement alongside text. Without text, even common icons can be ambiguous. Only use icons alone in space-constrained contexts with proper accessibility labels.
* **Use semantic appearances to communicate meaning**: Apply appearances like `critical` for destructive actions, `success` for positive states, and `warning` for caution. Appearances should convey information, not serve as decoration.
***
## Limitations
* Icons are limited to the predefined set provided by the component. Custom SVG icons, icon fonts, or external icon libraries aren't supported.
* Icons can't be animated or include interactive states beyond color changes. For complex graphics or illustrations, use the [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/image) component instead.
* Icon color is determined by the `appearance` property. Custom colors or gradients aren't available.
***