Icon

Renders either a real icon (icon) or a custom image (src) inline with surrounding text — exactly one of the two is required:

A rocket icon sits inline with this sentence, and so does a bigger, colored one . A custom image works the same way — same inline placement, different source.

A rocket icon <Icon icon="rocket" /> sits inline with this sentence.

<Icon icon="rocket" size={22} color="#dc2626" />

<Icon src="https://unpkg.com/lucide-static@latest/icons/rocket.svg" alt="Rocket" />

Icon props

iconstring

See Icons below. One of icon/src is required.

srcstring

Path or URL to an image. One of icon/src is required.

altstringdefault: ""

Only used with src.

sizenumber

Pixel size, only used with icon. Inherits the surrounding text’s font-size when unset.

colorstring

CSS color, only used with icon. Inherits the surrounding text’s color when unset.

heightstringdefault: "1.6em"

CSS length, only used with src.

Icons

Anywhere a component accepts an icon prop (Card above, and writedocs.json’s tab/dropdown/product fields), the value can be:

A bare name like "star" or "layout-grid" — resolved against the Lucide icon set by default.
A "collection:icon-name" pair, e.g. "mdi:server" or "simple-icons:github" — resolved against whichever Iconify collection is installed.
Anything else (an emoji, a symbol) — rendered as literal text.