Heroicons

https://github.com/tailwindlabs/heroicons
Admin
A set of free MIT-licensed high-quality SVG icons for UI development.
Tokens:29,350
Snippets:178
Trust Score:9.3
License:MIT
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Install @heroicons/react

Source: https://github.com/tailwindlabs/heroicons/blob/master/react/README.md

Install the @heroicons/react package from npm before importing icons.

```sh
npm install @heroicons/react
```

--------------------------------

### Install @heroicons/vue with npm

Source: https://github.com/tailwindlabs/heroicons/blob/master/vue/README.md

Install the @heroicons/vue package from npm.

```sh
npm install @heroicons/vue
```

--------------------------------

### release-notes CLI usage examples

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/cli-scripts.md

Shows how to run the release-notes script. Without arguments it uses the package.json version; with a version argument it extracts notes for that version.

```shell
npm run release-notes              # notes for package.json version
npm run release-notes -- 2.1.5     # notes for 2.1.5
```

--------------------------------

### release-channel CLI usage examples

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/cli-scripts.md

Shows how to run the release-channel script with a version argument. The first command outputs 'latest' for a stable version, the second outputs 'beta' for a prerelease.

```shell
npm run release-channel -- 2.2.0        # latest
npm run release-channel -- 0.0.0-beta.2 # beta
```

--------------------------------

### Install heroicons via npm

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/heroicons-svg-package.md

Install the heroicons package using npm.

```sh
npm install heroicons
```

--------------------------------

### Check deprecated registry with require

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/cli-scripts.md

Shows how to import and check the deprecated registry. The example logs true for 'plus-small.svg'.

```javascript
const { deprecated } = require('./scripts/deprecated')
console.log(deprecated.includes('plus-small.svg')) // true
```

--------------------------------

### Error handling for missing package argument

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-script.md

Throws an error when no package argument is provided. The example shows the check and the resulting error message when running the script without arguments.

```javascript
let [package] = process.argv.slice(2)

if (!package) {
  throw new Error('Please specify a package')
}
```

```shell
node ./scripts/build.js
# Uncaught Error: Please specify a package
```

--------------------------------

### Error handling for incorrect Heroicons imports

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/vue-package.md

Error handling example showing that importing from '@heroicons/vue' directly or using v1-style subpaths throws an error. The code demonstrates catching the error and logging the message. This is useful for debugging import issues.

```js
// Any property access (other than `__esModule`) on these throws:
//   "@heroicons/vue"                  -> "Importing from `@heroicons/vue` directly is not supported. ..."
//   "@heroicons/vue/outline/BeakerIcon" -> "You're trying to import `@heroicons/vue/outline/BeakerIcon` from Heroicons v1 but have installed Heroicons v2."
import Vue from 'vue'
import pkg from '@heroicons/vue'

try {
  const { BeakerIcon } = pkg
} catch (error) {
  console.error(error.message)
}
```

--------------------------------

### v1-compat proxy error in react/outline/index.js

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/errors.md

Proxy that throws an error when accessing any property other than `__esModule` on the v1-compat root import. Used in `react/outline/index.js` to signal that Heroicons v2 is installed but v1 imports are attempted.

```javascript
let proxy = new Proxy(
  {},
  {
    get: (obj, property) => {
      if (property === '__esModule') {
        return {}
      }

      throw new Error(
        `You\'re trying to import \`@heroicons/react/outline/${property}\` from Heroicons v1 but have installed Heroicons v2. Install \`@heroicons/react@v1\` to resolve this error.`
      )
    },
  }
)

module.exports = proxy
```

--------------------------------

### Deprecated icon type declaration (ArrowSmallDownIcon.d.ts)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-package.md

Example of a deprecated icon's `.d.ts` file, showing the injected `/** @deprecated */` comment. Only icons listed in `scripts/deprecated.js` get this marker.

```typescript
import * as React from 'react';
/** @deprecated */
declare const ArrowSmallDownIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string } & React.RefAttributes<SVGSVGElement>>;
export default ArrowSmallDownIcon;
```

--------------------------------

### Catching the root import error

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/errors.md

Shows how to catch the error thrown when accessing a property on the root import. The get trap fires on property access, so the try/catch captures the Error and logs its message.

```javascript
import heroiconsRoot from '@heroicons/react'

