Heroicons — Beautiful Hand-Crafted SVG Icons by the Makers of Tailwind CSS

Introduction

Heroicons is a collection of free, MIT-licensed SVG icons designed by the team behind Tailwind CSS. Each icon is hand-crafted on a pixel grid to ensure clarity at common sizes. The set ships with first-party React and Vue components, plus raw SVGs that work anywhere.

What Heroicons Does

• Provides 300+ icons in three variants: 24px outline, 24px solid, and 20px mini
• Ships first-party React and Vue component libraries for tree-shakable imports
• Exposes raw SVG files that can be used in any framework or design tool
• Follows a consistent stroke width and visual weight across the entire set
• Offers a searchable web catalog for browsing and copying icons instantly

Architecture Overview

The icon source files are hand-drawn SVGs organized by variant (outline, solid, mini) in the repository. A build pipeline processes these SVGs into optimized React and Vue component packages published to npm. Each component accepts standard SVG props such as className and aria-label, making them composable with any styling approach. The raw SVG files are also published as a standalone package for framework-agnostic use.

Self-Hosting & Configuration

• Install the React package: npm install @heroicons/react
• Install the Vue package: npm install @heroicons/vue
• Import icons by size and style path, e.g. @heroicons/react/24/outline
• Use raw SVGs from the heroicons npm package or copy from the repository
• Customize color via CSS color property since icons use currentColor by default

Key Features

• Designed on a strict pixel grid for crisp rendering at 20px and 24px
• Three distinct styles (outline, solid, mini) for different UI contexts
• Tree-shakable packages mean unused icons are excluded from your bundle
• Every icon uses currentColor for seamless theming with CSS or Tailwind classes
• MIT license allows unrestricted commercial and personal use

Comparison with Similar Tools

• Lucide — community fork of Feather Icons with more icons; Heroicons is maintained by the Tailwind CSS team with a tighter design language
• Feather Icons — minimalist outline-only set; Heroicons adds solid and mini variants
• Phosphor Icons — large set with six weights; Heroicons focuses on three opinionated styles tuned for Tailwind
• Material Symbols — Google's icon set with variable font support; Heroicons uses pure SVG with no font dependency
• Radix Icons — small set tailored for Radix UI; Heroicons offers broader coverage and framework-agnostic SVGs

FAQ

Q: Can I use Heroicons without React or Vue? A: Yes. Install the heroicons npm package for raw SVGs, or copy them directly from the website or the GitHub repository.

Q: How do I change the icon color? A: Icons use currentColor, so set the CSS color property on the icon element or its parent.

Q: Are new icons added regularly? A: The set grows with periodic releases. Check the GitHub repository or heroicons.com for the latest additions.

Q: Is there a Figma file? A: Yes, the Tailwind CSS team provides an official Figma file for designers linked from the repository and website.

Sources

• https://github.com/tailwindlabs/heroicons
• https://heroicons.com