npmpackage.info

@heroicons/vue

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

2.2.0

21,707

MIT

JavaScript

14,359,830 5.5

Installations

npm install @heroicons/vue

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

Contributors

View all 35 contributors

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,707 Stars

228 Commits

1,281 Forks

162 Watching

6 Branches

35 Contributors

Updated on 28 Nov 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

14,359,830

Last day

-0.7%

28,491

Compared to previous day

Last week

-1.5%

149,531

Compared to previous week

Last month

6.8%

663,914

Compared to previous month

Last year

44.8%

7,013,085

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

vue

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

Other packages similar to @heroicons/vue

@heroicons/react

2.2.0

<p align="center"> <a href="https://heroicons.com" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-dark.svg"> <source media="(pref

heroicons

2.2.0

@iconify-json/heroicons

1.2.1

HeroIcons icon set in Iconify JSON format

vue-dynamic-heroicons

0.0.2

A really simple Vue 3 component for dynamically loading the official Heroicons Vue components. Instead of using `<BeakerIcon />` you can use `<DynamicHeroicon name="beaker" />` which allows you to very easily dynamically load heroicons if you have a lot i