try {
  const { BeakerIcon } = heroiconsRoot  // triggers the get trap -> throws
} catch (error) {
  console.error(error.message)
  // "Importing from `@heroicons/react` directly is not supported. ..."
}
```

--------------------------------

### CLI failure examples for missing or unsupported package

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/errors.md

Shows the failure modes of the generator CLI: running without an argument raises an uncaught Error, while passing an unsupported package (e.g. `svelte`) reaches `transform[package]` and raises `TypeError: transform.svelte is not a function` from `scripts/build.js:110`. Only `react` and `vue` are supported.

```sh
node ./scripts/build.js   # Uncaught Error: Please specify a package
node ./scripts/build.js svelte  # TypeError: transform.svelte is not a function
```

--------------------------------

### Inline SVG icon in HTML

Source: https://github.com/tailwindlabs/heroicons/blob/master/README.md

Inline SVG icon example from Heroicons. Copy the source from heroicons.com and paste directly into HTML. The icon is preconfigured to be stylable via the `color` CSS property, e.g., using utility classes like `text-gray-500`.

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

--------------------------------

### Generated Vue icon type declaration for BeakerIcon

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Example generated .d.ts file for the BeakerIcon in the Vue package (vue/24/solid/BeakerIcon.d.ts). It declares the icon as a FunctionalComponent accepting HTMLAttributes and VNodeProps, and exports it as default.

```typescript
import type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue';
declare const BeakerIcon: FunctionalComponent<HTMLAttributes & VNodeProps>;
export default BeakerIcon;
```

--------------------------------

### Deprecated icon with @deprecated comment

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/vue-package.md

Example of a deprecated icon's ESM source. The /** @deprecated */ comment is injected on line 2 of the render function for ESM variants, as described in the deprecation section.

```javascript
import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
/** @deprecated */
export default function render(_ctx, _cache) { ... }
```

--------------------------------

### main(package) function implementation

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-script.md

Builds one entire framework package. It sets up CJS and ESM package.json contents, then performs steps: wiping style directories, building icons in parallel, and merging exports into the package's package.json. The function logs progress and returns a Promise that resolves when finished.

```javascript
async function main(package) {
  const cjsPackageJson = { module: './esm/index.js', sideEffects: false }
  const esmPackageJson = { type: 'module', sideEffects: false }
  // 1. rimraf ./{package}/{16/solid,20/solid,24/outline,24/solid}/*
  // 2. buildIcons(...) for all 4 styles x {cjs, esm}, in parallel
  //    + ensureWriteJson of the style package.json files (cjs) and esm/package.json (esm)
  // 3. read ./{package}/package.json, set packageJson.exports = await buildExports([...]),
  //    write it back
}
```

--------------------------------

### Basic invocation commands

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-script.md

Shows how to run the build for React and Vue packages using npm scripts. These commands invoke the build script with the package name as an argument.

```shell
npm run build-react   # node ./scripts/build.js react
npm run build-vue     # node ./scripts/build.js vue
```

--------------------------------

### Run npm run lint (success)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/cli-scripts.md

Basic usage of the icon-name consistency linter. When all icon sets match, prints 'All good!'.

```shell
npm run lint
# All good!
```

--------------------------------

### Run svgo CLI with a config file

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svgo-config.md

Command to execute svgo with a specific config file, processing all SVGs in a source directory and outputting optimized files. The --pretty and --indent=2 flags format the output.

```sh
svgo --config=svgo.24.outline.mjs -f ./src/24/outline -o ./optimized/24/outline --pretty --indent=2
```

--------------------------------

### verify-names.js main() placeholder

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/cli-scripts.md

Placeholder for the main function in scripts/verify-names.js. Reads .svg filenames from all four srcPaths, compares sets, prints a diff table or 'All good!'. No explicit exit-code handling; the reliable signal is the absence of 'All good!' on stdout.

```javascript
async function main() { ... }
```

--------------------------------

### Error handling and correct import paths for Heroicons v2

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-package.md

Shows the error handling when importing from the package root or v1 paths, and demonstrates the correct import subpaths for Heroicons v2. The root import returns a proxy that throws on property access, and v1 paths produce a specific error message.

```js
// Compile-time/runtime error if you use the package root or v1 paths:
//   "@heroicons/react"                 -> "Importing from `@heroicons/react` directly is not supported. ..."
//   "@heroicons/react/outline/XIcon"   -> "You're trying to import `@heroicons/react/outline/XIcon` from Heroicons v1 but have installed Heroicons v2."
try {
  const bad = require('@heroicons/react')          // Proxy object — any property access (except __esModule) throws
  bad.BeakerIcon
} catch (error) {
  console.error(error.message)
}

