Components

Icon

Render lucide icons by name, or pass names to other components.

Use Icon for inline icons, or pass the same names to any component that accepts an icon prop (Card, Callout, Accordion, and more).

Names are case-insensitive and accept circle-check, circle_check, or CircleCheck. They are collected from content and docs.json at build time into src/lib/icon-registry.generated.ts. An unrecognized name renders nothing and logs a warning in development.

Basic usage#

Deploy your site in one command.

Deploy your site <Icon icon="rocket" /> in one command.

Sizing and color#

<Icon icon="circle-check" size={24} color="#16a34a" />

On other components#

Installation

Create a standalone Shiso site.

<Card title="Installation" icon="rocket" href="/docs/installation">
  Create a standalone Shiso site.
</Card>

Properties#

Name	Type	Description
icon	string	A lucide icon name.
src	string	Image path or URL. Used instead of `icon` when set.
color	string	CSS color for the icon stroke/fill.
size	number	Icon size in pixels. Default: 16
className	string	Extra class names on the rendered element.

Last updated on Aug 8, 2026

Frame Param field