Heroicons 2.0 are here

News

August 26th, 2022

Heroicons 2.0 are here

The makers of Tailwind CSS released Heroicons 2.0, a set of 264 hand-crafted SVG icons for the web. These icons are redrawn from scratch and feature a 24px solid set:

You can either copy the SVG straight from the Heroicons website into your project, or use the first-party React and Vue libraries:

1// React JS - npm install @heroicons/react
2import { BeakerIcon } from '@heroicons/react/24/solid'
3 
4function MyComponent() {
5 return (
6 <div>
7 <BeakerIcon className="h-6 w-6 text-blue-500"/>
8 <p>...</p>
9 </div>
10 )
11}

And here's what the Vue 3 integration looks like:

1<template>
2 <div>
3 <BeakerIcon class="h-6 w-6 text-blue-500"/>
4 <p>...</p>
5 </div>
6</template>
7 
8<script>
9// Vue 3 - npm install @heroicons/vue
10import { BeakerIcon } from '@heroicons/vue/24/solid'
11 
12export default {
13 components: { BeakerIcon }
14}
15</script>

Heroicons 2.0 also has a Figma file, which you can use in your design projects. Get started today by checking them out on heroicons.com.

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.