// Correct imports:
import { BeakerIcon } from '@heroicons/react/24/solid'    // solid 24x24
import { ArrowDownIcon } from '@heroicons/react/16/solid' // solid 16x16
import { BeakerIcon as OutlineBeaker } from '@heroicons/react/24/outline'

```

--------------------------------

### Import and use an icon component

Source: https://github.com/tailwindlabs/heroicons/blob/master/react/README.md

Import an icon as a React component and render it with a className. Icons use upper camel case naming and are suffixed with 'Icon'.

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

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

--------------------------------

### SVGO config for 24x24 solid icons (svgo.24.solid.mjs)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svgo-config.md

SVGO configuration for 24x24 solid icons. Uses preset-default, removeDimensions, sortAttrs, and cleanupListOfValues. The removeAttrs plugin strips the literal fill="#0F172A" from the hand-authored source, and addAttributesToSVGElement injects fill="currentColor" (CSS-colorable), hides from assistive tech, and adds the data-slot="icon" marker.

```javascript
export default {
  plugins: [
    'preset-default',
    'removeDimensions',
    'sortAttrs',
    'cleanupListOfValues',
    {
      name: 'removeAttrs',
      params: {
        attrs: ['fill'],
      },
    },
    {
      name: 'addAttributesToSVGElement',
      params: {
        attributes: [
          {
            fill: 'currentColor',
            'aria-hidden': 'true',
            'data-slot': 'icon',
          },
        ],
      },
    },
  ],
}
```

--------------------------------

### React Icon Components

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-package.md

Documentation for the Heroicons React icon components, describing their signature, props, attribute defaults, return type, and deprecation behavior.

```APIDOC
## React Component: Icon Components

### Description
Each icon is a single named export (also the default export of its own file). All 324 icons of one style are exported from the style aggregator. Convention: upper-camel-case filename + `Icon` suffix (`beaker` → `BeakerIcon`, `arrow-down` → `ArrowDownIcon`, `at-symbol` → `AtSymbolIcon`, `h1` → `H1Icon`).

### Signature
Each icon component is a forward-ref-wrapped React component. The generated ESM source for `react/24/solid/BeakerIcon.js` (esm variant) is:

```js
import * as React from "react";
function BeakerIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /*#__PURE__*/React.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /*#__PURE__*/React.createElement("title", {
    id: titleId
  }, title) : null, /*#__PURE__*/React.createElement("path", {
    fillRule: "evenodd",
    d: "M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z",
    clipRule: "evenodd"
  }));
}
const ForwardRef = /*#__PURE__*/ React.forwardRef(BeakerIcon);
export default ForwardRef;
```

CJS variant (`react/24/solid/BeakerIcon.js`) differs only in the header/footer:

```js
const React = require("react");
...
module.exports = ForwardRef;
```

The component is passed through `React.forwardRef`, so it can receive a `ref` to the inner `<svg>` element.

### Parameters (props)

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| `title` | `string` | no | — (absent) | Renders a `<title id={titleId}>` child element and sets `aria-labelledby={titleId}` on the `<svg>` |
| `titleId` | `string` | no | — (absent) | `id` for the generated `<title>`, referenced by `aria-labelledby` |
| `...props` | `React.SVGProps<SVGSVGElement>` | no | — | Spread onto the `<svg>` element via `Object.assign`, overriding the hard-coded defaults (`viewBox`, fill/stroke, `aria-hidden`, `data-slot`) as needed |
| `svgRef` | `React.Ref<SVGSVGElement>` (second positional arg, via `forwardRef`) | no | — | Forwarded to the `<svg ref={svgRef}>` attribute |

### Attribute defaults (per style)

Set on every `<svg>` unless overridden via `...props`:

- **Solid** (`16/solid`, `20/solid`, `24/solid`): `xmlns="http://www.w3.org/2000/svg"`, `viewBox="0 0 N N"`, `fill="currentColor"`, `aria-hidden="true"`, `data-slot="icon"`. Path props: `fillRule="evenodd"`, `d`, and (16/20/24 solid) `clipRule="evenodd"`.
- **Outline** (`24/outline`): same root set but `fill="none"`, `stroke="currentColor"`, `stroke-width="1.5"` on the root; path props: `strokeLinecap="round"`, `strokeLinejoin="round"`, `d`.

