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.

Anchor to propertiesProperties

Anchor to color color "base" | "subdued": Modify the color to be more or less intense.
Anchor to interestFor interestFor string
Anchor to size size "small" | "base": Adjusts the size of the icon.
Anchor to tone tone "info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution": Sets the tone of the icon, based on the intention of the information being conveyed.
Anchor to type type "" | "replace" | "search" | "link" | "product" | "variant" | "collection" | "select" | "info" | "incomplete" | "complete" | "color" | "money" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" | "alert-location" | "alert-octagon-filled" | "alert-octagon" | "alert-triangle-filled" | "alert-triangle" | "app-extension": Specifies the type of icon that will be displayed.

Icon

adoptedCallback
```
() => void
```
attributeChangedCallback
```
(name: string) => void
```
click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
```
({ sourceEvent }?: ClickOptions) => void
```
color
Modify the color to be more or less intense.
```
"base" | "subdued"
```
connectedCallback
```
() => void
```
disconnectedCallback
```
() => void
```
interestFor
```
string
```
queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
```
() => void
```
setAttribute
```
(name: string, value: string) => void
```
size
Adjusts the size of the icon.
```
"small" | "base"
```
tone
Sets the tone of the icon, based on the intention of the information being conveyed.
```
"info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"
```

type

Specifies the type of icon that will be displayed.

