Repository: tailwindlabs/heroicons
Branch: master
Commit: bd6c5c0d5ace
Files: 37
Total size: 56.0 KB
Directory structure:
gitextract_r2zrai7b/
├── .github/
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE/
│ │ └── config.yml
│ └── workflows/
│ ├── CI.yml
│ ├── prepare-release.yml
│ ├── release-insiders.yml
│ └── release.yml
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── prettier.config.js
├── react/
│ ├── .gitignore
│ ├── LICENSE
│ ├── README.md
│ ├── index.esm.js
│ ├── index.js
│ ├── outline/
│ │ └── index.js
│ ├── package.json
│ └── solid/
│ └── index.js
├── scripts/
│ ├── build.js
│ ├── deprecated.js
│ ├── release-channel.js
│ ├── release-notes.js
│ └── verify-names.js
├── svgo.16.solid.mjs
├── svgo.20.solid.mjs
├── svgo.24.outline.mjs
├── svgo.24.solid.mjs
└── vue/
├── .gitignore
├── LICENSE
├── README.md
├── index.esm.js
├── index.js
├── outline/
│ └── index.js
├── package.json
└── solid/
└── index.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing
## Publishing
This section is intended only for the project maintainers.
1. Increment the version number in the `package.json`, `./react/package.json` and `./vue/package.json` files, and run `npm install` from the project root to update `package-lock.json`.
2. Update the changelog.
3. Commit and tag those changes.
4. Push the commit and tag to GitHub.
5. Review the draft release generated by GitHub.
6. Publish the new release on GitHub. This will automatically trigger a GitHub action to publish these packages to NPM.
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
- name: Get Help
url: https://github.com/tailwindlabs/heroicons/discussions/new?category=help
about: If you can't get something to work the way you expect, open a question in our discussion forums.
- name: Icon Suggestion
url: https://github.com/tailwindlabs/heroicons/discussions/new?category=ideas
about: 'Suggest any icon ideas you have using our discussion forums.'
- name: Bug Report
url: https://github.com/tailwindlabs/heroicons/issues/new
about: If you think you've found an actual bug, create a bug report.
================================================
FILE: .github/workflows/CI.yml
================================================
name: CI
on:
push:
branches: [master]
pull_request:
branches: [master]
permissions:
contents: read
env:
CI: true
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
- name: Use cached node_modules
uses: actions/cache@v3
with:
path: node_modules
key: ${{ runner.os }}-${{ matrix.node-version }}-node_modules-${{ hashFiles('**/package-lock.json') }}
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
================================================
FILE: .github/workflows/prepare-release.yml
================================================
name: Prepare Release
on:
workflow_dispatch:
push:
tags:
- 'v*'
env:
CI: true
permissions:
contents: read
jobs:
build:
permissions:
contents: write # for softprops/action-gh-release to create GitHub release
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18]
steps:
- uses: actions/checkout@v3
- run: git fetch --tags -f
- name: Resolve version
id: vars
run: |
echo "TAG_NAME=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV
- name: Get release notes
run: |
RELEASE_NOTES=$(npm run release-notes --silent)
echo "RELEASE_NOTES<<EOF" >> $GITHUB_ENV
echo "$RELEASE_NOTES" >> $GITHUB_ENV
echo "EOF" >> $GITHUB_ENV
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
- name: Release
uses: softprops/action-gh-release@v1
with:
draft: true
tag_name: ${{ env.TAG_NAME }}
body: |
${{ env.RELEASE_NOTES }}
================================================
FILE: .github/workflows/release-insiders.yml
================================================
name: Release Insiders
on:
push:
branches: [master]
permissions:
contents: read
id-token: write
env:
CI: true
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
- name: Use cached node_modules
id: cache
uses: actions/cache@v3
with:
path: node_modules
key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
restore-keys: |
nodeModules-
- name: Install dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: npm install
- name: Calculate environment variables
run: |
echo "SHA_SHORT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
- name: 'Version `heroicons` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}'
run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version
- name: 'Version `@heroicons/react` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}'
run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version --prefix react
- name: 'Version `@heroicons/vue` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}'
run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version --prefix vue
- name: Publish `heroicons`
run: npm publish --provenance --tag insiders
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Publish `@heroicons/react`
run: npm publish ./react --provenance --tag insiders
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Publish `@heroicons/vue`
run: npm publish ./vue --provenance --tag insiders
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
release:
types: [published]
permissions:
contents: read
id-token: write
env:
CI: true
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
- name: Use cached node_modules
id: cache
uses: actions/cache@v3
with:
path: node_modules
key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
restore-keys: |
nodeModules-
- name: Install dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: npm install
- name: Calculate environment variables
run: |
echo "RELEASE_CHANNEL=$(npm run release-channel --silent)" >> $GITHUB_ENV
- name: Publish `heroicons`
run: npm publish --provenance --tag ${{ env.RELEASE_CHANNEL }}
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Publish `@heroicons/react`
run: npm publish ./react --provenance --tag ${{ env.RELEASE_CHANNEL }}
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Publish `@heroicons/vue`
run: npm publish ./vue --provenance --tag ${{ env.RELEASE_CHANNEL }}
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
================================================
FILE: .gitignore
================================================
.DS_Store
/node_modules
/16
/20
/24
================================================
FILE: CHANGELOG.md
================================================
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
- Nothing yet!
## [2.2.0] - 2024-11-18
### Added
- Add React 19 support ([#1247](https://github.com/tailwindlabs/heroicons/pull/1247))
### Fixed
- Removed unnecessary clipping path from `solid/arrow-left-circle` ([#1211](https://github.com/tailwindlabs/heroicons/pull/1211))
## [2.1.5] - 2024-07-10
### Added
- Add new icons (`arrow-turn-*`, `bold`, `calendar-date-range`, `divide`, `document-currency-*`, `equals`, `h1`, `h2`, `h3`, `italic`, `link-slash`, `numbered-list`, `percent-badge`, `slash`, `strikethrough`, `underline`)
## [2.1.4] - 2024-06-17
### Fixed
- Improve tree-shakability of React package ([#1192](https://github.com/tailwindlabs/heroicons/pull/1192))
## [2.1.3] - 2024-03-22
- Improve project READMEs ([#1152](https://github.com/tailwindlabs/heroicons/pull/1152))
## [2.1.2] - 2024-03-22
- Include license file with published packages ([#1151](https://github.com/tailwindlabs/heroicons/pull/1151))
## [2.1.1] - 2023-12-18
### Fixed
- Fixed chevrons in mini set ([#1106](https://github.com/tailwindlabs/heroicons/pull/1106))
## [2.1.0] - 2023-12-18
### Added
- Added micro icon set ([#1104](https://github.com/tailwindlabs/heroicons/pull/1104))
- Rebuilt some icons for better clarity ([#1104](https://github.com/tailwindlabs/heroicons/pull/1104))
## [2.0.18] - 2023-05-09
### Fixed
- Fix incorrect `esm` paths in package.json for both React and Vue ([#988](https://github.com/tailwindlabs/heroicons/pull/988))
## [2.0.17] - 2023-03-30
### Fixed
- Fix React icon types ([#966](https://github.com/tailwindlabs/heroicons/pull/966))
## [2.0.16] - 2023-02-17
### Fixed
- Add root-level import ([#936](https://github.com/tailwindlabs/heroicons/pull/936))
## [2.0.15] - 2023-02-08
### Fixed
- Fix icon tree-shaking ([#929](https://github.com/tailwindlabs/heroicons/pull/929))
## [2.0.14] - 2023-01-25
### Fixed
- Fix React ref types ([#903](https://github.com/tailwindlabs/heroicons/pull/903))
### Changed
- Specify explicit package exports ([#920](https://github.com/tailwindlabs/heroicons/pull/920))
## [2.0.13] - 2022-11-02
### Fixed
- Fix `minus` icon alignment ([0a88242](https://github.com/tailwindlabs/heroicons/commit/0a88242ffddbd79177b8cd4cf954d3a54be121a6))
## [2.0.12] - 2022-10-05
### Fixed
- Add `title` and `titleId` props to the React types ([#814](https://github.com/tailwindlabs/heroicons/pull/814))
- Fix `information-circle` icon alignment ([#846](https://github.com/tailwindlabs/heroicons/pull/846))
## [2.0.11] - 2022-09-12
### Added
- Add new icons (`bug-ant`, `eye-dropper`, `pause-circle`, `play-circle`, `power`, `rocket-launch`, `square-2-stack-3d`, `stop-circle`, `trophy`, `tv`, `viewfinder-circle`, `window`) ([#809](https://github.com/tailwindlabs/heroicons/pull/809))
## [2.0.10] - 2022-08-30
## Fixed
- Fix `arrow-path` direction and fix optical alignment of `exclamation-triangle` ([#786](https://github.com/tailwindlabs/heroicons/pull/786))
## [2.0.9] - 2022-08-30
## Added
- Add new icons (`arrow-small-down`, `arrow-small-left`, `arrow-small-right`, `arrow-small-up`, `battery-0`, `battery-100`, `battery-50`, `cube-transparent`, `currency-bangladeshi`, `minus-small`, `paint-brush`, `plus-small`, `variable`, `wallet`, `arrow-path-rounded-square`) and fix optical alignment and appearance of icons (`bookmark-slash`, `bookmark`, `exclamation-triangle`, `table-cells`, `view-columns`, `arrow-path`) ([#785](https://github.com/tailwindlabs/heroicons/pull/785))
## [2.0.8] - 2022-08-26
## Fixed
- Fix optical alignment and size of icons (`heart`, `minus`, `pencil-square`, `user-plus`, `x-mark`, `hand-thumb-up`, `hand-thumb-down`) ([#767](https://github.com/tailwindlabs/heroicons/pull/767))
- Fix size of icons (`arrow-down-left`, `arrow-down-right`, `arrow-down`, `arrow-left`, `arrow-right`, `arrow-up-left`, `arrow-up-right`, `arrow-up`) ([#768](https://github.com/tailwindlabs/heroicons/pull/768))
- Fix optical alignment and size of `tag` icon ([#769](https://github.com/tailwindlabs/heroicons/pull/769))
- Fix size of `check` icon ([#770](https://github.com/tailwindlabs/heroicons/pull/770))
## Added
- Add `user-minus` icon
## [2.0.7] - 2022-08-25
## Fixed
- Improve optical alignment and sizing of icons (`hand-thumb-up`, `hand-thumb-down`, `plus`, `minus`) ([#746](https://github.com/tailwindlabs/heroicons/pull/746))
## [2.0.6] - 2022-08-25
## Fixed
- Fix size of icons (`chevron-double-down`, `chevron-double-left`, `chevron-double-right`, `chevron-double-up`, `chevron-down`, `chevron-left`, `chevron-right`, `chevron-up`, `funnel`, `minus`, `plus`) ([#763](https://github.com/tailwindlabs/heroicons/pull/763))
## [2.0.5] - 2022-08-25
## Fixed
- Modify the curved design of the `check-*` icons to a straight check ([#762](https://github.com/tailwindlabs/heroicons/pull/762))
## [2.0.4] - 2022-08-24
## Fixed
- Remove additional stroke from outline icons (`bars-arrow-down`,`bars-arrow-up`,`chevron-up-down`, `rss`) ([#759](https://github.com/tailwindlabs/heroicons/pull/759))
## [2.0.3] - 2022-08-24
### Added
- Add missing icons from v1 (`bars-arrow-down`,`bars-arrow-up`,`chevron-up-down`, `rss`) ([#758](https://github.com/tailwindlabs/heroicons/pull/758))
### Fixed
- Fix inconsistent naming for 'code-bracket' icons (#756)
## [2.0.2] - 2022-08-24
### Fixed
- Fix typo in `exclamation-*` icons (#735)
## [2.0.1] - 2022-08-23
## Added
- Warn when trying to import from v1 paths ([f508658](https://github.com/tailwindlabs/heroicons/commit/f5086588a9b25fd425578fbe185deb38d6b8505f))
## [2.0.0] - 2022-08-23
### Added
- Completely new icon set, checkout the [release notes](https://github.com/tailwindlabs/heroicons/releases/tag/v2.0.0) for more info.
## [1.0.6] - 2022-03-02
### Added
- Add `forwardRef` support for React components ([#614](https://github.com/tailwindlabs/heroicons/pull/614))
### Fixed
- Add `sideEffects` to `package.json` files ([#572](https://github.com/tailwindlabs/heroicons/pull/572))
- Fix folder icons ([#598](https://github.com/tailwindlabs/heroicons/pull/598))
- Fix Vue TypeScript declarations ([#608](https://github.com/tailwindlabs/heroicons/pull/608))
- Move `stroke-width` from `path` to `svg` ([#631](https://github.com/tailwindlabs/heroicons/pull/631))
## [1.0.5] - 2021-10-22
### Fixed
- Add MIT license to `package.json` files ([#317](https://github.com/tailwindlabs/heroicons/pull/317))
- Add `aria-hidden="true"` attribute ([#261](https://github.com/tailwindlabs/heroicons/pull/261))
- Fix solid `arrows-expand` fill color ([#515](https://github.com/tailwindlabs/heroicons/pull/515))
- Add `{"type": "module"}` to `esm` `package.json` files
## [1.0.4] - 2021-08-17
### Fixed
- Fix Vue type declarations ([#322](https://github.com/tailwindlabs/heroicons/pull/322))
## [1.0.3] - 2021-07-26
### Added
- Add Vue type declarations ([#254](https://github.com/tailwindlabs/heroicons/pull/254))
## [1.0.2] - 2021-07-09
### Fixed
- Add correct `plus` icons
## [1.0.1] - 2021-04-14
### Added
- Add small arrow icons (`arrow-sm-up`, `arrow-sm-right`, `arrow-sm-down`, `arrow-sm-left`)
## [1.0.0] - 2021-03-29
## [0.4.2] - 2020-09-02
## [0.4.1] - 2020-08-26
## [0.4.0] - 2020-08-25
### Fixed
- Don't run build scripts on install
## [0.3.7] - 2020-07-23
## [0.3.6] - 2020-06-02
## [0.3.5] - 2020-06-01
## [0.3.4] - 2020-06-01
## [0.3.3] - 2020-06-01
## [0.3.2] - 2020-06-01
## [0.3.1] - 2020-06-01
## [0.3.0] - 2020-06-01
### Added
- Add 22 new icons (`fire`, `shopping-bag`, `thumb-up`, `thumb-down`, `hand`, `arrows-expand`, `view-grid`, `puzzle`, `folder-download`, `folder-add`, `folder-remove`) ([60e6750](https://github.com/tailwindlabs/heroicons/commit/60e6750e1cee2477e62f62f54f4023690de7336c))
- Add React and Vue components ([aa8fe98](https://github.com/tailwindlabs/heroicons/commit/aa8fe98dc1106fe0cfd68f0c91b2fa1c4f7a147a))
## [0.2.0] - 2020-05-18
### Added
- Everything!
[unreleased]: https://github.com/tailwindlabs/heroicons/compare/v2.2.0...HEAD
[2.2.0]: https://github.com/tailwindlabs/heroicons/compare/v2.1.5...v2.2.0
[2.1.5]: https://github.com/tailwindlabs/heroicons/compare/v2.1.4...v2.1.5
[2.1.4]: https://github.com/tailwindlabs/heroicons/compare/v2.1.3...v2.1.4
[2.1.3]: https://github.com/tailwindlabs/heroicons/compare/v2.1.2...v2.1.3
[2.1.2]: https://github.com/tailwindlabs/heroicons/compare/v2.1.1...v2.1.2
[2.1.1]: https://github.com/tailwindlabs/heroicons/compare/v2.1.0...v2.1.1
[2.1.0]: https://github.com/tailwindlabs/heroicons/compare/v2.0.18...v2.1.0
[2.0.18]: https://github.com/tailwindlabs/heroicons/compare/v2.0.17...v2.0.18
[2.0.17]: https://github.com/tailwindlabs/heroicons/compare/v2.0.16...v2.0.17
[2.0.16]: https://github.com/tailwindlabs/heroicons/compare/v2.0.15...v2.0.16
[2.0.15]: https://github.com/tailwindlabs/heroicons/compare/v2.0.14...v2.0.15
[2.0.14]: https://github.com/tailwindlabs/heroicons/compare/v2.0.13...v2.0.14
[2.0.13]: https://github.com/tailwindlabs/heroicons/compare/v2.0.12...v2.0.13
[2.0.12]: https://github.com/tailwindlabs/heroicons/compare/v2.0.11...v2.0.12
[2.0.11]: https://github.com/tailwindlabs/heroicons/compare/v2.0.10...v2.0.11
[2.0.10]: https://github.com/tailwindlabs/heroicons/compare/v2.0.9...v2.0.10
[2.0.9]: https://github.com/tailwindlabs/heroicons/compare/v2.0.8...v2.0.9
[2.0.8]: https://github.com/tailwindlabs/heroicons/compare/v2.0.7...v2.0.8
[2.0.7]: https://github.com/tailwindlabs/heroicons/compare/v2.0.6...v2.0.7
[2.0.6]: https://github.com/tailwindlabs/heroicons/compare/v2.0.5...v2.0.6
[2.0.5]: https://github.com/tailwindlabs/heroicons/compare/v2.0.4...v2.0.5
[2.0.4]: https://github.com/tailwindlabs/heroicons/compare/v2.0.3...v2.0.4
[2.0.3]: https://github.com/tailwindlabs/heroicons/compare/v2.0.2...v2.0.3
[2.0.2]: https://github.com/tailwindlabs/heroicons/compare/v2.0.1...v2.0.2
[2.0.1]: https://github.com/tailwindlabs/heroicons/compare/v2.0.0...v2.0.1
[2.0.0]: https://github.com/tailwindlabs/heroicons/compare/v1.0.6...v2.0.0
[1.0.6]: https://github.com/tailwindlabs/heroicons/compare/v1.0.5...v1.0.6
[1.0.5]: https://github.com/tailwindlabs/heroicons/compare/v1.0.4...v1.0.5
[1.0.4]: https://github.com/tailwindlabs/heroicons/compare/v1.0.3...v1.0.4
[1.0.3]: https://github.com/tailwindlabs/heroicons/compare/v1.0.2...v1.0.3
[1.0.2]: https://github.com/tailwindlabs/heroicons/compare/v1.0.1...v1.0.2
[1.0.1]: https://github.com/tailwindlabs/heroicons/compare/v1.0.0...v1.0.0
[1.0.0]: https://github.com/tailwindlabs/heroicons/compare/v0.4.2...v1.0.0
[0.4.2]: https://github.com/tailwindlabs/heroicons/compare/v0.4.1...v0.4.2
[0.4.1]: https://github.com/tailwindlabs/heroicons/compare/v0.4.0...v0.4.1
[0.4.0]: https://github.com/tailwindlabs/heroicons/compare/v0.3.7...v0.4.0
[0.3.7]: https://github.com/tailwindlabs/heroicons/compare/v0.3.6...v0.3.7
[0.3.6]: https://github.com/tailwindlabs/heroicons/compare/v0.3.5...v0.3.6
[0.3.5]: https://github.com/tailwindlabs/heroicons/compare/v0.3.4...v0.3.5
[0.3.4]: https://github.com/tailwindlabs/heroicons/compare/v0.3.3...v0.3.4
[0.3.3]: https://github.com/tailwindlabs/heroicons/compare/v0.3.2...v0.3.3
[0.3.2]: https://github.com/tailwindlabs/heroicons/compare/v0.3.1...v0.3.2
[0.3.1]: https://github.com/tailwindlabs/heroicons/compare/v0.3.0...v0.3.1
[0.3.0]: https://github.com/tailwindlabs/heroicons/compare/v0.2.0...v0.3.0
[0.2.0]: https://github.com/tailwindlabs/heroicons/releases/tag/v0.2.0
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) Tailwind Labs, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<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="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
<img alt="Heroicons" width="315" height="117" style="max-width: 100%" src="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
</picture>
</a>
</p>
<p align="center">
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. <br>Available as basic SVG icons and via first-party <a href="#react">React</a> and <a href="#vue">Vue</a> libraries.
<p>
<p align="center">
<a href="https://heroicons.com"><strong>Browse at Heroicons.com →</strong></a>
</p>
<p align="center">
<a href="https://github.com/tailwindlabs/heroicons/releases"><img src="https://img.shields.io/npm/v/heroicons" alt="Latest Release"></a>
<a href="https://github.com/tailwindlabs/heroicons/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/heroicons.svg" alt="License"></a>
</p>
## Basic Usage
The quickest way to use these icons is to simply copy the source for the icon you need from [heroicons.com](https://heroicons.com) and inline it directly into your HTML:
```html
<svg
class="size-6 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</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](https://tailwindcss.com).
## React
First, install `@heroicons/react` from npm:
```sh
npm install @heroicons/react
```
Now each icon can be imported individually as a React component:
```js
import { BeakerIcon } from '@heroicons/react/24/solid'
function MyComponent() {
return (
<div>
<BeakerIcon className="size-6 text-blue-500" />
<p>...</p>
</div>
)
}
```
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 →](https://unpkg.com/browse/@heroicons/react/24/outline/)
## Vue
First, install `@heroicons/vue` from npm:
```sh
npm install @heroicons/vue
```
Now each icon can be imported individually as a Vue component:
```vue
<template>
<div>
<BeakerIcon class="size-6 text-blue-500" />
<p>...</p>
</div>
</template>
<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</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 →](https://unpkg.com/browse/@heroicons/vue/24/outline/)
## 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.
================================================
FILE: package.json
================================================
{
"name": "heroicons",
"license": "MIT",
"version": "2.2.0",
"description": "A set of free MIT-licensed high-quality SVG icons for UI development.",
"keywords": [
"icons",
"svg",
"tailwindcss"
],
"repository": {
"type": "git",
"url": "git+https://github.com/tailwindlabs/heroicons.git"
},
"files": [
"16/",
"20/",
"24/",
"README.md",
"LICENSE"
],
"scripts": {
"prepublishOnly": "npm run build",
"lint": "node ./scripts/verify-names.js",
"prebuild": "rimraf ./{16,20,24} ./{vue,react}/{16,20,24} ./optimized/{16,20,24}",
"build": "npm run build-24-outline && npm run build-20-solid && npm run build-24-solid && npm run build-16-solid && npm run build-react && npm run build-vue",
"build-react": "node ./scripts/build.js react",
"build-vue": "node ./scripts/build.js vue",
"build-24-outline": "rimraf ./24/outline ./optimized/24/outline && svgo --config=svgo.24.outline.mjs -f ./src/24/outline -o ./optimized/24/outline --pretty --indent=2 && mkdir -p ./24 && cp -R ./optimized/24/outline ./24/outline",
"build-16-solid": "rimraf ./16/solid ./optimized/16/solid && svgo --config=svgo.16.solid.mjs -f ./src/16/solid -o ./optimized/16/solid --pretty --indent=2 && mkdir -p ./16 && cp -R ./optimized/16/solid ./16/solid",
"build-20-solid": "rimraf ./20/solid ./optimized/20/solid && svgo --config=svgo.20.solid.mjs -f ./src/20/solid -o ./optimized/20/solid --pretty --indent=2 && mkdir -p ./20 && cp -R ./optimized/20/solid ./20/solid",
"build-24-solid": "rimraf ./24/solid ./optimized/24/solid && svgo --config=svgo.24.solid.mjs -f ./src/24/solid -o ./optimized/24/solid --pretty --indent=2 && mkdir -p ./24 && cp -R ./optimized/24/solid ./24/solid",
"release-channel": "node ./scripts/release-channel.js",
"release-notes": "node ./scripts/release-notes.js"
},
"devDependencies": {
"@babel/core": "^7.27.3",
"@babel/plugin-transform-react-jsx": "^7.27.1",
"@svgr/core": "^5.5.0",
"@vue/compiler-dom": "^3.0.5",
"camelcase": "^6.0.0",
"prettier": "^2.8.7",
"rimraf": "^3.0.2",
"svgo": "^3.0.2"
}
}
================================================
FILE: prettier.config.js
================================================
module.exports = {
singleQuote: true,
semi: false,
printWidth: 100,
}
================================================
FILE: react/.gitignore
================================================
*
!*.js
!.gitignore
!package.json
!outline
!solid
!LICENSE
!README.md
================================================
FILE: react/LICENSE
================================================
MIT License
Copyright (c) Tailwind Labs, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: react/README.md
================================================
<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="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
<img alt="Heroicons" width="315" height="117" style="max-width: 100%" src="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
</picture>
</a>
</p>
<p align="center">Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.<p>
<p align="center">
<a href="https://heroicons.com"><strong>Browse at Heroicons.com →</strong></a>
</p>
<p align="center">
<a href="https://github.com/tailwindlabs/heroicons/releases"><img src="https://img.shields.io/npm/v/@heroicons/react" alt="Latest Release"></a>
<a href="https://github.com/tailwindlabs/heroicons/blob/master/react/LICENSE"><img src="https://img.shields.io/npm/l/@heroicons/react.svg" alt="License"></a>
</p>
## Basic Usage
First, install `@heroicons/react` from npm:
```sh
npm install @heroicons/react
```
Now each icon can be imported individually as a React component:
```js
import { BeakerIcon } from '@heroicons/react/24/solid'
function MyComponent() {
return (
<div>
<BeakerIcon className="size-6 text-blue-500" />
<p>...</p>
</div>
)
}
```
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 →](https://unpkg.com/browse/@heroicons/react/24/outline/)
## 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.
================================================
FILE: react/index.esm.js
================================================
// The only reason this file exists is to appease Vite's optimizeDeps feature which requires a root-level import.
export default new Proxy(
{},
{
get: (_, property) => {
if (property === '__esModule') {
return {}
}
throw new Error(
`Importing from \`@heroicons/react\` directly is not supported. Please import from either \`@heroicons/react/16/solid\`, \`@heroicons/react/20/solid\`, \`@heroicons/react/24/solid\`, or \`@heroicons/react/24/outline\` instead.`
)
},
}
)
================================================
FILE: react/index.js
================================================
// The only reason this file exists is to appease Vite's optimizeDeps feature which requires a root-level import.
module.exports = new Proxy(
{},
{
get: (_, property) => {
if (property === '__esModule') {
return {}
}
throw new Error(
`Importing from \`@heroicons/react\` directly is not supported. Please import from either \`@heroicons/react/16/solid\`, \`@heroicons/react/20/solid\`, \`@heroicons/react/24/solid\`, or \`@heroicons/react/24/outline\` instead.`
)
},
}
)
================================================
FILE: react/outline/index.js
================================================
let proxy = new Proxy(
{},
{
get: (obj, property) => {
if (property === '__esModule') {
return {}
}
throw new Error(
`You\'re trying to import \`@heroicons/react/outline/${property}\` from Heroicons v1 but have installed Heroicons v2. Install \`@heroicons/react@v1\` to resolve this error.`
)
},
}
)
module.exports = proxy
================================================
FILE: react/package.json
================================================
{
"name": "@heroicons/react",
"license": "MIT",
"version": "2.2.0",
"description": "A set of free MIT-licensed high-quality SVG icons for UI development.",
"keywords": [
"icons",
"svg",
"react",
"tailwindcss"
],
"homepage": "https://github.com/tailwindlabs/heroicons#readme",
"repository": {
"type": "git",
"url": "https://github.com/tailwindlabs/heroicons.git"
},
"files": [
"16",
"20",
"24",
"outline",
"solid",
"index.esm.js",
"index.js",
"LICENSE",
"README.md"
],
"sideEffects": false,
"exports": {
".": {
"import": "./index.esm.js",
"require": "./index.js"
},
"./package.json": {
"default": "./package.json"
},
"./outline": {
"default": "./outline/index.js"
},
"./outline/index": {
"default": "./outline/index.js"
},
"./outline/index.js": {
"default": "./outline/index.js"
},
"./solid": {
"default": "./solid/index.js"
},
"./solid/index": {
"default": "./solid/index.js"
},
"./solid/index.js": {
"default": "./solid/index.js"
},
"./16/solid": {
"types": "./16/solid/index.d.ts",
"import": "./16/solid/esm/index.js",
"require": "./16/solid/index.js"
},
"./16/solid/*": {
"types": "./16/solid/*.d.ts",
"import": "./16/solid/esm/*.js",
"require": "./16/solid/*.js"
},
"./16/solid/*.js": {
"types": "./16/solid/*.d.ts",
"import": "./16/solid/esm/*.js",
"require": "./16/solid/*.js"
},
"./16/solid/esm/*": {
"types": "./16/solid/*.d.ts",
"import": "./16/solid/esm/*.js"
},
"./16/solid/esm/*.js": {
"types": "./16/solid/*.d.ts",
"import": "./16/solid/esm/*.js"
},
"./20/solid": {
"types": "./20/solid/index.d.ts",
"import": "./20/solid/esm/index.js",
"require": "./20/solid/index.js"
},
"./20/solid/*": {
"types": "./20/solid/*.d.ts",
"import": "./20/solid/esm/*.js",
"require": "./20/solid/*.js"
},
"./20/solid/*.js": {
"types": "./20/solid/*.d.ts",
"import": "./20/solid/esm/*.js",
"require": "./20/solid/*.js"
},
"./20/solid/esm/*": {
"types": "./20/solid/*.d.ts",
"import": "./20/solid/esm/*.js"
},
"./20/solid/esm/*.js": {
"types": "./20/solid/*.d.ts",
"import": "./20/solid/esm/*.js"
},
"./24/outline": {
"types": "./24/outline/index.d.ts",
"import": "./24/outline/esm/index.js",
"require": "./24/outline/index.js"
},
"./24/outline/*": {
"types": "./24/outline/*.d.ts",
"import": "./24/outline/esm/*.js",
"require": "./24/outline/*.js"
},
"./24/outline/*.js": {
"types": "./24/outline/*.d.ts",
"import": "./24/outline/esm/*.js",
"require": "./24/outline/*.js"
},
"./24/outline/esm/*": {
"types": "./24/outline/*.d.ts",
"import": "./24/outline/esm/*.js"
},
"./24/outline/esm/*.js": {
"types": "./24/outline/*.d.ts",
"import": "./24/outline/esm/*.js"
},
"./24/solid": {
"types": "./24/solid/index.d.ts",
"import": "./24/solid/esm/index.js",
"require": "./24/solid/index.js"
},
"./24/solid/*": {
"types": "./24/solid/*.d.ts",
"import": "./24/solid/esm/*.js",
"require": "./24/solid/*.js"
},
"./24/solid/*.js": {
"types": "./24/solid/*.d.ts",
"import": "./24/solid/esm/*.js",
"require": "./24/solid/*.js"
},
"./24/solid/esm/*": {
"types": "./24/solid/*.d.ts",
"import": "./24/solid/esm/*.js"
},
"./24/solid/esm/*.js": {
"types": "./24/solid/*.d.ts",
"import": "./24/solid/esm/*.js"
}
},
"publishConfig": {
"access": "public"
},
"peerDependencies": {
"react": ">= 16 || ^19.0.0-rc"
}
}
================================================
FILE: react/solid/index.js
================================================
let proxy = new Proxy(
{},
{
get: (obj, property) => {
if (property === '__esModule') {
return {}
}
throw new Error(
`You\'re trying to import \`@heroicons/react/solid/${property}\` from Heroicons v1 but have installed Heroicons v2. Install \`@heroicons/react@v1\` to resolve this error.`
)
},
}
)
module.exports = proxy
================================================
FILE: scripts/build.js
================================================
const fs = require('fs').promises
const camelcase = require('camelcase')
const { promisify } = require('util')
const rimraf = promisify(require('rimraf'))
const svgr = require('@svgr/core').default
const babel = require('@babel/core')
const { compile: compileVue } = require('@vue/compiler-dom')
const { dirname } = require('path')
const { deprecated } = require('./deprecated')
let transform = {
react: async (svg, componentName, format, isDeprecated) => {
let component = await svgr(svg, { ref: true, titleProp: true }, { componentName })
let { code } = await babel.transformAsync(component, {
plugins: [[require('@babel/plugin-transform-react-jsx'), { useBuiltIns: true }]],
})
// Add a deprecation warning to the component
if (isDeprecated) {
/** @type {string[]} */
let lines = code.split('\n')
lines.splice(1, 0, `/** @deprecated */`)
code = lines.join('\n')
}
code = code.replace('React.forwardRef(', '/*#__PURE__*/ React.forwardRef(')
if (format === 'esm') {
return code
}
return code
.replace('import * as React from "react"', 'const React = require("react")')
.replace('export default', 'module.exports =')
},
vue: (svg, componentName, format, isDeprecated) => {
let { code } = compileVue(svg, {
mode: 'module',
})
// Add a deprecation warning to the component
if (isDeprecated) {
/** @type {string[]} */
let lines = code.split('\n')
lines.splice(2, 0, `/** @deprecated */`)
code = lines.join('\n')
}
if (format === 'esm') {
return code.replace('export function', 'export default function')
}
return code
.replace(
/import\s+\{\s*([^}]+)\s*\}\s+from\s+(['"])(.*?)\2/,
(_match, imports, _quote, mod) => {
let newImports = imports
.split(',')
.map((i) => i.trim().replace(/\s+as\s+/, ': '))
.join(', ')
return `const { ${newImports} } = require("${mod}")`
}
)
.replace('export function render', 'module.exports = function render')
},
}
async function getIcons(style) {
let files = await fs.readdir(`./optimized/${style}`)
return Promise.all(
files.map(async (file) => ({
svg: await fs.readFile(`./optimized/${style}/${file}`, 'utf8'),
componentName: `${camelcase(file.replace(/\.svg$/, ''), {
pascalCase: true,
})}Icon`,
isDeprecated: deprecated.includes(file),
}))
)
}
function exportAll(icons, format, includeExtension = true) {
return icons
.map(({ componentName }) => {
let extension = includeExtension ? '.js' : ''
if (format === 'esm') {
return `export { default as ${componentName} } from './${componentName}${extension}'`
}
return `module.exports.${componentName} = require("./${componentName}${extension}")`
})
.join('\n')
}
async function ensureWrite(file, text) {
await fs.mkdir(dirname(file), { recursive: true })
await fs.writeFile(file, text, 'utf8')
}
async function ensureWriteJson(file, json) {
await ensureWrite(file, JSON.stringify(json, null, 2) + '\n')
}
async function buildIcons(package, style, format) {
let outDir = `./${package}/${style}`
if (format === 'esm') {
outDir += '/esm'
}
let icons = await getIcons(style)
await Promise.all(
icons.flatMap(async ({ componentName, svg, isDeprecated }) => {
let content = await transform[package](svg, componentName, format, isDeprecated)
/** @type {string[]} */
let types = []
if (package === 'react') {
types.push(`import * as React from 'react';`)
if (isDeprecated) {
types.push(`/** @deprecated */`)
}
types.push(`declare const ${componentName}: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string } & React.RefAttributes<SVGSVGElement>>;`)
types.push(`export default ${componentName};`)
} else {
types.push(`import type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue';`)
if (isDeprecated) {
types.push(`/** @deprecated */`)
}
types.push(`declare const ${componentName}: FunctionalComponent<HTMLAttributes & VNodeProps>;`)
types.push(`export default ${componentName};`)
}
return [
ensureWrite(`${outDir}/${componentName}.js`, content),
...(types ? [ensureWrite(`${outDir}/${componentName}.d.ts`, types.join("\n") + "\n")] : []),
]
})
)
await ensureWrite(`${outDir}/index.js`, exportAll(icons, format))
await ensureWrite(`${outDir}/index.d.ts`, exportAll(icons, 'esm', false))
}
/**
* @param {string[]} styles
*/
async function buildExports(styles) {
let pkg = {}
// To appease Vite's optimizeDeps feature which requires a root-level import
pkg[`.`] = {
import: `./index.esm.js`,
require: `./index.js`,
}
// For those that want to read the version from package.json
pkg[`./package.json`] = { default: './package.json' }
// Backwards compatibility with v1 imports (points to proxy that prints an error message):
pkg['./outline'] = { default: './outline/index.js' }
pkg['./outline/index'] = { default: './outline/index.js' }
pkg['./outline/index.js'] = { default: './outline/index.js' }
pkg['./solid'] = { default: './solid/index.js' }
pkg['./solid/index'] = { default: './solid/index.js' }
pkg['./solid/index.js'] = { default: './solid/index.js' }
// Explicit exports for each style:
for (let style of styles) {
pkg[`./${style}`] = {
types: `./${style}/index.d.ts`,
import: `./${style}/esm/index.js`,
require: `./${style}/index.js`,
}
pkg[`./${style}/*`] = {
types: `./${style}/*.d.ts`,
import: `./${style}/esm/*.js`,
require: `./${style}/*.js`,
}
pkg[`./${style}/*.js`] = {
types: `./${style}/*.d.ts`,
import: `./${style}/esm/*.js`,
require: `./${style}/*.js`,
}
// This dir is basically an implementation detail, but it's needed for
// backwards compatibility in case people were importing from it directly.
pkg[`./${style}/esm/*`] = {
types: `./${style}/*.d.ts`,
import: `./${style}/esm/*.js`,
}
pkg[`./${style}/esm/*.js`] = {
types: `./${style}/*.d.ts`,
import: `./${style}/esm/*.js`,
}
}
return pkg
}
async function main(package) {
const cjsPackageJson = { module: './esm/index.js', sideEffects: false }
const esmPackageJson = { type: 'module', sideEffects: false }
console.log(`Building ${package} package...`)
await Promise.all([
rimraf(`./${package}/16/solid/*`),
rimraf(`./${package}/20/solid/*`),
rimraf(`./${package}/24/outline/*`),
rimraf(`./${package}/24/solid/*`),
])
await Promise.all([
buildIcons(package, '16/solid', 'cjs'),
buildIcons(package, '16/solid', 'esm'),
buildIcons(package, '20/solid', 'cjs'),
buildIcons(package, '20/solid', 'esm'),
buildIcons(package, '24/outline', 'cjs'),
buildIcons(package, '24/outline', 'esm'),
buildIcons(package, '24/solid', 'cjs'),
buildIcons(package, '24/solid', 'esm'),
ensureWriteJson(`./${package}/16/solid/esm/package.json`, esmPackageJson),
ensureWriteJson(`./${package}/16/solid/package.json`, cjsPackageJson),
ensureWriteJson(`./${package}/20/solid/esm/package.json`, esmPackageJson),
ensureWriteJson(`./${package}/20/solid/package.json`, cjsPackageJson),
ensureWriteJson(`./${package}/24/outline/esm/package.json`, esmPackageJson),
ensureWriteJson(`./${package}/24/outline/package.json`, cjsPackageJson),
ensureWriteJson(`./${package}/24/solid/esm/package.json`, esmPackageJson),
ensureWriteJson(`./${package}/24/solid/package.json`, cjsPackageJson),
])
let packageJson = JSON.parse(await fs.readFile(`./${package}/package.json`, 'utf8'))
packageJson.exports = await buildExports(['16/solid', '20/solid', '24/outline', '24/solid'])
await ensureWriteJson(`./${package}/package.json`, packageJson)
return console.log(`Finished building ${package} package.`)
}
let [package] = process.argv.slice(2)
if (!package) {
throw new Error('Please specify a package')
}
main(package)
================================================
FILE: scripts/deprecated.js
================================================
module.exports.deprecated = [
'arrow-left-on-rectangle.svg',
'arrow-right-on-rectangle.svg',
'arrow-small-down.svg',
'arrow-small-left.svg',
'arrow-small-right.svg',
'arrow-small-up.svg',
'minus-small.svg',
'plus-small.svg',
]
================================================
FILE: scripts/release-channel.js
================================================
// Given a version, figure out what the release channel is so that we can publish to the correct
// channel on npm.
//
// E.g.:
//
// 1.2.3 -> latest (default)
// 0.0.0-insiders.ffaa88 -> insiders
// 4.1.0-alpha.4 -> alpha
let version =
process.argv[2] || process.env.npm_package_version || require('../package.json').version
let match = /\d+\.\d+\.\d+-(.*)\.\d+/g.exec(version)
if (match) {
console.log(match[1])
} else {
console.log('latest')
}
================================================
FILE: scripts/release-notes.js
================================================
// Given a version, figure out what the release notes are so that we can use this to pre-fill the
// relase notes on a GitHub release for the current version.
let path = require('path')
let fs = require('fs')
let version =
process.argv[2] || process.env.npm_package_version || require('../package.json').version
let changelog = fs.readFileSync(path.resolve(__dirname, '..', 'CHANGELOG.md'), 'utf8')
let match = new RegExp(
`## \\[${version}\\] - (.*)\\n\\n([\\s\\S]*?)\\n(?:(?:##\\s)|(?:\\[))`,
'g'
).exec(changelog)
if (match) {
let [, , notes] = match
console.log(notes.trim())
} else {
console.log(`Placeholder release notes for version: v${version}`)
}
================================================
FILE: scripts/verify-names.js
================================================
const fs = require('fs').promises
const path = require('path')
const { deprecated } = require('./deprecated')
const srcPaths = {
micro: path.resolve(__dirname, '../src/16/solid/'),
mini: path.resolve(__dirname, '../src/20/solid/'),
solid: path.resolve(__dirname, '../src/24/solid/'),
outline: path.resolve(__dirname, '../src/24/outline/'),
}
async function main() {
let files = await Promise.all(
Object.entries(srcPaths).map(async ([name, path]) => {
return { name, files: (await fs.readdir(path)).filter((file) => file.endsWith('.svg')) }
})
)
let diffs = []
for (let current of files) {
for (let other of files) {
if (current === other) continue
for (let file of current.files) {
if (!other.files.includes(file)) {
// Ignore deprecated icons in micro
// They're not going to be added
if (other.name === 'micro' && deprecated.includes(file)) continue
diffs.push({
package: current.name,
file: file,
'Missing in?': other.name,
})
}
}
}
}
if (diffs.length > 0) {
console.table(diffs)
} else {
console.log('All good!')
}
}
main()
================================================
FILE: svgo.16.solid.mjs
================================================
export default {
plugins: [
'preset-default',
'removeDimensions',
'sortAttrs',
'cleanupListOfValues',
{
name: 'removeAttrs',
params: {
attrs: ['fill'],
},
},
{
name: 'addAttributesToSVGElement',
params: {
attributes: [
{
fill: 'currentColor',
'aria-hidden': 'true',
'data-slot': 'icon',
},
],
},
},
],
}
================================================
FILE: svgo.20.solid.mjs
================================================
export default {
plugins: [
'preset-default',
'removeDimensions',
'sortAttrs',
'cleanupListOfValues',
{
name: 'removeAttrs',
params: {
attrs: ['fill'],
},
},
{
name: 'addAttributesToSVGElement',
params: {
attributes: [
{
fill: 'currentColor',
'aria-hidden': 'true',
'data-slot': 'icon',
},
],
},
},
],
}
================================================
FILE: svgo.24.outline.mjs
================================================
export default {
plugins: [
'preset-default',
'removeDimensions',
'sortAttrs',
'cleanupListOfValues',
{
name: 'removeAttrs',
params: {
attrs: ['stroke', 'path:stroke-width'],
},
},
{
name: 'addAttributesToSVGElement',
params: {
attributes: [
{
'stroke-width': '1.5',
stroke: 'currentColor',
'aria-hidden': 'true',
'data-slot': 'icon',
},
],
},
},
],
}
================================================
FILE: svgo.24.solid.mjs
================================================
export default {
plugins: [
'preset-default',
'removeDimensions',
'sortAttrs',
'cleanupListOfValues',
{
name: 'removeAttrs',
params: {
attrs: ['fill'],
},
},
{
name: 'addAttributesToSVGElement',
params: {
attributes: [
{
fill: 'currentColor',
'aria-hidden': 'true',
'data-slot': 'icon',
},
],
},
},
],
}
================================================
FILE: vue/.gitignore
================================================
*
!*.js
!.gitignore
!package.json
!outline
!solid
!LICENSE
!README.md
================================================
FILE: vue/LICENSE
================================================
MIT License
Copyright (c) Tailwind Labs, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: vue/README.md
================================================
<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="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
<img alt="Heroicons" width="315" height="117" style="max-width: 100%" src="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
</picture>
</a>
</p>
<p align="center">Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.<p>
<p align="center">
<a href="https://heroicons.com"><strong>Browse at Heroicons.com →</strong></a>
</p>
<p align="center">
<a href="https://github.com/tailwindlabs/heroicons/releases"><img src="https://img.shields.io/npm/v/@heroicons/vue" alt="Latest Release"></a>
<a href="https://github.com/tailwindlabs/heroicons/blob/master/vue/LICENSE"><img src="https://img.shields.io/npm/l/@heroicons/vue.svg" alt="License"></a>
</p>
## Basic Usage
First, install `@heroicons/vue` from npm:
```sh
npm install @heroicons/vue
```
Now each icon can be imported individually as a Vue component:
```vue
<template>
<div>
<BeakerIcon class="size-6 text-blue-500" />
<p>...</p>
</div>
</template>
<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</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 →](https://unpkg.com/browse/@heroicons/vue/24/outline/)
## 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.
================================================
FILE: vue/index.esm.js
================================================
// The only reason this file exists is to appease Vite's optimizeDeps feature which requires a root-level import.
export default new Proxy(
{},
{
get: (_, property) => {
if (property === '__esModule') {
return {}
}
throw new Error(
`Importing from \`@heroicons/vue\` directly is not supported. Please import from either \`@heroicons/vue/16/solid\`, \`@heroicons/vue/20/solid\`, \`@heroicons/vue/24/solid\`, or \`@heroicons/vue/24/outline\` instead.`
)
},
}
)
================================================
FILE: vue/index.js
================================================
// The only reason this file exists is to appease Vite's optimizeDeps feature which requires a root-level import.
module.exports = new Proxy(
{},
{
get: (_, property) => {
if (property === '__esModule') {
return {}
}
throw new Error(
`Importing from \`@heroicons/vue\` directly is not supported. Please import from either \`@heroicons/vue/16/solid\`, \`@heroicons/vue/20/solid\`, \`@heroicons/vue/24/solid\`, or \`@heroicons/vue/24/outline\` instead.`
)
},
}
)
================================================
FILE: vue/outline/index.js
================================================
let proxy = new Proxy(
{},
{
get: (obj, property) => {
if (property === '__esModule') {
return {}
}
throw new Error(
`You\'re trying to import \`@heroicons/vue/outline/${property}\` from Heroicons v1 but have installed Heroicons v2. Install \`@heroicons/vue@v1\` to resolve this error.`
)
},
}
)
module.exports = proxy
================================================
FILE: vue/package.json
================================================
{
"name": "@heroicons/vue",
"license": "MIT",
"version": "2.2.0",
"description": "A set of free MIT-licensed high-quality SVG icons for UI development.",
"keywords": [
"icons",
"svg",
"vue",
"tailwindcss"
],
"homepage": "https://github.com/tailwindlabs/heroicons#readme",
"repository": {
"type": "git",
"url": "https://github.com/tailwindlabs/heroicons.git"
},
"files": [
"16",
"20",
"24",
"outline",
"solid",
"index.esm.js",
"index.js",
"LICENSE",
"README.md"
],
"sideEffects": false,
"exports": {
".": {
"import": "./index.esm.js",
"require": "./index.js"
},
"./package.json": {
"default": "./package.json"
},
"./outline": {
"default": "./outline/index.js"
},
"./outline/index": {
"default": "./outline/index.js"
},
"./outline/index.js": {
"default": "./outline/index.js"
},
"./solid": {
"default": "./solid/index.js"
},
"./solid/index": {
"default": "./solid/index.js"
},
"./solid/index.js": {
"default": "./solid/index.js"
},
"./16/solid": {
"types": "./16/solid/index.d.ts",
"import": "./16/solid/esm/index.js",
"require": "./16/solid/index.js"
},
"./16/solid/*": {
"types": "./16/solid/*.d.ts",
"import": "./16/solid/esm/*.js",
"require": "./16/solid/*.js"
},
"./16/solid/*.js": {
"types": "./16/solid/*.d.ts",
"import": "./16/solid/esm/*.js",
"require": "./16/solid/*.js"
},
"./16/solid/esm/*": {
"types": "./16/solid/*.d.ts",
"import": "./16/solid/esm/*.js"
},
"./16/solid/esm/*.js": {
"types": "./16/solid/*.d.ts",
"import": "./16/solid/esm/*.js"
},
"./20/solid": {
"types": "./20/solid/index.d.ts",
"import": "./20/solid/esm/index.js",
"require": "./20/solid/index.js"
},
"./20/solid/*": {
"types": "./20/solid/*.d.ts",
"import": "./20/solid/esm/*.js",
"require": "./20/solid/*.js"
},
"./20/solid/*.js": {
"types": "./20/solid/*.d.ts",
"import": "./20/solid/esm/*.js",
"require": "./20/solid/*.js"
},
"./20/solid/esm/*": {
"types": "./20/solid/*.d.ts",
"import": "./20/solid/esm/*.js"
},
"./20/solid/esm/*.js": {
"types": "./20/solid/*.d.ts",
"import": "./20/solid/esm/*.js"
},
"./24/outline": {
"types": "./24/outline/index.d.ts",
"import": "./24/outline/esm/index.js",
"require": "./24/outline/index.js"
},
"./24/outline/*": {
"types": "./24/outline/*.d.ts",
"import": "./24/outline/esm/*.js",
"require": "./24/outline/*.js"
},
"./24/outline/*.js": {
"types": "./24/outline/*.d.ts",
"import": "./24/outline/esm/*.js",
"require": "./24/outline/*.js"
},
"./24/outline/esm/*": {
"types": "./24/outline/*.d.ts",
"import": "./24/outline/esm/*.js"
},
"./24/outline/esm/*.js": {
"types": "./24/outline/*.d.ts",
"import": "./24/outline/esm/*.js"
},
"./24/solid": {
"types": "./24/solid/index.d.ts",
"import": "./24/solid/esm/index.js",
"require": "./24/solid/index.js"
},
"./24/solid/*": {
"types": "./24/solid/*.d.ts",
"import": "./24/solid/esm/*.js",
"require": "./24/solid/*.js"
},
"./24/solid/*.js": {
"types": "./24/solid/*.d.ts",
"import": "./24/solid/esm/*.js",
"require": "./24/solid/*.js"
},
"./24/solid/esm/*": {
"types": "./24/solid/*.d.ts",
"import": "./24/solid/esm/*.js"
},
"./24/solid/esm/*.js": {
"types": "./24/solid/*.d.ts",
"import": "./24/solid/esm/*.js"
}
},
"publishConfig": {
"access": "public"
},
"peerDependencies": {
"vue": ">= 3"
}
}
================================================
FILE: vue/solid/index.js
================================================
let proxy = new Proxy(
{},
{
get: (obj, property) => {
if (property === '__esModule') {
return {}
}
throw new Error(
`You\'re trying to import \`@heroicons/vue/solid/${property}\` from Heroicons v1 but have installed Heroicons v2. Install \`@heroicons/vue@v1\` to resolve this error.`
)
},
}
)
module.exports = proxy
gitextract_r2zrai7b/
├── .github/
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE/
│ │ └── config.yml
│ └── workflows/
│ ├── CI.yml
│ ├── prepare-release.yml
│ ├── release-insiders.yml
│ └── release.yml
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── prettier.config.js
├── react/
│ ├── .gitignore
│ ├── LICENSE
│ ├── README.md
│ ├── index.esm.js
│ ├── index.js
│ ├── outline/
│ │ └── index.js
│ ├── package.json
│ └── solid/
│ └── index.js
├── scripts/
│ ├── build.js
│ ├── deprecated.js
│ ├── release-channel.js
│ ├── release-notes.js
│ └── verify-names.js
├── svgo.16.solid.mjs
├── svgo.20.solid.mjs
├── svgo.24.outline.mjs
├── svgo.24.solid.mjs
└── vue/
├── .gitignore
├── LICENSE
├── README.md
├── index.esm.js
├── index.js
├── outline/
│ └── index.js
├── package.json
└── solid/
└── index.js
SYMBOL INDEX (8 symbols across 2 files)
FILE: scripts/build.js
function getIcons (line 69) | async function getIcons(style) {
function exportAll (line 82) | function exportAll(icons, format, includeExtension = true) {
function ensureWrite (line 94) | async function ensureWrite(file, text) {
function ensureWriteJson (line 99) | async function ensureWriteJson(file, json) {
function buildIcons (line 103) | async function buildIcons(package, style, format) {
function buildExports (line 149) | async function buildExports(styles) {
function main (line 202) | async function main(package) {
FILE: scripts/verify-names.js
function main (line 12) | async function main() {
Condensed preview — 37 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (62K chars).
[
{
"path": ".github/CONTRIBUTING.md",
"chars": 541,
"preview": "# Contributing\n\n## Publishing\n\nThis section is intended only for the project maintainers.\n\n1. Increment the version numb"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 589,
"preview": "blank_issues_enabled: false\ncontact_links:\n - name: Get Help\n url: https://github.com/tailwindlabs/heroicons/discuss"
},
{
"path": ".github/workflows/CI.yml",
"chars": 820,
"preview": "name: CI\n\non:\n push:\n branches: [master]\n pull_request:\n branches: [master]\n\npermissions:\n contents: read\n\nenv:"
},
{
"path": ".github/workflows/prepare-release.yml",
"chars": 1190,
"preview": "name: Prepare Release\n\non:\n workflow_dispatch:\n push:\n tags:\n - 'v*'\n\nenv:\n CI: true\n\npermissions:\n contents"
},
{
"path": ".github/workflows/release-insiders.yml",
"chars": 2067,
"preview": "name: Release Insiders\n\non:\n push:\n branches: [master]\n\npermissions:\n contents: read\n id-token: write\n\nenv:\n CI: "
},
{
"path": ".github/workflows/release.yml",
"chars": 1547,
"preview": "name: Release\n\non:\n release:\n types: [published]\n\npermissions:\n contents: read\n id-token: write\n\nenv:\n CI: true\n\n"
},
{
"path": ".gitignore",
"chars": 36,
"preview": ".DS_Store\n/node_modules\n/16\n/20\n/24\n"
},
{
"path": "CHANGELOG.md",
"chars": 11636,
"preview": "# Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Change"
},
{
"path": "LICENSE",
"chars": 1071,
"preview": "MIT License\n\nCopyright (c) Tailwind Labs, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a "
},
{
"path": "README.md",
"chars": 4167,
"preview": "<p align=\"center\">\n <a href=\"https://heroicons.com\" target=\"_blank\">\n <picture>\n <source media=\"(prefers-color-"
},
{
"path": "package.json",
"chars": 2141,
"preview": "{\n \"name\": \"heroicons\",\n \"license\": \"MIT\",\n \"version\": \"2.2.0\",\n \"description\": \"A set of free MIT-licensed high-qua"
},
{
"path": "prettier.config.js",
"chars": 76,
"preview": "module.exports = {\n singleQuote: true,\n semi: false,\n printWidth: 100,\n}\n"
},
{
"path": "react/.gitignore",
"chars": 70,
"preview": "*\n!*.js\n!.gitignore\n!package.json\n!outline\n!solid\n!LICENSE\n!README.md\n"
},
{
"path": "react/LICENSE",
"chars": 1071,
"preview": "MIT License\n\nCopyright (c) Tailwind Labs, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a "
},
{
"path": "react/README.md",
"chars": 2578,
"preview": "<p align=\"center\">\n <a href=\"https://heroicons.com\" target=\"_blank\">\n <picture>\n <source media=\"(prefers-color-"
},
{
"path": "react/index.esm.js",
"chars": 525,
"preview": "// The only reason this file exists is to appease Vite's optimizeDeps feature which requires a root-level import.\n\nexpor"
},
{
"path": "react/index.js",
"chars": 527,
"preview": "// The only reason this file exists is to appease Vite's optimizeDeps feature which requires a root-level import.\n\nmodul"
},
{
"path": "react/outline/index.js",
"chars": 379,
"preview": "let proxy = new Proxy(\n {},\n {\n get: (obj, property) => {\n if (property === '__esModule') {\n return {}\n"
},
{
"path": "react/package.json",
"chars": 3880,
"preview": "{\n \"name\": \"@heroicons/react\",\n \"license\": \"MIT\",\n \"version\": \"2.2.0\",\n \"description\": \"A set of free MIT-licensed h"
},
{
"path": "react/solid/index.js",
"chars": 377,
"preview": "let proxy = new Proxy(\n {},\n {\n get: (obj, property) => {\n if (property === '__esModule') {\n return {}\n"
},
{
"path": "scripts/build.js",
"chars": 8262,
"preview": "const fs = require('fs').promises\nconst camelcase = require('camelcase')\nconst { promisify } = require('util')\nconst rim"
},
{
"path": "scripts/deprecated.js",
"chars": 243,
"preview": "module.exports.deprecated = [\n 'arrow-left-on-rectangle.svg',\n 'arrow-right-on-rectangle.svg',\n 'arrow-small-down.svg"
},
{
"path": "scripts/release-channel.js",
"chars": 488,
"preview": "// Given a version, figure out what the release channel is so that we can publish to the correct\n// channel on npm.\n//\n/"
},
{
"path": "scripts/release-notes.js",
"chars": 673,
"preview": "// Given a version, figure out what the release notes are so that we can use this to pre-fill the\n// relase notes on a G"
},
{
"path": "scripts/verify-names.js",
"chars": 1209,
"preview": "const fs = require('fs').promises\nconst path = require('path')\nconst { deprecated } = require('./deprecated')\n\nconst src"
},
{
"path": "svgo.16.solid.mjs",
"chars": 456,
"preview": "export default {\n plugins: [\n 'preset-default',\n 'removeDimensions',\n 'sortAttrs',\n 'cleanupListOfValues',\n"
},
{
"path": "svgo.20.solid.mjs",
"chars": 456,
"preview": "export default {\n plugins: [\n 'preset-default',\n 'removeDimensions',\n 'sortAttrs',\n 'cleanupListOfValues',\n"
},
{
"path": "svgo.24.outline.mjs",
"chars": 516,
"preview": "export default {\n plugins: [\n 'preset-default',\n 'removeDimensions',\n 'sortAttrs',\n 'cleanupListOfValues',\n"
},
{
"path": "svgo.24.solid.mjs",
"chars": 456,
"preview": "export default {\n plugins: [\n 'preset-default',\n 'removeDimensions',\n 'sortAttrs',\n 'cleanupListOfValues',\n"
},
{
"path": "vue/.gitignore",
"chars": 70,
"preview": "*\n!*.js\n!.gitignore\n!package.json\n!outline\n!solid\n!LICENSE\n!README.md\n"
},
{
"path": "vue/LICENSE",
"chars": 1071,
"preview": "MIT License\n\nCopyright (c) Tailwind Labs, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a "
},
{
"path": "vue/README.md",
"chars": 2553,
"preview": "<p align=\"center\">\n <a href=\"https://heroicons.com\" target=\"_blank\">\n <picture>\n <source media=\"(prefers-color-"
},
{
"path": "vue/index.esm.js",
"chars": 515,
"preview": "// The only reason this file exists is to appease Vite's optimizeDeps feature which requires a root-level import.\n\nexpor"
},
{
"path": "vue/index.js",
"chars": 517,
"preview": "// The only reason this file exists is to appease Vite's optimizeDeps feature which requires a root-level import.\n\nmodul"
},
{
"path": "vue/outline/index.js",
"chars": 375,
"preview": "let proxy = new Proxy(\n {},\n {\n get: (obj, property) => {\n if (property === '__esModule') {\n return {}\n"
},
{
"path": "vue/package.json",
"chars": 3859,
"preview": "{\n \"name\": \"@heroicons/vue\",\n \"license\": \"MIT\",\n \"version\": \"2.2.0\",\n \"description\": \"A set of free MIT-licensed hig"
},
{
"path": "vue/solid/index.js",
"chars": 373,
"preview": "let proxy = new Proxy(\n {},\n {\n get: (obj, property) => {\n if (property === '__esModule') {\n return {}\n"
}
]
About this extraction
This page contains the full source code of the tailwindlabs/heroicons GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 37 files (56.0 KB), approximately 17.6k tokens, and a symbol index with 8 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.