### Return type

A forward-ref-wrapped React component (`React.ForwardRefExoticComponent<...>`; exact type in [types.md](../types.md)). When rendered it produces an `<svg>` with the icon's `<path>` children.

### Deprecation

Components generated from files listed in `scripts/deprecated.js` get a `/** @deprecated */` doc comment injected as the second line of both the `.js` and the `.d.ts` (see `buildIcons` in `scripts/build.js`). Example (`react/24/solid/ArrowSmallDownIcon.d.ts`):

```ts
import * as React from 'react';
/** @deprecated */
declare const ArrowSmallDownIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string } & React.RefAttributes<SVGSVGElement>>;
export default ArrowSmallDownIcon;
```
```

--------------------------------

### Basic usage of transform.react

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-script.md

Shows how to call `transform.react` with an SVG file, component name, format, and deprecation flag. Reads the SVG from `./optimized/24/solid/beaker.svg` and returns a promise for the component source.

```javascript
const { transform } = require('./scripts/build.js')

const svg = await fs.readFile('./optimized/24/solid/beaker.svg', 'utf8')
const component = await transform.react(svg, 'BeakerIcon', 'esm', false)
```

--------------------------------

### verify-names.js srcPaths configuration

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/cli-scripts.md

Internal configuration for scripts/verify-names.js: maps style names to source directories. The linter compares icon name sets across these four directories.

```javascript
const srcPaths = {
  micro: path.resolve(__dirname, '../src/16/solid/'),
  mini: path.resolve(__dirname, '../src/20/solid/'),
  solid: path.resolve(__dirname, '../src/24/solid/'),
  outline: path.resolve(__dirname, '../src/24/outline/'),
}
```

--------------------------------

### Load icon as text in Node/JS (ESM)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/heroicons-svg-package.md

Use this Node/JS snippet to load an icon file as text in a build process. It resolves the path to the beaker.svg file and reads it with fs.readFileSync.

```js
// Load an icon as text in a Node/JS build process
import fs from 'node:fs'
import { createRequire } from 'node:module'

const require = createRequire(import.meta.url)
const iconPath = require.resolve('heroicons/24/solid/beaker.svg')

const svg = fs.readFileSync(iconPath, 'utf8')
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" ...>
```

--------------------------------

### Solid style beaker.svg (24/solid)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/heroicons-svg-package.md

Exact contents of optimized/24/solid/beaker.svg. Root svg has fill="currentColor", aria-hidden="true", data-slot="icon". Path retains fill-rule="evenodd" and clip-rule attributes.

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z" clip-rule="evenodd"/>
</svg>
```

--------------------------------

### Import and use a Heroicon as a Vue component

Source: https://github.com/tailwindlabs/heroicons/blob/master/vue/README.md

Shows how to import an icon (e.g., BeakerIcon) from @heroicons/vue/24/solid and use it in a Vue template. The icon is used with a class attribute for styling.

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

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

--------------------------------

### release-channel.js: Determine npm release channel

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/cli-scripts.md

Reads a version from CLI argument, npm_package_version env var, or package.json. Matches against a regex to extract a prerelease label, printing it or 'latest' if no match. Never throws on no match.

```javascript
// Given a version, figure out what the release channel is so that we can publish to the correct
// channel on npm.

let version =
  process.argv[2] || process.env.npm_package_version || require('../package.json').version

let match = /\d+\.\d+\.\d+-(.*)(\.\d+)?/g.exec(version)
if (match) {
  console.log(match[1])
} else {
  console.log('latest')
}
```

--------------------------------

### release-notes.js: Extract changelog notes for a version

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/cli-scripts.md

Reads CHANGELOG.md from the repo root and extracts the notes block for a given version using a regex. Falls back to a placeholder message if the version is not found.

```javascript
// Given a version, figure out what the release notes are so that we can use this to pre-fill the
// release notes on a GitHub release for the current version.

let path = require('path')
let fs = require('fs')

let version =
  process.argv[2] || process.env.npm_package_version || require('../package.json').version

let changelog = fs.readFileSync(path.resolve(__dirname, '..', 'CHANGELOG.md'), 'utf8')
let match = new RegExp(
  `## \\[${version}\\] - (.*)\\n\\n([\\s\\S]*?)\\n(?:(?:##\\s)|(?:\\[))`,
  'g'
).exec(changelog)
```

--------------------------------

### Basic Heroicons React icon usage

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-package.md

Basic usage of a Heroicons v2 React icon. Import the icon from the '@heroicons/react/24/solid' subpath and render it as a component, passing className for sizing and color (e.g., 'size-6 text-blue-500').

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

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

```

