Icons
1,297Icons
MITLicense
OutlineStyle
16/20/24Grid

Heroicons

1,297 MIT-licensed outline & solid icons on a 16/20/24 grid. Because the same team maintains both, the icon components accept Tailwind utility classes directly.

Browse Heroicons icons by category Compare libraries

About Heroicons

What Heroicons is

Heroicons is made by the team behind Tailwind CSS, and it is designed to drop straight into Tailwind projects. The 1,297 icons ship in outline and solid variants, each available at 16px, 20px, and 24px — three sizes that are drawn separately rather than scaled, so optical weight stays correct at each one.

Because the same team maintains both, the icon components accept Tailwind utility classes directly. Sizing and colouring an icon is className="size-6 text-slate-500" rather than a set of custom props, which is a genuine productivity difference if you already work in Tailwind.

IconStash indexes the complete Heroicons collection. You can search it alongside 27 other libraries, preview any icon at any size and colour, and export SVG, PNG, React JSX, Vue, CSS, or an SVG sprite without installing a package or creating an account.

Install and use Heroicons

React

npm install @heroicons/react

The official package ships each icon as a tree-shakeable component, so bundlers only include the icons you actually import. Open any Heroicons icon on IconStash and the Code tab shows that icon's exact import statement and JSX.

Plain SVG and other frameworks

You do not have to install anything. Every Heroicons page lets you copy the raw SVG markup and paste it inline, which avoids a dependency entirely and gives you full control over colour, size, and stroke width.

IconStash also exports PNG at six sizes, Vue and CSS snippets, and SVG sprites — all generated in the browser from the original vector.

When to choose Heroicons

Good fit

Tailwind CSS projects of any size, and teams that want their icons styled with the same utilities as the rest of their markup. The three drawn sizes also make Heroicons a good fit for interfaces with a strict type and spacing scale.

Consider alternatives

Outside the Tailwind ecosystem the utility-class ergonomics matter less, and Lucide or Tabler give you more icons. For dense 15px-scale interfaces, Radix Icons is drawn specifically for that.

Licensing

MIT. Both outline and solid sets, at all three sizes, are free for commercial use without attribution.

Heroicons compared to other libraries

Popular Heroicons icons

Browse Heroicons by category

Frequently asked questions

What is Heroicons?

Heroicons is made by the team behind Tailwind CSS, and it is designed to drop straight into Tailwind projects. The 1,297 icons ship in outline and solid variants, each available at 16px, 20px, and 24px — three sizes that are drawn separately rather than scaled, so optical weight stays correct at each one.

Is Heroicons free for commercial use?

Yes. Heroicons is released under the MIT license, which permits unrestricted commercial use, modification, and distribution. No attribution is required, though it is appreciated. This makes Heroicons one of the safest icon libraries to use in commercial SaaS products, client work, and proprietary applications.

How do I use Heroicons icons in React?

Install the package with npm install @heroicons/react, then import icons as components. Every Heroicons page on IconStash shows the exact import statement and usage snippet for that specific icon in the Code tab, so you can copy working code without checking the docs. Tree-shakeable packages mean your bundler only includes the icons you actually import.

Can I download Heroicons icons as PNG?

Yes. Open any Heroicons icon on IconStash and use the Download PNG button to export at 16, 32, 64, 128, 256, or 512 pixels. The PNG is generated client-side from the original vector, so it stays crisp at every size. You can also copy the raw SVG markup, export a React component, or build an SVG sprite without installing anything.

What sizes do Heroicons come in?

16px, 20px, and 24px, and they are drawn separately at each size rather than scaled from one master. A 16px Heroicon has slightly heavier strokes and simplified detail compared to the 24px version of the same icon, which is why it stays legible when scaled down.

Do I need Tailwind CSS to use Heroicons?

No. Heroicons ships as plain SVG and as React and Vue component packages, and the components accept standard size and colour props alongside className. The Tailwind integration is a convenience, not a requirement — the icons work in any framework or in raw HTML.

Explore other icon libraries