Question 1

What is Heroicons?

Accepted Answer

Heroicons is a free icon set created by the makers of Tailwind CSS. High-quality SVG icons designed to work beautifully with Tailwind CSS and modern React projects.

Question 2

How many icons are in Heroicons?

Accepted Answer

Heroicons contains 1,288 free icons in outline, solid, and mini variants. Each icon is available as SVG or downloadable in PNG, ICO, WebP, and JPEG formats.

Question 3

How do I use Heroicons in React or Next.js?

Accepted Answer

Copy the SVG code directly from this page - no @heroicons/react package needed. The SVG embeds inline in your component. Works great with Tailwind CSS classes for styling.

Question 4

What's the difference between outline, solid, and mini?

Accepted Answer

Outline (24x24, 1.5px stroke) for navigation and marketing. Solid (24x24 filled) for buttons and form elements. Mini (20x20) for compact UI. Use our filters to switch between variants.

Question 5

Do I need to install @heroicons/react?

Accepted Answer

No! Unlike the official package, here you copy SVG code directly. Zero dependencies, smaller bundle, works with React, Vue, Svelte, Angular, or plain HTML with Tailwind.

Question 6

What download formats are available?

Accepted Answer

Download Heroicons in SVG (vector), PNG (transparent), ICO (favicon), WebP, JPEG, and data URL formats. Customize size and color before downloading.

Question 7

Can I use these icons in Figma?

Accepted Answer

Yes! Download as SVG or copy the code directly into Figma, Sketch, or Adobe XD. Perfect for Tailwind CSS design systems.

Question 8

Is Heroicons free for commercial use?

Accepted Answer

Yes! Heroicons uses the MIT License, allowing unlimited free use in personal and commercial projects. No attribution required. Note: Licensing varies by icon library.

Question 9

Who created Heroicons?

Accepted Answer

Heroicons was created by Steve Schoger and Adam Wathan, the team behind Tailwind CSS. It follows Tailwind's utility-first design philosophy.

HeroIcons for React

HeroIcons FAQ