Back to Schema Browser

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. All styling on props.className plus dedicated size/color props. No children. Decorative by default (aria-hidden); pass aria-label to make it semantically meaningful.

Properties

PropertyTypeDescriptionExamples
value*requiredstring
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.
ref-icon:tb/TbStar
sizestring
Tailwind w/h class pair controlling the icon box size. SVG fills the wrapper at 100%. 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.
Default: "w-6 h-6"
w-8 h-8
colorstring
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
classNamestring
Additional Tailwind utilities beyond size/color (e.g. animation, drop-shadow, rounded background). Defaults handle the size/color/flex-centering wrapper.
drop-shadow-mdrounded-full bg-primary/10 p-2animate-pulse
aria-labelstring
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-hiddenstring
-
-
rolestring
-
-
canDeleteboolean
-
Default: true
-
canEditNameboolean
-
Default: true
-
customobject
Editor metadata (displayName, ...)
-
rootobject
-
-

Examples

Feature Tile Icon

Large themed icon for a feature grid tile

{
  "canDelete": true,
  "canEditName": true,
  "value": "ref-icon:tb/TbBolt",
  "size": "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",
  "size": "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",
  "size": "w-6 h-6",
  "color": "text-primary",
  "className": "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",
  "size": "w-5 h-5",
  "color": "text-warning",
  "aria-label": "Warning"
}