--------------------------------

### buildExports(styles) function implementation

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-script.md

Computes the package exports map for a given list of styles. It includes root-level imports, package.json export, backwards compatibility for v1 imports, and explicit exports for each style. The function returns a Promise resolving to an exports map object.

```javascript
/**
 * @param {string[]} styles
 */
async function buildExports(styles) {
  let pkg = {}

  // To appease Vite's optimizeDeps feature which requires a root-level import
  pkg[`.`] = {
    import: `./index.esm.js`,
    require: `./index.js`,
  }

  // For those that want to read the version from package.json
  pkg[`./package.json`] = { default: './package.json' }

  // Backwards compatibility with v1 imports (points to proxy that prints an error message):
  pkg['./outline'] = { default: './outline/index.js' }
  pkg['./outline/index'] = { default: './outline/index.js' }
  pkg['./outline/index.js'] = { default: './outline/index.js' }
  pkg['./solid'] = { default: './solid/index.js' }
  pkg['./solid/index'] = { default: './solid/index.js' }
  pkg['./solid/index.js'] = { default: './solid/index.js' }

  // Explicit exports for each style:
  for (let style of styles) { /* types|import|require for `./{style}`, `./{style}/*`, `./{style}/*.js`, `./{style}/esm/*`, `./{style}/esm/*.js` */ }

  return pkg
}
```

--------------------------------

### ReactIconComponent

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Documentation for the React icon component type emitted for every icon in the React package.

```APIDOC
## ReactIconComponent

### Description
Type of every icon component in the React package. It is a `React.ForwardRefExoticComponent` that accepts SVG props, custom `title`/`titleId` props, and a `ref` to the underlying `<svg>` element.

### Type Declaration
```ts
import * as React from 'react';
declare const BeakerIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string } & React.RefAttributes<SVGSVGElement>>;
export default BeakerIcon;
```

### Accepted Props
- **ref** (`React.Ref<SVGSVGElement>`) - Optional - Reference to the rendered `<svg>` element.
- **title** (`string`) - Optional - Renders a `<title>` element inside the SVG.
- **titleId** (`string`) - Optional - Sets `id` on the `<title>` element and `aria-labelledby` on the SVG.
- **SVGProps** (all attributes from `React.SVGProps<SVGSVGElement>`) - Optional - Any SVG attribute: `className`, `viewBox`, `fill`, `stroke`, `strokeWidth`, event handlers, etc.

### Return Value
When rendered, produces an `<svg>` DOM element (`SVGSVGElement`).

### Usage Notes
- The type is emitted inline in a `declare const`; consumers cannot name it directly.
- Recover the type via `ComponentProps<typeof BeakerIcon>` or `React.ComponentProps<typeof BeakerIcon>`.
```

--------------------------------

### Deprecated icon registry (scripts/deprecated.js)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/cli-scripts.md

Exports the list of deprecated icon filenames. Consumed by scripts/build.js to set isDeprecated and by scripts/verify-names.js to exempt these names from the 16×16 consistency check. Exactly these 8 files are absent from the 16×16 packages and marked deprecated in the 20/24 variants.

```javascript
module.exports.deprecated = [
  'arrow-left-on-rectangle.svg',
  'arrow-right-on-rectangle.svg',
  'arrow-small-down.svg',
  'arrow-small-left.svg',
  'arrow-small-right.svg',
  'arrow-small-up.svg',
  'minus-small.svg',
  'plus-small.svg',
]
```

--------------------------------

### Outline style beaker.svg (24/outline)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/heroicons-svg-package.md

Exact contents of optimized/24/outline/beaker.svg. Root svg has fill="none", stroke="currentColor", stroke-width="1.5", aria-hidden="true", data-slot="icon". Path retains stroke-linecap="round" and stroke-linejoin="round".

```xml
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/>
</svg>
```

--------------------------------

### SVGO config for 24x24 outline icons (svgo.24.outline.mjs)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svgo-config.md

SVGO configuration for 24x24 outline icons. The removeAttrs plugin strips stroke="#0F172A" from the root and stroke-width from <path> elements. The addAttributesToSVGElement plugin adds stroke-width="1.5" and stroke="currentColor" to the root so the outline is styled via CSS color.

```javascript
    {
      name: 'removeAttrs',
      params: {
        attrs: ['stroke', 'path:stroke-width'],
      },
    },
    {
      name: 'addAttributesToSVGElement',
      params: {
        attributes: [
          {
            'stroke-width': '1.5',
            stroke: 'currentColor',
            'aria-hidden': 'true',
            'data-slot': 'icon',
          },
        ],
      },
    },
