Gathering detailed insights and metrics for heroicons
Gathering detailed insights and metrics for heroicons
A set of free MIT-licensed high-quality SVG icons for UI development.
Installations
npm install heroiconsDeveloper Guide
BETA
Typescript
No
Module System
N/A
Node Version
18.20.4
NPM Version
10.7.0
Score
97.5
Supply Chain
91.7
Quality
89.8
Maintenance
100
Vulnerability
100
License
Releases
37
Languages
1
JavaScript
JavaScript (100%)
Developer
Download Statistics
Total Downloads
4,638,701
Last Day
2,262
Last Week
36,127
Last Month
162,651
Last Year
2,082,163
GitHub Statistics
MIT License
22,583 Stars
231 Commits
1,294 Forks
161 Watchers
6 Branches
37 Contributors
Updated on Jul 01, 2025
Maintainers
4
Package Meta Information
Latest Version
2.2.0
Package Id
heroicons@2.2.0
Unpacked Size
683.85 kB
Size
162.79 kB
File Count
1,291
NPM Version
10.7.0
Node Version
18.20.4
Published on
Nov 18, 2024
Total Downloads
Cumulative downloads
Total Downloads
4,638,701
Last Day
-7.2%
2,262
Compared to previous day
Last Week
-6.1%
36,127
Compared to previous week
Last Month
-10%
162,651
Compared to previous month
Last Year
38.1%
2,082,163
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
Available as basic SVG icons and via first-party React and Vue libraries.
Basic Usage
The quickest way to use these icons is to simply copy the source for the icon you need from heroicons.com and inline it directly into your HTML:
1<svg 2 class="size-6 text-gray-500" 3 fill="none" 4 viewBox="0 0 24 24" 5 stroke="currentColor" 6 stroke-width="2" 7> 8 <path 9 stroke-linecap="round" 10 stroke-linejoin="round" 11 d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" 12 /> 13</svg>
Both icon styles are preconfigured to be stylable by setting the color CSS property, either manually or using utility classes like text-gray-500 in a framework like Tailwind CSS.
React
First, install @heroicons/react from npm:
1npm install @heroicons/react
Now each icon can be imported individually as a React component:
1import { BeakerIcon } from '@heroicons/react/24/solid' 2 3function MyComponent() { 4 return ( 5 <div> 6 <BeakerIcon className="size-6 text-blue-500" /> 7 <p>...</p> 8 </div> 9 ) 10}
The 24x24 outline icons can be imported from @heroicons/react/24/outline, the 24x24 solid icons can be imported from @heroicons/react/24/solid, the 20x20 solid icons can be imported from @heroicons/react/20/solid, and 16x16 solid icons can be imported from @heroicons/react/16/solid.
Icons use an upper camel case naming convention and are always suffixed with the word Icon.
Browse the full list of icon names on UNPKG →
Vue
First, install @heroicons/vue from npm:
1npm install @heroicons/vue
Now each icon can be imported individually as a Vue component:
1<template> 2 <div> 3 <BeakerIcon class="size-6 text-blue-500" /> 4 <p>...</p> 5 </div> 6</template> 7 8<script setup> 9import { BeakerIcon } from '@heroicons/vue/24/solid' 10</script>
The 24x24 outline icons can be imported from @heroicons/vue/24/outline, the 24x24 solid icons can be imported from @heroicons/vue/24/solid, the 20x20 solid icons can be imported from @heroicons/vue/20/solid, and the 16x16 solid icons can be imported from @heroicons/vue/16/solid.
Icons use an upper camel case naming convention and are always suffixed with the word Icon.
Browse the full list of icon names on UNPKG →
Contributing
While we absolutely appreciate anyone's willingness to try and improve the project, we're currently only interested in contributions that fix bugs, for example things like incorrect TypeScript types, or fixing an icon that's been exported with a fill instead of a stroke, etc.
We're not accepting contributions for new icons or adding support for other frameworks like Svelte or SolidJS. Instead we encourage you to release your own icons in your own library, and create your own packages for any other frameworks you'd like to see supported.
License
This library is MIT licensed.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
GitHub workflow tokens follow principle of least privilege
Details
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/prepare-release.yml:18
- Info: topLevel 'contents' permission set to 'read': .github/workflows/CI.yml:10
- Info: topLevel 'contents' permission set to 'read': .github/workflows/prepare-release.yml:13
- Info: topLevel 'contents' permission set to 'read': .github/workflows/release-insiders.yml:8
- Info: topLevel 'contents' permission set to 'read': .github/workflows/release.yml:8
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no binaries found in the repo
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/release-insiders.yml:15
Reason
1 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Reason
Found 8/30 approved changesets -- score normalized to 2
Reason
2 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/CI.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/CI.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/CI.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/CI.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/CI.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/CI.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/prepare-release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/prepare-release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/prepare-release.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/prepare-release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/prepare-release.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/prepare-release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-insiders.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/release-insiders.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-insiders.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/release-insiders.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-insiders.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/release-insiders.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/tailwindlabs/heroicons/release.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/CI.yml:40
- Warn: npmCommand not pinned by hash: .github/workflows/release-insiders.yml:43
- Warn: npmCommand not pinned by hash: .github/workflows/release.yml:43
- Info: 0 out of 11 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 0 out of 3 npmCommand dependencies pinned
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 13 are checked with a SAST tool
Score
5.4
/10
Last Scanned on 2025-06-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More