Tool profile
Heroicons: cost, fit and limits
Heroicons is a set of hand-crafted SVG interface icons made by the makers of Tailwind CSS, Tailwind Labs, offering 316 icons in four styles with React and Vue libraries and a Figma file, all under the MIT license.
What to know first
Heroicons shows 316 icons in version 2.1.5 on its homepage, drawn in four styles: Outline on a 24 by 24 grid with a 1.5 px stroke, Solid, Mini and Micro. React and Vue libraries are published by the project, and a Figma file is offered. It is MIT licensed and free. The catalog is deliberately compact, so it covers common interface needs rather than niche domains.
Heroicons at a glance
| Maker | Tailwind Labs (the site says it is made by the makers of Tailwind CSS), Not stated on the vendor pages |
|---|---|
| Free plan | Yes |
| Entry price | Free |
| API access | No |
| Category | Best AI Icon Libraries in 2026, rank 6 of 11 |
| Website | heroicons.com |
Who Heroicons is best for
Tailwind CSS projects
The set comes from the team behind Tailwind CSS, so teams already styling with Tailwind get a set drawn for the same kind of interface, with React and Vue libraries ready.
Interfaces with size-specific needs
Mini and Micro styles sit beside Outline and Solid, so small buttons, badges and table rows can use a version drawn for that size instead of a scaled-down large icon.
Teams that prefer a short, consistent catalog
With 316 icons, a designer can review the whole set in one sitting, which makes it easier to keep a product's icons uniform than in a catalog of several thousand.
Heroicons plans and pricing
| Plan | Price | What it includes |
|---|---|---|
| MIT license | Free | 316 icons in version 2.1.5 across Outline, Solid, Mini and Micro styles, with a Figma file and React and Vue libraries, and no paid plan. |
Checked November 2026.
What Heroicons does
- Four styles
- Outline uses a 24 by 24 grid with a 1.5 px stroke, and Solid, Mini and Micro give filled and small-size versions in the same family.
- React and Vue libraries
- The project publishes libraries for both frameworks, so components are ready to import without writing your own SVG wrapper. Both libraries are published by the project itself, so component names follow the same naming as the SVG files.
- Figma file
- A Figma file is offered from the site, which lets designers place the same 316 icons that developers import in code. That keeps design and code aligned, because the file and the libraries describe the same 316 icons.
- Hand-crafted SVG
- The site describes the icons as hand-crafted SVG, and Outline and Solid icons are published as SVG files in the Heroicons collection. Both Outline and Solid are therefore available as plain files for projects that avoid a component library.
- Open license
- The MIT license is stated on the homepage and in the GitHub repository description, so adoption needs no account or purchase. The repository carries the same license, so a reviewer can confirm the terms at the source.
How Heroicons handles your data
Heroicons is a set of files, so using it sends no data to Tailwind Labs. The license page and the GitHub repository state the MIT license, which asks that the copyright notice stay with redistributed copies. The pages we read state no hosting region, retention period, certification or position on training AI models, and no company address, so the vendor's policy was not checked for those points. The site also offers no account, no hosted service and no paid tier that would store anything about you.
Where Heroicons falls short in practice
- Small catalog. Only 316 icons appear on the homepage, so a product with niche concepts, brand marks or many domain symbols will need a second set to fill gaps.
- No hosted features. The pages name no API, no AI search and no icon request process, so missing icons have to be drawn by you or taken from another family.
- Few stated details. Hosting, data practices and the company address are not stated on the pages read, so a vendor review has to rely on the license and the repository alone.
Works with
Alternatives to Heroicons
Heroicons: common questions
How many icons does Heroicons include?
The homepage shows 316 icons in version 2.1.5. They are available in Outline, Solid, Mini and Micro styles, so not every icon necessarily appears in every style. Check the specific icons your design needs in the style you plan to use before committing, since the count is far below Tabler Icons or Lucide.
Who makes Heroicons?
The site says Heroicons are made by the makers of Tailwind CSS, which is Tailwind Labs. The GitHub repository sits under the tailwindlabs organization. The pages we read do not state a company address or headquarters country, so that detail should be asked of the vendor if your procurement process requires it.
What is the difference between Mini and Micro?
They are two small-size styles that sit beside Outline and Solid. The homepage lists Outline on a 24 by 24 grid with a 1.5 px stroke and names Mini and Micro as separate styles. The pages we read do not give their pixel grids, so preview them at your button and badge sizes.
Can I use Heroicons with Vue?
Yes. The project publishes a Vue library alongside the React one, and the icons themselves are SVG, so any other framework can use the raw files. The pages we read do not name packages for Svelte or Angular, so those stacks would import SVG directly or use a wrapper of their own.
Is there a Figma file for Heroicons?
Yes. The site offers a Figma file so designers can use the same icons as the code. The pages we read do not describe a plugin, only the file, so designers work from the file and copy icons into their own designs. The license is MIT for both.