Heroicons
Heroicons is a premium open-source icon library created and maintained by the team behind Tailwind CSS. Every icon is hand-crafted by professional designers, resulting in a level of visual polish that is difficult to match in the open-source space. The library offers icons in three distinct styles — outline (24x24), solid (24x24), and mini (20x20). This gives you the flexibility to use lighter outline icons for general UI and solid/filled icons for emphasis or active states, all within the same consistent visual system. The collection is licensed under MIT; review the icon license guide for commercial-use details.
Heroicons Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 1,621 vector SVG icons |
| License | MIT (Commercial & Personal Use) |
| TypeScript Support | Native .d.ts definitions included |
| Framework Support | React, Next.js, Vue, Svelte, Tailwind CSS |
| Primary NPM Package | @heroicons/react |
| Source Repository | Official GitHub Repository → |
How many icons does Heroicons have?
Heroicons currently includes 1,621 vector icons indexed in the IconSearch catalog. Every icon is available in clean SVG format with customizable stroke widths, colors, and direct multi-framework code exports for modern web applications.
Is Heroicons free for commercial use?
Yes, Heroicons is distributed under the MIT license. This permissive open-source license allows unrestricted commercial and personal usage in proprietary software, SaaS platforms, client websites, and digital products without licensing fees.
How do you install and use Heroicons in React, Next.js, and Vue?
Install the package using npm install @heroicons/react, then import icons directly into your JSX, TSX, or Vue components. Alternatively, copy raw customized SVG markup directly from IconSearch with zero client-side JavaScript overhead.
// Install package
npm install @heroicons/react
// React & Next.js App Router usage
import { AcademicCap } from '@heroicons/react'
export default function Header() {
return <AcademicCap className="w-5 h-5 text-indigo-500" />
}Heroicons FAQ & Technical Guide
Is Heroicons free for commercial use?
Yes. Heroicons is MIT licensed which means you can use it in any commercial project, modify it, and distribute it freely without any attribution required.
What is the difference between Heroicons outline and solid?
Outline icons use strokes on a transparent background — they are lighter and work well for general UI. Solid icons are fully filled and create more visual weight, making them ideal for active states, buttons, and emphasis.
Can I use Heroicons without Tailwind CSS?
Yes. Heroicons works with any CSS framework or plain CSS. Tailwind is not a requirement — you can style icons with regular CSS classes or inline styles.
How do I change the color of a Heroicon?
Pass a className with a text color utility — for example className='text-blue-500' with Tailwind, or use CSS color property. The icons use currentColor so they inherit the text color of their parent.
Does Heroicons work with Next.js Server Components?
Yes. Heroicons are pure SVG components with no client-side dependencies, making them fully compatible with Next.js Server Components in the App Router.