@heroicons/react 2.0.0

on Node.js NPM

The all new Heroicons v2.0 is here!

All the icons have been redrawn from scratch, and are now available in three styles:

1. An outline style with a 1.5px stroke in a 24px bounding box
2. A solid style in a 24px bounding box
3. A mini solid style in a 20px bounding box

Check them out on the website: https://heroicons.com

Upgrade Guide

To upgrade to v2, you can install the new icon package using the @latest flag:

• npm install @heroicons/react@latest
• npm install @heroicons/vue@latest
• npm install heroicons@latest

Once installed you'll need to update your icon imports as they have changed slightly to support multiple sizes per style.

# React (solid)
- import { ... } from '@heroicons/react/solid'
+ import { ... } from '@heroicons/react/20/solid'

# React (outline)
- import { ... } from '@heroicons/react/outline'
+ import { ... } from '@heroicons/react/24/outline'

# Vue (solid)
- import { ... } from '@heroicons/vue/solid'
+ import { ... } from '@heroicons/vue/20/solid'

# Vue (outline)
- import { ... } from '@heroicons/vue/outline'
+ import { ... } from '@heroicons/vue/24/outline'

A number of icons have also been renamed. For example, the "mail" icon has been renamed to "envelope" and the "search" icon has been renamed to "magnifying glass". This naming more accurately describes what the icon is without making assumptions about how it's being used.

Using v1

If you'd like to continue using the v1 icons, you can install them using the @v1 flag:

• npm install @heroicons/react@v1
• npm install @heroicons/vue@v1