OSS Tanbou
View on GitHubProject website

Heroicons — use UI-focused SVG icons directly or through React and Vue

OSS scale score 247.2OSS health 47Update pace 0 commits/30d
About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
23,811
Primary language
JavaScript
License
MIT
Repository last updated
May 12, 2026

Overview

Heroicons is an SVG icon set maintained by the makers of Tailwind CSS. Icons can be copied as inline SVG, while React and Vue applications can use first-party packages with individual component imports.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Copy raw SVG directly into an interface

Icons from the official site can be inlined in HTML and styled through the CSS color property or utility classes such as Tailwind CSS.

Sources: [2][3]

Import individual icons in React and Vue

First-party packages expose 24px outline and solid variants plus smaller solid sizes as individually importable components.

Sources: [2]

Useful for a consistent baseline icon set in web applications

It fits navigation, settings, dashboards, and other interfaces that need a coherent collection of common UI symbols.

Sources: [2][3]

Check the scope of first-party support

The README says the project is not accepting new icon additions or first-party support for frameworks such as Svelte or SolidJS. Raw SVG or community wrappers remain alternatives.

Sources: [2]

Official sources

  1. [1]tailwindlabs/heroicons repository(2026-09-21)
  2. [2]Heroicons README(2026-09-21)
  3. [3]Heroicons website(2026-09-21)
  4. [4]Heroicons MIT license(2026-09-21)
Supplemental curator note

Heroicons can be used by copying raw SVG from the official site, while React and Vue applications can import individual icons as components. The README also states that the project is not accepting new-icon contributions or first-party packages for additional frameworks.

Try it in 3 steps

  1. 1

    Install the React package

    Add the official React package. Vue applications can use @heroicons/vue instead.

    npm install @heroicons/react
  2. 2

    Import only the icon you need

    This example uses the 24px solid set. Outline and smaller solid sets are available through separate import paths.

    import { BeakerIcon } from '@heroicons/react/24/solid'
  3. 3

    Render and style the icon

    The SVG uses currentColor, so standard CSS or Tailwind CSS utilities can control its size and color.

    <BeakerIcon className="size-6 text-blue-500" />
Check the official README

Growth

Growth trends · Last 30 days

23,811 Stars

Trend data is still being collected.

Development activity

Last 90 days · weekly

Commits (last 30 days)
0
Open PRs
3

Development activity is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub
Stars
23,811
Forks
1,312
Watchers
166
Open issues
1
Contributors
33
Primary language
JavaScript
License
MIT
Repository last updated
May 12, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.