Icon

@shopify/shop-minis-platform-sdk / components/Icon

IconProps\<IconName>

Type Parameters

Type Parameter
IconName extends Icons

Properties

autoAlignment?

optional autoAlignment: boolean

Optionally align the icon in a more visually appealing way. This helps with icons that are not weighted evenly such as heart or play.

You may wish to disable this if you have multiple icons close to each other and the alignment looks wrong.

Example

<Icon {...} autoAlignment />

color?

optional color: "primary-button-background" | "foregrounds-contrasting" | "unbranded-button-background" | "unbranded-button-foreground" | "tertiary-button-background" | "tertiary-button-foreground" | "blurred-button-background-a30" | "transparent" | "foregrounds-regular" | "foregrounds-primary" | "backgrounds-regular" | "outlined-button-border" | "highlights-dangerous" | "multiplier-badge-background" | "multiplier-badge-foreground" | "shop-cash-dark-button-background" | "subdued-button-background" | "subdued-button-foreground" | "shadows-soft" | "backgrounds-regular-fully-transparent" | "backgrounds-subdued" | "backgrounds-overlay" | "backgrounds-placeholder" | "backgrounds-dangerous" | "backgrounds-dangerous-subdued" | "backgrounds-success" | "backgrounds-success-subdued" | "backgrounds-primary" | "backgrounds-brand-primary" | "backgrounds-brand-secondary" | "backgrounds-sash-primary" | "backgrounds-shop-cash-secondary" | "foregrounds-secondary" | "foregrounds-subdued" | "foregrounds-placeholder" | "foregrounds-shop-cash-secondary" | "foregrounds-contrasting-inverted" | "highlights-primary" | "highlights-discounted" | "highlights-success" | "highlights-success-subdued" | "dividers-regular" | "dividers-section" | "borders-regular" | "primary-button-background-hover" | "secondary-button-background-hover" | "tertiary-button-background-hover" | "tertiary-button-disabled-outline" | "backgrounds-regular-hover" | "button-disabled-background" | "button-disabled-foreground" | "toasts-background" | "toasts-secondary" | "toasts-foreground" | "inputs-background" | "inputs-background-disabled" | "inputs-border" | "inputs-border-color" | "inputs-clear-button" | "inputs-placeholder-text" | "search-input-background" | "popover-background" | "shop-cash-offer-card-button-foreground" | "shop-cash-offer-card-button-background" | "add-a-card-icon" | "backgrounds-announcement-card" | "notification-highlight-background" | "progress-bar-completed" | "confetti-1" | "main-nav-tab-active" | "main-nav-tab-inactive" | "main-nav-tab-active-foreground" | "inactive-button-background" | "inactive-button-foreground" | "carbon-impact-asset-instagram-story-background" | "carousel-control-active" | "carousel-control-inactive" | "product-image-placeholder" | "product-image-background" | "product-image-overlay" | "checkbox-checked" | "checkbox-unchecked-border" | "checkbox-checkmark" | "backgrounds-floating-tab" | "status-icon-dimmed" | "cart-indicator" | "background-aos-webview-disclaimer-banner" | "border-loading-order-info" | "bg-loading-order-info" | "featured-merchant-image-text" | "rating-stars-background" | "rating-stars-fill" | "rating-stars-void" | "new-rating-stars-background" | "no-image-found-background" | "background-chip-1" | "background-chip-7" | "foreground-chip" | "action-label-background" | "action-label-foreground" | "curation-curator-foreground" | "dashed-border" | "badge-background-discounted" | "badge-text-light" | "cash-badge-text" | "discount-badge-text" | "discount-badge-background" | "banner-important-background" | "banner-important-foreground" | "foregrounds-discount" | "brand-badge-background" | "community-product-badge-text" | "splash-shopify-logo" | "carbon-neutral-title" | "backgrounds-message-bubble-merchant" | "logo-placeholder-background" | "price-slider-background" | "price-slider-selected-background" | "mini-viewer-shopping-bag-badge" | "mini-frame-legal-notice-text" | "category-tile-text" | "reviews-search-highlights-background" | "banner-primary-text-color" | "banner-primary-close-color" | "sheet-background" | "sheet-close-button" | "highlight" | "highlight-inverted" | "image-tint" | "image-tint-light" | "image-border" | "carbon-offset-gradient-to" | "google-logo" | "blurred-button-background-a40" | "blurred-button-background-a00" | "auto-import-hero-text" | "notification-highlight-bar" | "email-forwarding-box" | "email-forwarding-list-numbers" | "opaque-white" | "opaque-black" | "unverified-confirm-product-background" | "smart-onboarding-product-box-shadow" | "smart-onboarding-product-box-background" | "smart-onboarding-icon-background" | "tracking-info-globe-image-background" | "tracking-info-white-text" | "tracking-item-pill-background" | "tracking-item-pill-text" | "tracking-card-blurred-background" | "backgrounds-banner-prompt-primary" | "blurred-recommendation-background-android" | "blurred-recommendation-background-ios" | "shop-cash-claiming-flow-default-background" | "shop-cash-claiming-flow-transparent-dark" | "shop-cash-claiming-flow-transparent-light" | "sponsored-badge-background" | "tracker-map-fallback-background" | "drops-info-registered-background" | "drops-info-registered-border" | "drops-info-registered-text-button" | "drops-countdown-badge-green" | "drops-countdown-badge-gray" | "fixed-dark" | "fixed-light" | "fixed-dark-transparent" | "text-fixed-dark" | "bg-fill-fixed-light" | "text-fixed-light" | "bg-fill-critical" | "bg-fill-caution" | "text-caution" | "text-brand" | "text-tertiary" | "text-shadow-30" | "bg-fill-secondary"

