npmpackage.info

Gathering detailed insights and metrics for @heroicons/react

@heroicons/react

A set of free MIT-licensed high-quality SVG icons for UI development.

2.2.0

21,710

MIT

JavaScript

284.00 B

99,400,470 5.5

Installations

npm install @heroicons/react

Score

90.1

Supply Chain

90.2

Quality

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

2

Total

144

Closed

77

Merged

65

Issues

Open

1

Total

404

Closed

403

Releases

v2.2.0

Published on 18 Nov 2024

v2.1.5

Published on 10 Jul 2024

v2.1.4

Published on 17 Jun 2024

v2.1.3

Published on 22 Mar 2024

v2.1.2

Published on 22 Mar 2024

v2.1.1

Published on 18 Dec 2023

View all 37 releases

Developer

tailwindlabs

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

No

Node Version

18.20.4

NPM Version

10.7.0 Statistics

21,710 Stars

228 Commits

1,282 Forks

162 Watching

6 Branches

35 Contributors

Updated on 28 Nov 2024

Bundle Size

444.00 B

Minified

284.00 B

Minified + Gzipped

Bundlephobia

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

99,400,470

Last day

-11.5%

172,719

Compared to previous day

Last week

2.5%

1,036,911

Compared to previous week

Last month

1.2%

4,317,497

Compared to previous month

Last year

46.4%

48,701,893

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react

Versions

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
Available as basic SVG icons and via first-party React and Vue libraries.

Browse at Heroicons.com →

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.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

4

Maintained

Determines if the project is "actively maintained".

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

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

0

SAST

Determines if the project uses static code analysis.

Score

5.5

/10

Last Scanned on 2024-11-18

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