Icon

A wrapper for lucide-react icons with consistent sizes and accessible defaults.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add icon

What add icon installs alongside the component. The CLI skips any you already have in a compatible version.

3 examples · 1 component

From xs to xl; the icon inherits the text color.

Use label when the icon communicates on its own.

Icon-only button; the accessible name lives on the button and the icon is decorative.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`icon` Icon component to render; accepts lucide-react or any SVG.	`ComponentType<SVGProps<SVGSVGElement>>`	—
`size` Icon size, from 12 to 32 px.	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"sm"`
`label` Accessible name; without a label the icon is decorative (aria-hidden).	`string`	—
`className` Color and additional adjustments through utilities.	`string`	—

Without a label the icon is marked aria-hidden; use this when adjacent text already conveys the meaning.

With a label it exposes role="img" and aria-label, for icons with their own meaning, such as in icon-only buttons.