Optional. Colour (of the Theme) to render the Icon with.

Default

'foregrounds-regular'

Example

<Icon {...} color="foregrounds-regular" />

name

name: IconName

Icon to display.

Example

<Icon {...} name="checkmark" />

size?

optional size: "s" | "m" | "l" | "xxs" | "xs" | "xl" | "xxl"

Size of Icon.

Example

<Icon {...} size="xl" />

style?

optional style: PropsForIcons[IconName]["style"] & TextStyle

Optional style prop. Provided as an escape hatch from the Theme.

Example

<Icon {...} style={{paddingHorizontal: 5}} />

---

Icon()

Icon\<IconName>(__namedParameters): Element

Component to render one of the built-in icons from the Minis SDK.

Type Parameters

Type Parameter

IconName extends "share" | "reverse" | "sort" | "filter" | "phone" | "search" | "link" | "sub" | "note" | "account" | "add" | "anonymous-user" | "ar-error-badge" | "ar-expand" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "back" | "bell" | "bin" | "bold-chevron-right" | "calendar" | "camera-flash" | "camera" | "chat" | "check-circle" | "check-filled" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock" | "close-filled" | "close-outlined" | "close" | "cloud" | "copy" | "credit-card" | "currency" | "cvv" | "delete" | "face" | "favorites-heart" | "forward" | "gift" | "globe" | "hamburger-menu" | "heart" | "help-filled" | "help" | "information-filled" | "information" | "launch" | "licenses" | "location-arrow" | "lock" | "mail" | "minus" | "more" | "network" | "no-image" | "notifications" | "pause" | "pencil" | "photo" | "play" | "privacy-shield" | "profile-circle-solid" | "profile-circle" | "refresh" | "right-chevron" | "settings" | "share-ios" | "sign-in-key" | "silent" | "sparkle-single" | "star-filled" | "star" | "storefront" | "tag-filled" | "tag" | "terms" | "thumbs-down" | "thumbs-up" | "up-down" | "video-camera" | "volume-full" | "volume-off" | "warn-filled" | "warn" | "website" | "wishlist"

Parameters

Parameter	Type
__namedParameters	IconProps\<IconName>

Returns

Element