Icons

Inline icons from the Publier icon registry — a curated Lucide subset, theme-aware by default, safe on unknown names.

<Icon> renders a named icon inline, pulled from the Publier icon registry (a curated Lucide subset). Use it in prose, card titles, callouts, and anywhere a small visual cue helps orient the reader.

Quick example

import { Icon } from '@publier/shell/components';

Ship fast with <Icon name="Zap" /> Publier.

Renders: Ship fast with Publier.

Sizing

<Icon name="ArrowRight" size={14} />
<Icon name="ArrowRight" size={20} />
<Icon name="ArrowRight" size={32} />

Sizes:

Custom class

Pass a class to integrate the icon with your layout — handy for spacing, color overrides, or alignment tweaks:

<Icon name="Check" class="publier-icon-success" />

Props

Prop	Type	Default	Description
`name`	`string`	—	Icon name from the Publier registry. Case-sensitive.
`size`	`number`	`16`	Icon size in pixels (applied as both `width` and `height`).
`class`	`string`	—	Extra CSS classes on the wrapper span.

Available icons

The registry ships a Lucide-based subset curated for docs use cases. Typos render nothing (silent no-op), so a minor name mismatch never breaks a page:

Book Webhook Sparkles Palette Play Files Puzzle MessageCircle History FileText Code Globe Shield Layers Zap Settings Users Tag Search Mail Info ArrowRight Plus Check Star Send Rss ExternalLink Copy Eye EyeOff BarChart AlertTriangle Menu X ChevronUp ChevronDown ChevronRight ChevronLeft ArrowUpRight

Adding icons

If you need an icon outside the registry, drop an inline <svg> in your MDX directly — <Icon> is a convenience for the curated set. See CopyButton for an example of an icon used inside a reusable UI component.

Need a whole icon-first navigation grid? → Tiles.
Need icon-led cards for landing pages? → Card & CardGrid.