Icon

Standalone decorative or semantic icon. Renders as <span> with inline SVG (react-icons) or media-library image inside. Use this for icons in feature lists, card heroes, inline flourishes, and any icon that is NOT inside a clickable Button/Link. For a clickable icon, use Button with icon.only: true. For an icon next to text in a link/button, use the Button or Link `icon` prop — do NOT add a separate Icon component alongside.

Required Props: id, value

Structure

Single-element component. Box size goes in props.className (there is NO top-level `size` prop — that is the nested Button/Link `icon` prop only). Colour has its own `color` prop. No children. Decorative by default (aria-hidden); pass aria-label to make it semantically meaningful.

Properties

Property	Type	Description	Examples
`value`*required	string	Icon reference. Two forms: `ref-icon:<set>/<ExportName>` for react-icons (prefer `tb/*`, e.g. `ref-icon:tb/TbBolt`) or `ref-image:<mediaId>` for a custom uploaded SVG from the media library. These are the ONLY two formats the SDK resolver (`useResolvedIcon` in `packages/sdk/src/utils/icons/iconResolver.tsx`) handles — anything else returns null and renders nothing.	`ref-icon:tb/TbStar`
`color`	string	Tailwind text color class (e.g. `text-primary`, `text-base-content/70`). Icons use currentColor, so any text color class works. When omitted, the icon inherits from its parent.	`text-primary`
`className`	string	Tailwind utilities for the wrapper span — this is where the icon's BOX SIZE lives. The SVG fills the wrapper at 100%, so with no `w-`/`h-`/`size-` class the icon falls back to 1em (≈16px), which is almost never what you want. Use `w-4 h-4` for inline accents, `w-6 h-6` for default, `w-8 h-8`–`w-12 h-12` for feature tiles / hero badges. Also takes animation, drop-shadow, and rounded-background utilities.	`w-6 h-6w-12 h-12 drop-shadow-mdw-6 h-6 rounded-full bg-primary/10 p-2`
`aria-label`	string	Accessible name. When provided, the icon becomes role="img" with the given label (use for icons that convey information on their own). When omitted, the icon is decorative and receives aria-hidden="true" — the correct WCAG default when the surrounding text already describes the meaning.	-
`aria-hidden`	string	-	-
`role`	string	-	-
`canDelete`	boolean	- Default: `true`	-
`canEditName`	boolean	- Default: `true`	-
`custom`	object	Editor metadata (displayName, ...)	-
`root`	object	-	-

Examples

Feature Tile Icon

Large themed icon for a feature grid tile

{
  "canDelete": true,
  "canEditName": true,
  "value": "ref-icon:tb/TbBolt",
  "className": "w-12 h-12",
  "color": "text-primary"
}

Inline Accent Icon

Small icon used inline as a visual accent next to text

{
  "canDelete": true,
  "canEditName": true,
  "value": "ref-icon:tb/TbCheck",
  "className": "w-4 h-4",
  "color": "text-success"
}

Icon with Pill Background

Decorative icon wrapped in a tinted rounded background — common in feature cards

{
  "canDelete": true,
  "canEditName": true,
  "value": "ref-icon:tb/TbRocket",
  "color": "text-primary",
  "className": "w-6 h-6 bg-primary/10 rounded-full p-3"
}

Semantic Status Icon

Icon conveying meaning on its own — requires aria-label so it's exposed to assistive tech

{
  "canDelete": true,
  "canEditName": true,
  "value": "ref-icon:tb/TbAlertTriangle",
  "className": "w-5 h-5",
  "color": "text-warning",
  "aria-label": "Warning"
}