SIcon <s-icon>

Displays an icon from the Polaris icon set by name. SIcon is the typed Vue 3 wrapper for Shopify's Polaris <s-icon> web component.

import { SIcon } from 'polaris-vue-elements'

Best practices

• Use icons to inform, not decorate. An icon should explain what an action does or show a state, like a delete icon on a delete action or a check for something completed. Don't add icons just for looks.
• Be consistent. Once an icon stands for an action or concept, keep it that way across your whole app. If edit means editing in one place, use it for editing in every place.
• Pair icons with text when you can. On their own, even familiar icons can be read in more than one way. Use an icon alone only where space is tight, such as an icon-only button with an accessibilityLabel.
• Pick widely recognized icons. Favor icons with settled meanings, like search, delete and plus. If an icon needs explaining, choose a different one.
• Let tone carry meaning. Use tone="critical" for destructive actions, tone="success" for positive states and tone="warning" for caution. Tones should communicate something, not decorate.

<SIcon type="alert-triangle" tone="warning" />

See Shopify's best practices for <s-icon> for the full guidance.

Example

<script setup>
import { SIcon } from 'polaris-vue-elements'
</script>

<template>
  <!-- `type` accepts a large named-icon union; a few examples below. See
       src/lib/generated/types.ts for the full list. -->
  <SIcon type="star" />
  <SIcon type="cart" tone="info" />
  <SIcon type="check-circle" tone="success" />
  <SIcon type="alert-triangle" tone="warning" />
  <SIcon type="delete" tone="critical" />
  <SIcon type="settings" size="small" color="subdued" />
</template>

Props

Prop	Type	Description
color	"subdued" | "base"	The color emphasis level that controls visual intensity. - base: Primary color for body text, standard UI elements, and general content with good readability. - subdued: Deemphasized color for secondary text, supporting labels, and less critical interface elements.
interestFor	string	ID of a component that should respond to interest (e.g. hover and focus) on this component.
size	"base" | "small"	The size of the icon. - small: Smaller icon suitable for inline use within text or compact UI elements. - base: Default size that works well for standalone icons and standard use cases.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	The semantic meaning and color treatment of the component. - info: Informational content or helpful tips. - success: Positive outcomes or successful states. - warning: Important warnings about potential issues. - critical: Urgent problems or destructive actions. - auto: Automatically determined based on context. - neutral: General information without specific intent. - caution: Advisory notices that need attention.
type	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	The icon to display from the icon library. Set to a valid icon name to display that icon. To hide the icon completely, use an empty string ''. To reserve the icon's space without displaying an icon, use 'empty'.

Some type columns above are truncated for readability; the full union is available in the library's generated TypeScript types (src/lib/generated/types.ts).