v2.0.0

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:

v1.0.6	v2.0.10
adjustments	adjustments-vertical
annotation	chat-bubble-bottom-center-text
archive	archive-box
arrow-circle-down	arrow-down-circle
arrow-circle-left	arrow-left-circle
arrow-circle-right	arrow-right-circle
arrow-circle-up	arrow-up-circle
arrow-narrow-down	arrow-long-down
arrow-narrow-left	arrow-long-left
arrow-narrow-right	arrow-long-right
arrow-narrow-up	arrow-long-up
arrow-sm-left	arrow-small-left
arrow-sm-right	arrow-small-right
arrow-sm-up	arrow-small-up
arrow-sm-down	arrow-small-down
arrows-expand	arrows-pointing-out
badge-check	check-badge
ban	no-symbol
bookmark-alt	bookmark-square
cash	banknotes
chart-square-bar	chart-bar-square
chat-alt-2	chat-bubble-left-right
chat-alt	chat-bubble-left-ellipsis
chat	chat-bubble-oval-left-ellipsis
chip	cpu-chip
clipboard-check	clipboard-document-check
clipboard-copy	clipboard-document
clipboard-list	clipboard-document-list
cloud-download	cloud-arrow-down
cloud-upload	cloud-arrow-up
code	code-bracket
collection	rectangle-stack
color-swatch	swatch
cursor-click	cursor-arrow-rays
database	circle-stack
desktop-computer	computer-desktop
device-mobile	device-phone-mobile
document-add	document-plus
document-download	document-arrow-down
document-remove	document-minus
document-report	document-chart-bar
document-search	document-magnifying-glass
dots-circle-horizontal	ellipsis-horizontal-circle
dots-horizontal	ellipsis-horizontal
dots-vertical	ellipsis-vertical
download	arrow-down-tray
duplicate	square-2-stack
emoji-happy	face-smile
emoji-sad	face-frown
external-link	arrow-top-right-on-square
exclamation	exclamation-triangle
eye-off	eye-slash
fast-forward	forward
filter	funnel
folder-add	folder-plus
folder-download	folder-arrow-down
folder-remove	folder-minus
globe	globe-americas
hand	hand-raised
inbox-in	inbox-arrow-down
library	building-library
lightning-bolt	bolt
location-marker	map-pin
login	arrow-left-on-rectangle
logout	arrow-right-on-rectangle
mail-open	envelope-open
mail	envelope
menu-alt-1	bars-3-center-left
menu-alt-2	bars-3-bottom-left
menu-alt-3	bars-3-bottom-right
menu-alt-4	bars-2
menu	bars-3
minus-sm	minus-small
music-note	musical-note
office-building	building-office
pencil-alt	pencil-square
phone-incoming	phone-arrow-down-left
phone-missed-call	phone-x-mark
phone-outgoing	phone-arrow-up-right
photograph	photo
plus-sm	plus-small
puzzle	puzzle-piece
qrcode	qr-code
receipt-tax	receipt-percent
refresh	arrow-path
reply	arrow-uturn-left
rewind	backward
save-as	arrow-down-on-square-stack
save	arrow-down-on-square
search-circle	magnifying-glass-circle
search	magnifying-glass
selector	chevron-up-down
sort-ascending	bars-arrow-up
sort-descending	bars-arrow-down
speakerphone	megaphone
status-offline	signal-slash
status-online	signal
support	lifebuoy
switch-horizontal	arrows-right-left
switch-vertical	arrows-up-down
table	table-cells
template	rectangle-group
terminal	command-line
thumb-down	hand-thumb-down
thumb-up	hand-thumb-up
translate	language
trending-down	arrow-trending-down
trending-up	arrow-trending-up
upload	arrow-up-tray
user-add	user-plus
user-remove	user-minus
view-boards	view-columns
view-grid-add	squares-plus
view-grid	squares-2x2
view-list	bars-4
volume-off	speaker-x-mark
volume-up	speaker-wave
x	x-mark
zoom-in	magnifying-glass-plus
zoom-out	magnifying-glass-minus