Heroicons

To use Heroicons as React components, install the @heroicons/react package.

Icons follow an upper camel case naming convention and are always suffixed with Icon. You can import them from specific sub-paths depending on the icon size and style:

• 24/outline: 24x24 outline icons
• 24/solid: 24x24 solid icons
• 20/solid: 20x20 solid icons
• 16/solid: 16x16 solid icons

npm install @heroicons/react

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

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

The fastest way to use Heroicons without installing any packages is to copy the SVG source directly from heroicons.com and paste it into your HTML.

The icons are preconfigured to be stylable via the color CSS property. You can apply colors manually or use utility classes (like Tailwind CSS) to style them.

<svg
  class="size-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>

To use Heroicons as Vue components, install the @heroicons/vue package.

Icons follow an upper camel case naming convention and are always suffixed with Icon. You can import them from specific sub-paths depending on the icon size and style:

• 24/outline: 24x24 outline icons
• 24/solid: 24x24 solid icons
• 20/solid: 20x20 solid icons
• 16/solid: 16x16 solid icons

npm install @heroicons/vue

<template>
  <div>
    <BeakerIcon class="size-6 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>

The Heroicons repository uses a specific Prettier configuration to maintain code style. If you are contributing to or using the codebase as a reference, follow these formatting rules:

• Use singleQuote: true to enforce single quotes.
• Use semi: false to omit semicolons.
• Use printWidth: 100 to set the line length limit to 100 characters.

module.exports = {
  singleQuote: true,
  semi: false,
  printWidth: 100,
}

Direct imports from the @heroicons/vue package root are not supported. To use Heroicons in a Vue project, you must import from one of the specific sub-paths that correspond to the icon size and style you need.

Available import paths:

• @heroicons/vue/16/solid
• @heroicons/vue/20/solid
• @heroicons/vue/24/solid
• @heroicons/vue/24/outline

// Incorrect
import { BeakerIcon } from '@heroicons/vue'

// Correct
import { BeakerIcon } from '@heroicons/vue/24/outline'

You cannot import components directly from the @heroicons/react entrypoint. Doing so will throw an error. Instead, you must import icons from one of the specific subpaths corresponding to the icon size and style you want to use.

Supported subpaths:

• @heroicons/react/16/solid
• @heroicons/react/20/solid
• @heroicons/react/24/solid
• @heroicons/react/24/outline

// Incorrect
import { BeakerIcon } from '@heroicons/react';

// Correct
import { BeakerIcon } from '@heroicons/react/24/solid';
import { BeakerIcon } from '@heroicons/react/24/outline';
import { BeakerIcon } from '@heroicons/react/20/solid';
import { BeakerIcon } from '@heroicons/react/16/solid';

If you attempt to import icons from @heroicons/react/solid/ using the Heroicons v1 path structure while having Heroicons v2 installed, the package will throw a specific error. To resolve this, you must either update your import paths to match the v2 structure or downgrade your installation to @heroicons/react@v1.

Error: You're trying to import `@heroicons/react/solid/${property}` from Heroicons v1 but have installed Heroicons v2. Install `@heroicons/react@v1` to resolve this error.

You cannot import directly from the @heroicons/react package root. Doing so will throw an error. Instead, you must import icons from one of the specific sub-paths corresponding to the icon size and style you want to use.

Supported import paths:

• @heroicons/react/16/solid
• @heroicons/react/20/solid
• @heroicons/react/24/solid
• @heroicons/react/24/outline

// ❌ Incorrect
import { BeakerIcon } from '@heroicons/react';

// ✅ Correct
import { BeakerIcon } from '@heroicons/react/24/outline';

The @heroicons/vue/outline entrypoint is designed to prevent accidental usage of v1 import patterns when using Heroicons v2. If you attempt to import an icon using the v1 syntax (e.g., import { IconName } from '@heroicons/vue/outline'), the package will throw an error to guide you toward the correct v2 usage.

To use Heroicons v2 in Vue, ensure you are importing icons from the correct sub-paths provided by the @heroicons/vue package, rather than relying on the legacy v1 structure.

// This will throw an error if you use v1 import patterns with v2 installed:
// import { BeakerIcon } from '@heroicons/vue/outline'

// Instead, use the correct v2 paths provided by the package.

The @heroicons/vue/solid entrypoint is designed to prevent accidental usage of Heroicons v1 import patterns when using Heroicons v2.

If you attempt to import a specific icon using the v1 style (e.g., import { BeakerIcon } from '@heroicons/vue/solid/BeakerIcon'), the package will throw an error instructing you to install @heroicons/vue@v1 to resolve the conflict.

To use Heroicons v2 with Vue, ensure you are importing icons directly from the package or following the v2 pattern supported by your specific installation.

// This will trigger the error if you use v1 patterns with v2 installed:
import { BeakerIcon } from '@heroicons/vue/solid/BeakerIcon'