```

--------------------------------

### Type production pipeline

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Shows the type production pipeline from scripts/build.js buildIcons(). It branches into react and vue type definitions, and also generates the style index.d.ts via exportAll. Sources are scripts/build.js:116-134, 146; generated artifacts are under react/ and vue/ (build outputs; use npm run build-react / npm run build-vue to regenerate).

```text
scripts/build.js buildIcons()
  ├─ react branch ──► react/{style}/{Icon}Icon.d.ts  (React.ForwardRefExoticComponent<...>)
  ├─ vue branch   ──► vue/{style}/{Icon}Icon.d.ts    (FunctionalComponent<HTMLAttributes & VNodeProps>)
  └─ exportAll(icons, 'esm', false) ──► {style}/index.d.ts (extension-less re-exports)
```

--------------------------------

### Throw error when package argument is missing (scripts/build.js)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/errors.md

Throws an uncaught Error with message 'Please specify a package' when the generator is run without a package argument. Triggered by `node ./scripts/build.js` with no CLI argument; the script terminates with a stack trace at `scripts/build.js:246`.

```js
let [package] = process.argv.slice(2)

if (!package) {
  throw new Error('Please specify a package')
}

main(package)
```

--------------------------------

### Heroicons icon with ref, title, and click handler

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-package.md

Advanced usage showing how to pass a ref, set an accessible title and titleId, and customize strokeWidth and click handling on a Heroicons v2 icon. The ref is used to access the icon's DOM node for measuring its bounding rect.

```js
import { useRef } from 'react'
import { CalendarIcon } from '@heroicons/react/24/outline'

function IconButton({ label }) {
  const ref = useRef(null)

  return (
    <button aria-label={label}>
      <CalendarIcon
        ref={ref}
        title={label}
        titleId={`${label}-title`}
        className="size-5 text-emerald-600"
        strokeWidth={1.5}
        onClick={() => console.log('icon clicked at', ref.current?.getBoundingClientRect())}
      />
    </button>
  )
}

```

--------------------------------

### TypeScript type declarations for icon re-exports

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-package.md

Generated style-level type declarations that re-export every icon component. This file is produced by the build script and is not hand-maintained.

```ts
export { default as AcademicCapIcon } from './AcademicCapIcon'
export { default as AdjustmentsHorizontalIcon } from './AdjustmentsHorizontalIcon'
...
export { default as XCircleIcon } from './XCircleIcon'
export { default as XMarkIcon } from './XMarkIcon'

