Question 1

How do I use React icons with shadcn/ui?

Accepted Answer

For React/Next.js projects, use our shadcn CLI integration. Click any icon to view its detail page, then copy the CLI install command for your package manager (npm, yarn, pnpm, or bun). The CLI automatically adds the icon component to your project.

Question 2

How do I use Vue icons in my project?

Accepted Answer

Click any icon to view its detail page, then use the Copy Vue button to get ready-to-use Vue component code. Paste the code directly into your Vue project. You can customize the icon before copying using the color, size, and style controls.

Question 3

What download formats are available?

Accepted Answer

You can download icons in SVG, PNG, WebP, JPEG, and ICO formats. Click any icon, customize it with your preferred color and size, then download in your chosen format. SVG is recommended for web projects as it's scalable and lightweight.

Question 4

Can I customize icons before downloading?

Accepted Answer

Yes! Click any icon to access the customization panel where you can adjust color, size, stroke width, rotation, opacity, shadow, padding, and flip direction. You can also change the background color. All customizations are applied to your download or copied code.

Question 5

Are Svelte icons supported?

Accepted Answer

Yes! Click any icon and use the Copy Svelte button to get ready-to-use Svelte component code. The code includes all your customizations and is ready to paste into your Svelte application.

Question 6

What other frameworks can I copy component code for?

Accepted Answer

Besides React, Vue, and Svelte, you can copy component code for Angular, Solid, and Preact. Each icon detail page has dedicated copy buttons for all frameworks, plus options to copy raw SVG code or data URLs.

Question 7

Are these icons free to use?

Accepted Answer

Yes! All icons come from open-source libraries with permissive licenses (MIT, Apache 2.0, ISC). Check each library card for specific license details. You can use them freely in personal and commercial projects.

Question 8

Can I use icons in CSS or HTML without a framework?

Accepted Answer

Yes! Use the Copy Data URL button to get a base64-encoded data URL that works in CSS backgrounds, HTML img tags, or anywhere else. You can also download as SVG and use it directly in your HTML.

Question 9

Do I need to credit the icon authors?

Accepted Answer

It depends on the library. Most use MIT or Apache licenses that don't require attribution, but it's always appreciated. Check the license information shown on each library card for specific requirements.

Question 10

What's the difference between downloading and using CLI?

Accepted Answer

Downloading gives you static image files (SVG, PNG, etc.) to use anywhere. The shadcn CLI (for React/Next.js only) installs icons as customizable React components with TypeScript support and props for easy styling.

React Icons for shadcn/ui

Frequently Asked Questions