Index

import { adamwathan } from "@/app/blog/authors"; import card from "./card.jpg"; import { Image } from "@/components/media"; import Link from "next/link"; import { CodeBlock } from "@/components/code-example";

export const meta = { title: "Heroicons v1.0", description: Today we're releasing Heroicons v1.0, which includes over 450+ free icons in two styles, official React and Vue libraries, and Figma assets., date: "2021-03-29T19:00:00.000Z", authors: [adamwathan], image: card, excerpt: ( <> Just over a year ago we released the very first version of <Link href="https://heroicons.com">Heroicons</Link>, which is a set of beautiful UI icons we designed alongside Tailwind UI. Since then we've added tons of new icons, and designed and launched a dedicated web experience. Today we're excited to finally release Heroicons v1.0, which includes over 450+ free icons in two styles, official React and Vue libraries, and Figma assets. </> ), };

React + Vue libraries

In addition to grabbing the icons you need directly from the website, you can now install our official React and Vue libraries for quick and easy access to each icon as a dedicated component.

Here's what it looks like with React for example:

import { BeakerIcon } from "@heroicons/react/solid";

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500" />
      <p>...</p>
    </div>
  );
}

Figma assets

We've also published an official <Link href="https://www.figma.com/community/file/958423903283802665/heroicons">Heroicons Figma file</Link> on our new Figma Community page!

It includes all the icons from Heroicons as individual Figma components so you can easily use them in your projects without having to manually import each SVG.

Want to start playing with it? <Link href="https://heroicons.com">Visit the Heroicons website →</Link>