All docs

Icon

Standalone icon. Renders as <span with an inline SVG (react-icons) or media-library image inside. Decorative by default (aria-hidden); pass aria-label to give it a semantic name.

Standalone icon. Renders as <span> with an inline SVG (react-icons) or media-library image inside. Decorative by default (aria-hidden); pass aria-label to give it a semantic name.

Key files

Props

PropNotes
valueRequired. Two formats only: ref-icon:<set>/<ExportName> (e.g. ref-icon:tb/TbBolt) or ref-image:<mediaId> for an SVG from the media library. Anything else returns null and renders nothing.
sizeTailwind w-X h-X pair. Default w-6 h-6. Feature tiles / hero badges: w-8 h-8–w-12 h-12.
colorTailwind text color (text-primary, text-base-content/70). Icon SVGs use currentColor.
aria-label, aria-hiddenAccessibility.
className, rootStandard.

When to use (vs alternatives)

  • Icon — feature-list bullets, card hero icons, inline flourishes — anything NOT inside a clickable element.
  • Button.icon / Link.icon — when an icon sits next to text inside a CTA or hyperlink. Keeps the pair atomic (shared accessible name, layout).
  • Clickable icon-only button: Button with icon.only: true, not a wrapped Icon.

Gotchas

  • Tabler (tb) is preferred for UI icons (nav, checks, generic glyphs) but is NOT a complete brand registry. Yelp, Airbnb, TikTok have no TbBrand* entry and render empty silently. Use fa, fa6, bi, bs, im, si, or lia for brand logos. Always grep packages/sdk/src/data/icon-svgs/tb.json before assuming a brand exists.
  • ref-google:* is a DEAD format. Older docs reference it but no resolver exists. Treat it as a bug to migrate (scripts/migrate-ref-google-to-ref-icon.mjs).
  • Icon at default w-5/w-6 looks small in feature tiles — bump to w-7–w-10 for visual weight.

Related