Releases: tailwindlabs/heroicons
v2.0.5
v2.0.4
v2.0.3
v2.0.2
v2.0.1
v2.0.0
76b6af6
RobinMalfait
Robin Malfait
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.
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-c... |
