Icon

Preview

<Icon name="ph:rocket-launch" class="w-6 h-6" />
<Icon name="ph:github-logo" class="w-6 h-6" />
<Icon name="ph:book-open" class="w-6 h-6" />

Examples

Sizing

Use size for equal width and height, or width/height individually. Tailwind utility classes on the element also work.

<Icon name="ph:star" size={16} />
<Icon name="ph:star" size={24} />
<Icon name="ph:star" size={32} />

Accessibility

Pass title and desc to add <title> and <desc> elements inside the SVG for screen readers.

<Icon name="ph:warning" title="Warning" desc="This action cannot be undone" class="w-6 h-6" />

With Tailwind classes

Any class on the <svg> element works — color, size, transitions, etc.

<Icon name="ph:heart" class="w-8 h-8 text-red-500 hover:scale-110 transition-transform" />

Iconify sets

Install any @iconify-json/* package and reference icons with its prefix. The icon system auto-detects installed packages.

npm install @iconify-json/ph         # Phosphor — ph:*
npm install @iconify-json/mdi        # Material Design Icons — mdi:*
npm install @iconify-json/fa6-solid  # Font Awesome 6 — fa6-solid:*
npm install @iconify-json/heroicons  # Heroicons — heroicons:*

<Icon name="ph:rocket-launch" class="w-6 h-6" />
<Icon name="ph:github-logo" class="w-6 h-6" />
<Icon name="ph:warning" class="w-6 h-6" />
<Icon name="ph:check-circle" class="w-6 h-6" />

Local SVGs

Place SVG files in src/icons/ and reference them by filename (no prefix, no extension).

src/icons/logo.svg
src/icons/product/workers.svg

<Icon name="logo" class="w-6 h-6" />
<Icon name="product/workers" class="w-6 h-6" />

Monochrome SVGs are automatically normalized to currentColor so they inherit text color via CSS.