# Heroicons — card for AI agents

MIT-licensed SVG icons from Tailwind Labs with React and Vue packages.

Category: Icons · maker Tailwind Labs · checked 2026-10-10 · style: outline, filled

## Price
- Price: Free
- Free tier: Fully free.

## License
MIT — https://github.com/tailwindlabs/heroicons/blob/master/LICENSE

- commercial: **yes** (Commercial use OK)
  > Permission is hereby granted, free of charge, to any person obtaining a copy of this software
  (https://github.com/tailwindlabs/heroicons/blob/master/LICENSE)
- attribution: **no** (No credit needed)
- in app: **yes** (Can ship inside your app)
  > Permission is hereby granted, free of charge, to any person obtaining a copy of this software
  (https://github.com/tailwindlabs/heroicons/blob/master/LICENSE)

## Rules to follow
- Keep the MIT copyright and permission notice in copies.

## How an agent gets files
- npm install @heroicons/react or @heroicons/vue, or copy the SVG source from heroicons.com. (sign-in: none)
- Formats: svg
- Not allowed: Keep the MIT copyright and permission notice in all copies or substantial portions

## React (official example, https://raw.githubusercontent.com/tailwindlabs/heroicons/master/README.md)

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

## HTML/CSS (official example, https://raw.githubusercontent.com/tailwindlabs/heroicons/master/README.md)

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

## How to connect
- Package (npm/PyPI)
- npm: `npm install @heroicons/react`
- Repository: https://github.com/tailwindlabs/heroicons
- Website: https://heroicons.com

## Notes
Also @heroicons/vue.

## Numbers (AgentGid data)
- Gid Score: 61.2
- GitHub stars: 23,875
- Downloads last week: 2,516,226
- Used in 67 public projects set up for AI coding agents

## Lines to paste into your prompt or AGENTS.md

```
- Heroicons (Icons). MIT-licensed SVG icons from Tailwind Labs with React and Vue packages. Price: free; commercial use OK; no credit needed. Style: outline, filled.
  Connect: npm @heroicons/react.
  Get files: npm install @heroicons/react or @heroicons/vue, or copy the SVG source from heroicons.com (svg).
  Not allowed: Keep the MIT copyright and permission notice in all copies or substantial portions
  Rule: Keep the MIT copyright and permission notice in copies.
  License: https://github.com/tailwindlabs/heroicons/blob/master/LICENSE (checked 2026-10-10; details: https://agentgid.com/assets/heroicons/)
```

## Links
- AgentGid page: https://agentgid.com/assets/heroicons/
- Is it free for commercial use? https://agentgid.com/assets/heroicons/commercial-use/
- Source: https://github.com/tailwindlabs/heroicons

---
AgentGid's catalog is curated: every entry was checked against the maker's official pages (registry, repository, license and pricing pages) on the date shown; a license value shows the quote it stands on wherever AgentGid has one. Usage numbers come from AgentGid's own scan of public repositories set up for AI coding agents. Claims by makers are reported, not tested by AgentGid.