@heroicons/react

About

<p align="center"> <a href="https://heroicons.com" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-dark.svg"> <source media="(pref

What detecting @heroicons/react tells you about a site

@heroicons/react is Tailwind Labs' own icon set, hand-tuned to pair with Tailwind CSS, so spotting it is a strong signal the site lives in the official Tailwind ecosystem and was likely built by people who follow that crew's conventions. The icons come in outline and solid variants at fixed sizes, which tells you the design leans on Tailwind's utility-driven, systematic look rather than a custom illustration pipeline. It is a small, focused dependency, so its presence reads as taste and alignment more than as a heavyweight commitment.

Why the exact @heroicons/react version matters

Heroicons v2 was a full redraw and reorganisation versus v1, changing icon names, sizes and import paths, so the major version tells you which generation of the artwork and API the build targets. A v1 footprint dates the project and implies older Tailwind-era tooling, while v2 aligns with the modern 20px/24px outline-and-solid structure.

@heroicons/react in a real-world stack

When you find @heroicons/react in a bundle, it rarely travels alone. Tailwind CSS, and frequently Next.js or another React framework.

Quick facts

Common pairings

Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.

How Sourcemap Explorer detects @heroicons/react

@heroicons/react ships as v2.2.0, published 2024-11-18 and carries 0 direct dependencies, 1 peer dependency (react), 127 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when @heroicons/react rides inside a deployed bundle — here is how the detection works.

We catch @heroicons/react from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/@heroicons/react/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.

1. 1

   Confirm the site exposes sourcemaps

   In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment — that map is where the `@heroicons/react` paths live.

2. 2

   Find the package in the bundle

   Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/@heroicons/react/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/@heroicons/react/package.json` gives you the exact installed version.

3. 3

   Read the version directly from package.json

   Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/@heroicons/react/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.

Major releases of @heroicons/react

When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the @heroicons/react version a site actually ships against the ecosystem.

Recent versions

@heroicons/react README

Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.

<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>

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>
  )
}

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>

FAQ