"" | "replace" | "search" | "link" | "product" | "variant" | "collection" | "select" | "info" | "incomplete" | "complete" | "color" | "money" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" | "alert-location" | "alert-octagon-filled" | "alert-octagon" | "alert-triangle-filled" | "alert-triangle" | "app-extension" | "apps" | "archive" | "arrow-down-circle" | "arrow-down-right" | "arrow-down" | "arrow-left-circle" | "arrow-left" | "arrow-right-circle" | "arrow-right" | "arrow-up-circle" | "arrow-up-right" | "arrow-up" | "arrows-in-horizontal" | "arrows-out-horizontal" | "attachment" | "automation" | "backspace" | "bag" | "bank" | "barcode" | "bill" | "blank" | "blog" | "bolt-filled" | "bolt" | "book-open" | "book" | "bug" | "bullet" | "business-entity" | "button-press" | "button" | "calculator" | "calendar-check" | "calendar-compare" | "calendar-list" | "calendar-time" | "calendar" | "camera-flip" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "cart-abandoned" | "cart-discount" | "cart-down" | "cart-sale" | "cart-up" | "cart" | "cash-dollar" | "cash-euro" | "cash-pound" | "cash-rupee" | "cash-yen" | "catalog-product" | "categories" | "channels" | "chart-cohort" | "chart-donut" | "chart-funnel" | "chart-histogram-first-last" | "chart-histogram-first" | "chart-histogram-flat" | "chart-histogram-full" | "chart-histogram-growth" | "chart-histogram-last" | "chart-histogram-second-last" | "chart-horizontal" | "chart-line" | "chart-popular" | "chart-stacked" | "chart-vertical" | "chat-new" | "chat-referral" | "chat" | "check-circle-filled" | "check-circle" | "check" | "checkbox" | "chevron-down-circle" | "chevron-down" | "chevron-left-circle" | "chevron-left" | "chevron-right-circle" | "chevron-right" | "chevron-up-circle" | "chevron-up" | "circle-dashed" | "circle" | "clipboard-check" | "clipboard-checklist" | "clipboard" | "clock-revert" | "clock" | "code-add" | "code" | "collection-featured" | "collection-list" | "collection-reference" | "color-none" | "compass" | "compose" | "confetti" | "connect" | "content" | "contract" | "corner-pill" | "corner-round" | "corner-square" | "credit-card-cancel" | "credit-card-percent" | "credit-card-reader-chip" | "credit-card-reader-tap" | "credit-card-reader" | "credit-card-secure" | "credit-card-tap-chip" | "credit-card" | "crop" | "currency-convert" | "cursor-banner" | "cursor-option" | "cursor" | "data-presentation" | "data-table" | "database-add" | "database-connect" | "database" | "delete" | "delivered" | "delivery" | "desktop" | "disabled" | "discount-add" | "discount-code" | "discount" | "dns-settings" | "dock-floating" | "dock-side" | "domain-landing-page" | "domain-new" | "domain-redirect" | "domain" | "download" | "drag-drop" | "drag-handle" | "duplicate" | "edit" | "email-follow-up" | "email-newsletter" | "email" | "empty" | "enabled" | "enter" | "envelope-soft-pack" | "envelope" | "eraser" | "exchange" | "exit" | "export" | "external" | "eye-check-mark" | "eye-dropper-list" | "eye-dropper" | "eye-first" | "eyeglasses" | "fav" | "favicon" | "file-list" | "file" | "filter-active" | "filter" | "flag" | "flip-horizontal" | "flip-vertical" | "flower" | "folder-add" | "folder-down" | "folder-remove" | "folder-up" | "folder" | "food" | "foreground" | "forklift" | "forms" | "games" | "gauge" | "geolocation" | "gift-card" | "gift" | "git-branch" | "git-commit" | "git-repository" | "globe-asia" | "globe-europe" | "globe-lines" | "globe-list" | "globe" | "grid" | "hashtag-decimal" | "hashtag-list" | "hashtag" | "heart" | "hide-filled" | "hide" | "home" | "icons" | "identity-card" | "image-add" | "image-alt" | "image-explore" | "image-magic" | "image-none" | "image-with-text-overlay" | "image" | "images" | "import" | "in-progress" | "incentive" | "incoming" | "info-filled" | "inheritance" | "inventory-updated" | "inventory" | "iq" | "key" | "keyboard-filled" | "keyboard-hide" | "keyboard" | "label-printer" | "language-translate" | "language" | "layout-block" | "layout-buy-button-horizontal" | "layout-buy-button-vertical" | "layout-buy-button" | "layout-column-1" | "layout-columns-2" | "layout-columns-3" | "layout-footer" | "layout-header" | "layout-logo-block" | "layout-popup" | "layout-rows-2" | "layout-section" | "layout-sidebar-left" | "layout-sidebar-right" | "lightbulb" | "link-list" | "list-bulleted" | "list-numbered" | "live" | "location-none" | "location" | "lock" | "map" | "markets-euro" | "markets-rupee" | "markets-yen" | "markets" | "maximize" | "measurement-size-list" | "measurement-size" | "measurement-volume-list" | "measurement-volume" | "measurement-weight-list" | "measurement-weight" | "media-receiver" | "megaphone" | "mention" | "menu-horizontal" | "menu-vertical" | "menu" | "merge" | "metafields" | "metaobject-list" | "metaobject-reference" | "metaobject" | "microphone" | "minimize" | "minus-circle" | "minus" | "mobile" | "money-none" | "moon" | "nature" | "note-add" | "note" | "notification" | "order-batches" | "order-draft" | "order-first" | "order-fulfilled" | "order-repeat" | "order-unfulfilled" | "order" | "orders-status" | "organization" | "outdent" | "outgoing" | "package-fulfilled" | "package-on-hold" | "package-returned" | "package" | "page-add" | "page-attachment" | "page-clock" | "page-down" | "page-heart" | "page-list" | "page-reference" | "page-remove" | "page-report" | "page-up" | "page" | "pagination-end" | "pagination-start" | "paint-brush-flat" | "paint-brush-round" | "paper-check" | "partially-complete" | "passkey" | "paste" | "pause-circle" | "payment-capture" | "payment" | "payout-dollar" | "payout-euro" | "payout-pound" | "payout-rupee" | "payout-yen" | "payout" | "person-add" | "person-exit" | "person-list" | "person-lock" | "person-remove" | "person-segment" | "person" | "personalized-text" | "phone-in" | "phone-out" | "phone" | "pin-remove" | "pin" | "plan" | "play-circle" | "play" | "plus-circle-down" | "plus-circle-filled" | "plus-circle-up" | "plus-circle" | "plus" | "point-of-sale" | "price-list" | "print" | "product-add" | "product-cost" | "product-list" | "product-reference" | "product-remove" | "product-return" | "product-unavailable" | "profile-filled" | "profile" | "question-circle-filled" | "question-circle" | "receipt-dollar" | "receipt-euro" | "receipt-folded" | "receipt-paid" | "receipt-pound" | "receipt-refund" | "receipt-rupee" | "receipt-yen" | "receipt" | "receivables" | "redo" | "referral-code" | "refresh" | "remove-background" | "reorder" | "replay" | "reset" | "return" | "reward" | "rocket" | "rotate-left" | "rotate-right" | "sandbox" | "save" | "savings" | "search-add" | "search-list" | "search-recent" | "search-resource" | "send" | "settings" | "share" | "shield-check-mark" | "shield-none" | "shield-pending" | "shield-person" | "shipping-label" | "shopcodes" | "slideshow" | "smiley-happy" | "smiley-joy" | "smiley-neutral" | "smiley-sad" | "social-ad" | "social-post" | "sort-ascending" | "sort-descending" | "sort" | "sound" | "sports" | "star-filled" | "star-half" | "star-list" | "star" | "status-active" | "status" | "stop-circle" | "store-import" | "store-managed" | "store-online" | "store" | "sun" | "table-masonry" | "table" | "tablet" | "target" | "tax" | "team" | "text-align-center" | "text-align-left" | "text-align-right" | "text-block" | "text-bold" | "text-color" | "text-font-list" | "text-font" | "text-grammar" | "text-in-columns" | "text-in-rows" | "text-indent-remove" | "text-indent" | "text-italic" | "text-quote" | "text-title" | "text-underline" | "text-with-image" | "text" | "theme-edit" | "theme-store" | "theme-template" | "theme" | "three-d-environment" | "thumbs-down" | "thumbs-up" | "tip-jar" | "toggle-off" | "toggle-on" | "transaction-fee-dollar" | "transaction-fee-euro" | "transaction-fee-pound" | "transaction-fee-rupee" | "transaction-fee-yen" | "transaction" | "transfer-in" | "transfer-internal" | "transfer-out" | "transfer" | "truck" | "undo" | "unknown-device" | "unlock" | "upload" | "view" | "viewport-narrow" | "viewport-short" | "viewport-tall" | "viewport-wide" | "wallet" | "wand" | "watch" | "wifi" | "work-list" | "work" | "wrench" | "x-circle-filled" | "x-circle" | "x"

declare class Icon extends PreactCustomElement implements IconProps {
  accessor color: IconProps['color'];
  accessor tone: IconProps['tone'];
  accessor type: IconProps['type'];
  accessor size: IconProps['size'];
  accessor interestFor: string;
  constructor();
}

ClickOptions

sourceEvent
The event you want to influence the synthetic click.
```
ActivationEventEsque
```

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

button
```
number
```
ctrlKey
```
boolean
```
metaKey
```
boolean
```
shiftKey
```
boolean
```

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

Was this section helpful?

Code

<s-icon type="home"></s-icon>

<s-icon type="order"></s-icon>

<s-icon type="product"></s-icon>

<s-icon type="settings"></s-icon>

examples

Code

<s-icon type="home"></s-icon>
<s-icon type="order"></s-icon>
<s-icon type="product"></s-icon>
<s-icon type="settings"></s-icon>

<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><s-icon type="home"></s-icon>
<s-icon type="order"></s-icon>
<s-icon type="product"></s-icon>
<s-icon type="settings"></s-icon>
</body></html>

Icon

Anchor to propertiesProperties

Icon

ClickOptions

ActivationEventEsque

examples

Code

Preview