CleenUI · Icons · Icon

Icon

One component, nine icon libraries, 15,996 icons — swap libraries without rewriting components.

storybook.cleenui.com
Open Storybook
Live preview

Interactive Icon preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About Icon

The Icon component takes a library prefix and a name, then renders the matching SVG inline. All icons inherit the current text color so they style consistently with surrounding type. Size and stroke-width are controllable per instance.

Under the hood, the resolver lazily imports only the icon assets your application actually references — even though the full library exposure is 15,996 icons, your production bundle pays only for what you use. This is the same component that powers buttons, sidebars, status indicators, and inline iconography across the rest of the catalog.

When to use it

  • Buttons with a leading or trailing icon.
  • Inline status indicators in tables and lists.
  • Sidebar and navigation iconography.
  • Decorative emphasis inside cards and callouts.

Common props

Prop
Type
Description
name
string
Icon name, prefixed by library (e.g. "lucide:arrow-right").
size
number | "sm" | "md" | "lg"
Pixel size or named scale.
strokeWidth
number
Stroke width for outline-style icons.
label
string
Accessible label; if absent the icon is treated as decorative.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

1
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.