If you're looking for a simple and attractive SVG icon collection for your react applications, HeroIcons is the library for you.

HeroIcons have Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Which can be easily used with react projects.

How to Use In Your Project

Photo by Balázs Kétyi / Unsplash

There are a few ways you can use HeroIcon with your projects.

The quickest method for using these icons is just to copy the source code from heroicons.com and paste it into your JSX code.

<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>

SVG code

The example below is show How we can create a reusable Icon component with SVG which can be easily customised and can use in many places in your application.

Using this kind of component you are able to add custom class names, width and height. also, you may add more props as you wish.

import React from "react";

export default function DarftIcon({ className, width, height }) {
  let classNames = "";
  width ? (classNames += `w-${width} `) : (classNames += `w-6 `);
  height ? (classNames += `h-${height} `) : (classNames += `h-6 `);
  className && (classNames += `${className} `);

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={classNames}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
      />
    </svg>
  );
}

---

HeroIcon also provides Library for React to use their icon easily and like reusable components as we did earlier.

To use this library First, you need to install @heroicons/react it on npm by running the following command.

npm install @heroicons/react

Now each icon can be imported individually as a React component:

import { BeakerIcon } from '@heroicons/react/24/solid'

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

If you need 24x24 outline icons you can be imported them from @heroicons/react/24/outline.

20x20 size can also be used in this library by import like this.

• @heroicons/react/24/outline for 20x20 outline Icons

• @heroicons/react/24/solid for 20x20 solid Icons

To See more guides and all icons provided by HeroIcons you can visit their site.