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/@latestUpdate 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.
We're working on an official list that maps the old icon names to the new icon names that I'll update the release notes with in the next few days, but in the mean time several helpful community members have put together a working list in this issue:
Some icons from v1 don't exist in v2. Many of these we are currently redrawing and will add back over the next few days, but a few others likely won't return, notably the arrow-sm-{direction} icons. Instead, we're hoping to release a micro set with those smaller icons, since in hindsight it feels wrong to mix sizes within a single style. Even for those icons though we're planning to redraw them in both 24px and 20px artboards and update this guide to include the raw source for them, so you can still pull those SVGs into your projects even though we don't plan to include them in the library itself.