Add SVG Icons to shadcn/ui — One Command Install

Add production-ready SVG icon components to your shadcn/ui project in seconds. No Iconify setup, no extra dependencies—just copy, run, and use.

Quick Install (3 Clicks)

Select your package manager, pick an icon below, and run the command in your terminal:

That’s it. The icon component lands in your project ready to use:

import Plus from "@/assets/icons/lucide/plus.svg"

// Use it like any component
<Plus className="w-4 h-4" />

Tip

Works with pnpm, npm, yarn, and bun. Your preference is saved for next time.

Add Icons from Other Packs

The same command works for any icon pack. Just swap the pack name and icon:

Icon Pack	Install Command Format
Lucide	`pnpm dlx shadcn@latest add https://i.allsvgicons.com/r/lucide:{icon}.json`
Heroicons	`pnpm dlx shadcn@latest add https://i.allsvgicons.com/r/heroicons:{icon}.json`
Phosphor	`pnpm dlx shadcn@latest add https://i.allsvgicons.com/r/phosphor:{icon}.json`
Tabler	`pnpm dlx shadcn@latest add https://i.allsvgicons.com/r/tabler:{icon}.json`

Info

Browse all available icon packs at allsvgicons.com

Why Direct Install?

No extra package — skip installing Iconify as a dependency
Smaller bundle — only your installed icons ship with the app
Full ownership — icon components live in your codebase
Better DX — TypeScript autocomplete works out of the box

This works because AllSVGIcons uses open icon data from Iconify—same icons, different install path.

What Happens After Install

Icon added as a React component in your assets/icons folder
No fill or stroke colors baked in—control styling via Tailwind classes or CSS
Works with your existing shadcn/ui component architecture

Advanced: Custom Registry Namespace

For teams wanting more control, configure a custom namespace in components.json:

{
  "registries": {
    "@allsvgicons": {
      "url": "https://i.allsvgicons.com/r/{name}.json",
      "params": { "format": "svg", "layout": "grouped" }
    }
  }
}

Then use shorter commands:

pnpm dlx shadcn@latest add @allsvgicons/lucide:alarm-clock

Tip

Rename @allsvgicons to any namespace that fits your team’s naming conventions.

Registry API Routes

Method	Endpoint	Purpose
GET	`/r/registry.json`	List all available icon collections
GET	`/r/{pack}.json`	Get icons from a specific pack (paginated)
GET	`/r/{pack}:{icon}.json`	Get a single icon as component

Query parameters:

format=svg (default) or format=react
layout=grouped (default) or layout=flat
limit=20 (max, default 20)
offset=0 (pagination offset)

Examples:

/r/registry.json
/r/lucide.json?format=svg&layout=flat
/r/heroicons:check.json?format=react

Coming Soon

Vue, Flutter, Astro, Svelte, and Solid format support
Bulk icon import for entire categories
Icon search integrated into shadcn CLI

Info

Have a feature request or ran into an issue? Let us know.