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

> A set of free, MIT-licensed SVG icons designed by the Tailwind CSS team, available in outline, solid, and mini styles for use in web and mobile projects.

## Install

Save in your project root:

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

## Quick Use
```bash
npm install @heroicons/react
# Then in your component:
# import { BeakerIcon } from '@heroicons/react/24/solid'
```
For plain SVG, copy icons directly from https://heroicons.com or install the Vue package with `npm install @heroicons/vue`.

## 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

---
Source: https://tokrepo.com/en/workflows/asset-61586e04
Author: AI Open Source