About Heroicons
Heroicons is a free set of hand-crafted SVG icons made by the team behind Tailwind CSS. It comes in several styles, so you can match the weight of an icon to the rest of your interface.
What it does
The set includes 316 icons in outline, solid, mini and micro styles. Each style suits a different level of visual weight, from light line icons to small solid marks used in dense layouts. Official React and Vue packages make the icons easy to use in component code, and a Figma file lets designers work with the same set.
Key features
- 316 icons in one set
- Outline, solid, mini and micro styles
- React and Vue packages
- Figma file for design work
Who it's for
Heroicons suits developers building sites with Tailwind CSS or other component-based front ends. Designers who want a set that matches the developer version will find it useful too.
Pricing and good to know
Heroicons is open source under the MIT licence and free to use. Since the icons are plain SVG, they run in any page that can show an image or inline SVG. The set is small compared with large icon libraries, so check that it has the glyph you need before you build around it.
Highlights
- 316 icons in outline, solid, mini and micro styles
- Official React and Vue packages
- Figma file for designers working with the same set
- Plain SVG files that work in any page
