Question 1

What is the shadcn.io Icon Library?

Accepted Answer

shadcn.io provides tens of thousands of free, open-source icons from popular libraries like Lucide, Material Icons, Font Awesome, Heroicons, and more. Every icon is available under permissive licenses (MIT, Apache 2.0, ISC) for use in personal and commercial React, Next.js, and Tailwind CSS projects. Browse, customize, and add icons to your project instantly.

Question 2

How do I find the right icon?

Accepted Answer

Browse icon libraries on this page or use the search feature on any library page to find icons by name or keyword. Each library card shows sample icons and the total count. Click any library to explore its full collection with instant search and filtering.

Question 3

Are these icons free for commercial use?

Accepted Answer

Yes! All icons come from open-source libraries with permissive licenses. MIT and Apache 2.0 licenses allow free use in commercial projects without attribution requirements. Check each library card for specific license details—we only include icons you can use freely.

Question 4

Which icon libraries are included?

Accepted Answer

We include all major icon libraries: Lucide (the default for shadcn/ui), Material Symbols, Font Awesome, Heroicons, Phosphor, Tabler, Feather, Bootstrap Icons, Remix Icons, and many more. Each library is optimized for React with TypeScript support and consistent APIs.

Question 5

How do I add icons using the shadcn CLI?

Accepted Answer

Click any icon to view its detail page, then copy the CLI command shown. Run the command in your terminal—it automatically adds a fully typed React component to your project's components folder, ready to import and use.

Question 6

What are the benefits of using the CLI vs downloading?

Accepted Answer

The shadcn CLI installs icons as React components with full TypeScript support, customizable props (size, color, strokeWidth), and tree-shaking optimization. Downloaded files are static assets. Use CLI for React/Next.js projects; download for design tools, documentation, or non-React frameworks.

Question 7

Do CLI-installed icons work with AI coding assistants?

Accepted Answer

Yes! Icons installed via the shadcn CLI are regular React components in your codebase. AI assistants like Cursor, GitHub Copilot, and Claude can read, understand, and modify them. This is part of shadcn.io's AI-native approach—your components are always accessible to AI tools.

Question 8

Which package managers are supported?

Accepted Answer

The shadcn CLI works with npm, yarn, pnpm, and bun. Each icon detail page shows the correct command for your preferred package manager. The CLI auto-detects your project's package manager from the lock file.

Question 9

Can I customize icons before downloading?

Accepted Answer

Yes! Click any icon to access the customization panel. Adjust color, size, stroke width, rotation, opacity, padding, flip direction, and background. See changes in real-time. Your customizations apply to downloads, copied code, and CLI installations.

Question 10

What download formats are available?

Accepted Answer

Download icons in SVG (recommended for web—scalable and tiny file size), PNG (transparent background, any resolution), WebP (modern format, smaller files), JPEG (with background color), or ICO (for favicons). All formats include your customizations.

Question 11

Can I use icons in Vue, Svelte, or other frameworks?

Accepted Answer

Yes! Each icon detail page has copy buttons for React, Vue, Svelte, Angular, Solid, and Preact. Copy ready-to-use component code with your customizations applied. You can also copy raw SVG or data URLs for any platform.

Question 12

How do I use icons in CSS or plain HTML?

Accepted Answer

Use the "Copy Data URL" button to get a base64-encoded URL for CSS backgrounds or inline images. Or download as SVG and embed directly in HTML. For CSS, use the data URL in background-image properties.

Question 13

Do I need to credit the icon authors?

Accepted Answer

Most icons use MIT or Apache 2.0 licenses which don't require visible attribution—just keep the license file if you redistribute the source. Some developers appreciate a mention or GitHub star, but it's not required. Check each library's license badge for specifics.

Question 14

Can I modify the icons?

Accepted Answer

Absolutely! All included icons use open-source licenses that permit modification. Customize colors, sizes, and styles using our built-in editor, or modify the SVG/component code directly in your project. No restrictions on derivative works.

Question 15

Are there any usage restrictions?

Accepted Answer

No meaningful restrictions for typical use. MIT and Apache licenses allow commercial use, modification, and redistribution. You cannot claim the original icons as your own work or remove license notices from source files, but normal usage in websites, apps, and products is fully permitted.

React Icon Libraries for shadcn/ui.

Icon Libraries

Lucide

HeroIcons

Material Symbols

Tabler Icons

Radix Icons

Font Awesome 6 Solid

Feather Icons

Simple Icons

Icon Tags

Every React icon. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Icon Library FAQ