```

--------------------------------

### Build script assembly of React icon .d.ts (scripts/build.js)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Assembly of the TypeScript declaration file for each React icon in the build script. It pushes the React import, an optional @deprecated JSDoc comment, the component declaration with the full type expression, and the default export. The isDeprecated flag controls the deprecation comment.

```javascript
types.push(`import * as React from 'react';`)
if (isDeprecated) {
  types.push(`/** @deprecated */`)
}
types.push(`declare const ${componentName}: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string } & React.RefAttributes<SVGSVGElement>>;`)
types.push(`export default ${componentName};`)
```

--------------------------------

### Generated ESM source of BeakerIcon.js

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-package.md

Exact generated ESM source of `react/24/solid/BeakerIcon.js`. Shows the component signature, forwardRef wrapping, and default SVG attributes. Use as reference for the generated code structure.

```javascript
import * as React from "react";
function BeakerIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /*#__PURE__*/React.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /*#__PURE__*/React.createElement("title", {
    id: titleId
  }, title) : null, /*#__PURE__*/React.createElement("path", {
    fillRule: "evenodd",
    d: "M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z",
    clipRule: "evenodd"
  }));
}
const ForwardRef = /*#__PURE__*/ React.forwardRef(BeakerIcon);
export default ForwardRef;
```

--------------------------------

### Error handling for deprecated 16x16 icons (JS)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/heroicons-svg-package.md

Use this snippet to handle errors when referencing a deprecated 16x16 icon that is not shipped. The require.resolve call will throw, and the error is caught and logged.

```js
try {
  require.resolve('heroicons/16/solid/plus-small.svg')
} catch (error) {
  // Module not found — this file is intentionally absent
  console.error('Not available at 16px:', error.code)
}
```

--------------------------------

### CJS variant header/footer of BeakerIcon.js

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-package.md

Shows the CJS variant of the same file, differing only in the header/footer. Produced by `transform.react` in `scripts/build.js`.

```javascript
const React = require("react");
...
module.exports = ForwardRef;
```

--------------------------------

### getIcons function signature

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-script.md

The `getIcons(style)` function loads optimized SVGs from `./optimized/{style}` and returns an array of objects with `svg`, `componentName`, and `isDeprecated`. The `componentName` is computed using the `camelcase` package with `pascalCase: true` and suffixed with `Icon`.

```javascript
async function getIcons(style) { ... }
```

--------------------------------

### Generated ESM source of vue/24/solid/BeakerIcon.js

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/vue-package.md

Exact generated ESM source of the BeakerIcon component. It imports Vue's createElementVNode, openBlock, and createElementBlock, and exports a render function that returns an SVG element with a path. The SVG has attributes xmlns, viewBox, fill, aria-hidden, and data-slot, and the path uses fill-rule and clip-rule.

```javascript
import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export default function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon"
  }, [
    _createElementVNode("path", {
      "fill-rule": "evenodd",
      d: "M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z",
      "clip-rule": "evenodd"
    })
  ]))
}
```

--------------------------------

### npm run lint failure output

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/cli-scripts.md

Failing lint output: prints a diff table instead of throwing. Verified on Node 25.9.0; on older Node releases console.table may not exist, causing TypeError. Do not rely on exit code.

```shell
npm run lint
# ┌─────────┬─────────┬──────────────────────┬─────────────┐
# │ (index) │ package │ file                 │ Missing in? │
# ├─────────┼─────────┼──────────────────────┼─────────────┤
# │ 0       │ 'micro' │ '__stray_test__.svg' │ 'mini'      │
# │ 1       │ 'micro' │ '__stray_test__.svg' │ 'solid'     │
# │ 2       │ 'micro' │ '__stray_test__.svg' │ 'outline'   │
# └─────────┴─────────┴──────────────────────┴─────────────┘
```

--------------------------------

### Dynamic icon selection with v-for and event handlers

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/vue-package.md

Advanced usage with dynamic component binding, v-for, and event handlers. Icons are selected dynamically via a mapping function and can have conditional classes and click handlers. Note that icons from different subpaths (solid and outline) can be mixed in the same component.

```vue
<template>
  <button
    v-for="(name, i) in tabs"
    :key="name"
    class="flex items-center gap-2"
    @click="activate(name)"
  >
    <component
      :is="iconFor(name)"
      :class="active === name ? 'size-5 text-indigo-500' : 'size-5 text-gray-400'"
      @click.stop
    />
    <span>{{ name }}</span>
  </button>
</template>

<script setup>
import { HomeIcon } from '@heroicons/vue/24/solid'
import { FolderIcon } from '@heroicons/vue/24/solid'
import { CubeIcon } from '@heroicons/vue/24/outline'

const tabs = ['home', 'files', 'cube']
const active = 'home'

function iconFor(name) {
  return { home: HomeIcon, files: FolderIcon, cube: CubeIcon }[name]
}
</script>
```

--------------------------------

### transform function: per-package SVG→component compiler

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-script.md

The `transform` object defines `react` and `vue` functions that compile SVG to component source. The `react` version is async and uses `@svgr/core` and `@babel/core`; the `vue` version is synchronous and uses `@vue/compiler-dom` with `mode: 'module'`. Called as `transform[package](...)` from `buildIcons`; passing a value other than `'react'` or `'vue'` throws a `TypeError`.

```javascript
let transform = {
  react: async (svg, componentName, format, isDeprecated) => { /* @svgr/core + @babel/core */ },
  vue: (svg, componentName, format, isDeprecated) => { /* @vue/compiler-dom, mode: 'module' */ },
}
```

--------------------------------

### deprecated registry shape (JS, not TS)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

The only non-generated typed data export in the source tree. It is a JavaScript module that exports an array of 8 SVG basenames (with .svg extension) that must be marked deprecated in generated packages.

```js
module.exports.deprecated = [ /* 8 filenames, see cli-scripts.md */ ]
```
Tokens:
Raw