WritedocsWritedocs

Icon

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code

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 Rocket — 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 first. If Lucide doesn’t have the name, Font Awesome Solid, then Font Awesome Brands, are tried next — so Font Awesome names like "gear" or "discord" also work. A name none of them have is left out, with a warning in the build and in writedocs validate.
  • A "collection:icon-name" pair, e.g. "mdi:server" or "simple-icons:github" — resolved against whichever Iconify collection is installed.
  • An image URL or path — anything starting with https://, //, /, ./, or ../, e.g. "/images/logo.svg" — rendered as an image the size of an icon.
  • Anything else (an emoji, a symbol) — rendered as literal text.