Heroicons

Fixed

• Modify the curved design of the check-* icons to a straight check (#762)

Fixed

• Remove additional stroke from outline icons (bars-arrow-down,bars-arrow-up,chevron-up-down, rss) (#759)

Added

• Add missing icons from v1 (bars-arrow-down,bars-arrow-up,chevron-up-down, rss) (#758)

Fixed

• Fix inconsistent naming for 'code-bracket' icons (#756)

Fixed

• Fix typo in exclamation-* icons (#735)

Added

• Warn when trying to import from v1 paths (f508658)

We just released Heroicons v2.0 — a brand new icon set, illustrated from scratch, that includes icons in three distinct styles.

• Outline — line icons with a 1.5px stroke, drawn in a 24px view box.
• Solid — solid icons with filled shapes, drawn in a 24px view box.
• Mini — solid icons with filled shapes, drawn in a 20px view box.

Check out all of the new icons on the redesigned Heroicons v2.0 website.

Upgrading from v1

Heroicons v2.0 is a brand new icon set with a different visual style, so don't feel like you need to upgrade to avoid "being on the old version".

If you like how the v1 icons look in your project, stick with them! Heroicons v2 is more like Terminator 2 than OpenSSL 2 — they represent our best work but these are just little SVG pictures, the version you choose to use is personal preference, not a technical decision.

If you do want to upgrade to v2, understand that because it's an all-new icon set, switching to Heroicons v2 is more like migrating to a new icon set than it is just updating a dependency in your project. We've tried to make it pretty smooth, but because it's a new set, a lot things like import paths and icon names have changed, so there is some manual work involved in migrating.

Update dependencies

Install the latest version of the package you're using via npm:

# Using React
npm install @heroicons/react@latest

# Using Vue
npm install @heroicons/vue@latest

Update imports

Since Heroicons v2.0 comes with a new third style, we've updated the import paths for all of the icons to make them more explicit and future-proof.

# Using React

- import { ... } from '@heroicons/react/solid'
+ import { ... } from '@heroicons/react/20/solid'

- import { ... } from '@heroicons/react/outline'
+ import { ... } from '@heroicons/react/24/outline'

# Using Vue

- import { ... } from '@heroicons/vue/solid'
+ import { ... } from '@heroicons/vue/20/solid'

- import { ... } from '@heroicons/vue/outline'
+ import { ... } from '@heroicons/vue/24/outline'

Update icon names

Many of the icons have been renamed to more literal names that describe what the icon is, instead of describing what the icon should be used for. For example, mail has been renamed to envelope, and search has been renamed to magnifying-glass.

Here is a list of all of the icons that have been renamed along with their updated names:

Added

• Add forwardRef support for React components (#614)

Fixed

• Add sideEffects to package.json files (#572)
• Fix folder icons (#598)
• Fix Vue TypeScript declarations (#608)
• Move stroke-width from path to svg (#631)

Fixed

• Add MIT license to package.json files (#317)
• Add aria-hidden="true" attribute (#261)
• Fix solid arrows-expand fill color (#515)
• Add {"type": "module"} to esm package.json files

Fixed

• Fix Vue type declarations (#322)

Added

• Add Vue type declarations (#254)

Fixed

• Add correct plus icons

Added

• Add small arrow icons (arrow-sm-up, arrow-sm-right, arrow-sm-down, arrow-sm-left)

• Don't run build scripts on install