SIcon <s-icon>

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

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" | "status" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" … (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).