About Heroicons
Overview
Heroicons is a free, open-source SVG icon set created by the makers of Tailwind CSS. It ships 316 hand-crafted icons across four distinct style variants — Outline, Solid, Mini, and Micro — giving designers and developers precise visual control.
Unlike generic icon packs, Heroicons is built to complement Tailwind CSS projects. It includes official React and Vue component libraries, a Figma file for design workflows, and is released under the MIT license for unrestricted use.
Key Benefits
- 316 icons available across four style variants: Outline (24x24, 1.5px stroke), Solid, Mini, and Micro.
- Official React and Vue libraries let developers embed icons directly into components without extra setup.
- MIT license allows free use in personal and commercial projects without attribution requirements.
- A dedicated Figma file is available so designers can use the icons natively in their design tools.
- Made by the Tailwind CSS team, ensuring visual consistency with Tailwind-based design systems.
How It Works
You browse icons on the Heroicons website and select the style variant you need — Outline, Solid, Mini, or Micro. You copy the SVG markup or install the React or Vue library, then drop the icon component directly into your codebase. The Figma file is available for design-side workflows.
Use Cases
- Front-end developers building Tailwind CSS interfaces who need consistent, copy-ready SVG icons.
- React developers integrating named icon components into UI component libraries.
- Vue developers who want a first-party icon library that works natively in Vue templates.
- Product designers working in Figma who need a complete icon set that matches their engineering team's icon usage.
- Open-source project maintainers who need MIT-licensed assets with no legal restrictions.
Why Choose This Product
Heroicons is best suited for developers and designers working within the Tailwind CSS ecosystem who want a zero-cost, MIT-licensed icon set with official framework libraries. The set is capped at 316 icons, so teams needing a broader catalog may need to supplement it with additional sources.
HeroiconsPros & Cons
Strengths
- 316 hand-crafted SVG icons across 4 style variants
- MIT license — free for personal and commercial use
- Official React and Vue component libraries included
- Figma file available for design workflows
- Made by the Tailwind CSS team for visual consistency
Limitations
- Library capped at 316 icons — smaller catalog than some alternatives
Key Features
🎨
4 Icon Styles
Icons are available in four distinct styles: Outline (24x24, 1.5px stroke), Solid, Mini, and Micro.
⚛️
React Library
An official React component library ships with Heroicons for direct import into React projects.
💚
Vue Library
An official Vue component library is included, enabling native icon usage in Vue templates.
🖼️
Figma File
A dedicated Figma file is provided so designers can use the full icon set in their design workflows.
📄
MIT License
All 316 icons are released under the MIT license, allowing free use in personal and commercial projects.
🔢
316 Icons
The library contains 316 hand-crafted SVG icons covering a wide range of common UI use cases.
Heroicons Pricing
Free
Free
Pricing extracted from the product website and may change. Check the source for current details.
Frequently asked questions about Heroicons
How many icons does Heroicons include?
Heroicons v2.1.5 includes 316 hand-crafted SVG icons available in four style variants: Outline, Solid, Mini, and Micro.
Is Heroicons free to use in commercial projects?
Yes. Heroicons is released under the MIT license, which permits free use in both personal and commercial projects.
Does Heroicons support React and Vue?
Yes. Heroicons ships with official React and Vue component libraries so developers can import icons directly into their projects.
Is there a Figma file available for Heroicons?
Yes. A dedicated Figma file is available for download, allowing designers to use the full Heroicons icon set natively within their Figma workflows.
Is Heroicons free?
Yes — Heroicons is free to use. See the pricing section for any optional add-ons.
What platforms does Heroicons support?
Heroicons is available on: Web.
How Heroicons compares
HeroiconsThis | ||||
|---|---|---|---|---|
| Starting price | Free | — | — | Free |
| Pricing model | Free | Freemium | unknown | Free |
| Platforms | Web | Web | Web | Web |
| Top features |
|
|
|
|
| Rating | — | — | — | — |
