---
title: Icon
description: Renders a graphic symbol to visually communicate core parts of the product and available actions. Icons can act as wayfinding tools to help users quickly understand their location within the interface and common interaction patterns.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/media/icon
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/media/icon.md
---

# Icon

Renders a graphic symbol to visually communicate core parts of the product and available actions. Icons can act as wayfinding tools to help users quickly understand their location within the interface and common interaction patterns.

## 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' | '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

* #### Code

  ##### Default

  ```html
  <s-icon type="store"></s-icon>
  <s-icon type="star"></s-icon>
  <s-icon type="settings"></s-icon>
  <s-icon type="image"></s-icon>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/icon-default.png)