Heroicons
Beautiful hand-crafted SVG icons by the Tailwind CSS team
STATS
OVERVIEW
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.
Heroicons ships as a React and Vue package with full TypeScript support. Every icon is tree-shakable, so your bundle only includes what you use. The library is tightly integrated with Tailwind CSS — icons accept className props and work perfectly with Tailwind utility classes for sizing and coloring.
// VERDICTHeroicons is the best choice if you are already using Tailwind CSS. The design language matches Tailwind UI components perfectly. The only significant limitation is the icon count — at 292 icons it is one of the smaller libraries, so complex applications may find gaps.
INSTALLATION
npm install @heroicons/react
npm install @heroicons/react // Note: Fully compatible with Next.js App Router and Pages Router. Works in both Server and Client components.
npm install @heroicons/vue
// No official Svelte package — use SVG directly from heroicons.com
// No vanilla JS package — copy SVG code directly from heroicons.com
CODE EXAMPLES
import { HomeIcon, BellIcon, UserIcon } from '@heroicons/react/24/outline'
export default function App() {
return (
<div>
<HomeIcon className="h-6 w-6" />
<BellIcon className="h-6 w-6 text-blue-500" />
<UserIcon className="h-6 w-6 text-gray-400" />
</div>
)
}// Use solid icons for emphasis or active states
import { HomeIcon } from '@heroicons/react/24/solid'
import { HomeIcon as HomeOutline } from '@heroicons/react/24/outline'
export default function Nav() {
const isActive = true
const Icon = isActive ? HomeIcon : HomeOutline
return <Icon className="h-6 w-6" />
}// Mini icons (20x20) for dense UIs like badges and tags
import { CheckIcon, XMarkIcon } from '@heroicons/react/20/solid'
export default function Badge() {
return (
<span className="flex items-center gap-1 text-sm">
<CheckIcon className="h-4 w-4 text-green-500" />
Verified
</span>
)
}