Heroicons

一、Heroicons是什么

Heroicons是由Tailwind CSS团队（Tailwind Labs）手工设计的SVG图标库，它定位为Web UI开发提供一套风格统一、可直接复用的矢量图标资源，当前官网收录316个图标，采用MIT开源许可证，可免费用于个人与商业项目。

Heroicons与Tailwind CSS生态深度绑定，但并不依赖Tailwind才能使用——你可以直接复制SVG代码嵌入任何HTML页面，也可以通过官方React、Vue组件库在框架项目中引入。设计师侧还提供Figma源文件，方便在设计稿阶段直接调用。

二、产品功能

1. 四种图标风格变体

• Outline（线性轮廓）：24×24尺寸，1.5px描边，是最常用的默认风格；

• Solid（实心填充）：同尺寸下的实心版本，适合强调态、激活态；

• Mini：小尺寸规格，适配紧凑UI场景；

• Micro：超小尺寸规格，适配密集信息区域。

同一图标在不同风格下保持命名一致，切换风格只需替换组件或SVG来源。

2. 在线搜索与预览

官网提供关键词搜索框，输入英文关键词即可实时过滤图标，点击图标可查看大图并一键复制SVG源码。

3. 官方框架组件库

提供@heroicons/react和@heroicons/vue两个官方npm包，图标以组件形式导入，支持通过className控制尺寸、颜色和描边。

4. Figma设计资源

官网提供Figma文件入口，设计师可直接在Figma中使用同一套图标，保证设计稿与前端实现视觉一致。

5. 图标覆盖范围

覆盖Web开发常见UI场景：箭头方向、提示警告、表单编辑、文件文档、通信聊天、媒体播放、设备硬件、货币、用户账号、购物车、工具设置、天气、导航、图表数据等。

三、产品特色

1. Tailwind Labs官方出品

由Tailwind CSS的核心团队设计，视觉语言与Tailwind生态天然契合，配合Tailwind的size-*、text-*等工具类可直接控制图标尺寸与颜色。

2. 纯SVG、无依赖

每个图标都是独立的SVG代码，不依赖任何JavaScript运行时，复制即可用，加载体积极小。

3. MIT许可证，商用免费

MIT协议允许自由使用、修改、分发，包括商业闭源项目，无需署名（虽建议保留）。

4. 风格统一、质量可控

所有图标由手工绘制而非自动生成，描边粗细、视觉重心、圆角处理保持一致，成体系使用时不会出现"拼贴感"。

5. 尺寸体系分层

从24×24到超小Micro档，覆盖从主操作按钮到表格内状态标记的不同尺寸需求，避免开发者自己缩放导致的失真。

四、使用方法

方式一：直接复制SVG（最简单）

1. 打开heroicons.com，搜索需要的图标；

2. 选择Outline/Solid/Mini/Micro风格；

3. 点击图标，复制弹出的SVG代码；

4. 粘贴到HTML中，通过CSS或Tailwind类控制样式。

示例（配合Tailwind）：

<svg class="size-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
 <!-- 图标路径 -->
</svg>

方式二：React项目中使用

npm install @heroicons/react

import { UserIcon } from '@heroicons/react/24/outline'

function App() {
 return <UserIcon className="size-6 text-blue-500" />
}

方式三：Vue项目中使用

npm install @heroicons/vue

方式四：Figma设计阶段

从官网下载Figma文件，在设计稿中直接拖用图标，交付时与前端代码保持同一套命名。

五、适合人群

六、竞品对比

简要结论：Heroicons胜在风格统一、四档尺寸分层、Tailwind生态原生契合；Lucide胜在图标数量多、社区活跃；Feather胜在极简轻量但已停滞。做Tailwind项目首选Heroicons，需要大量长尾图标可考虑Lucide。

七、收费价格

Heroicons完全免费。

• 所有316个图标均可免费下载、复制、使用；

• MIT许可证覆盖个人项目、商业项目、开源项目；

• React/Vue组件库同样免费开源，通过npm公开获取；

• Figma设计文件免费下载；

• 官网无付费墙、无高级会员、无"Pro版"图标分层。

八、常见问题解答

Q：Heroicons是完全免费的吗？商用需要付费吗？

A：Heroicons采用MIT许可证，完全免费，可用于个人项目、商业闭源项目和开源项目，无需支付任何费用，也不强制署名。

Q：Heroicons只能在Tailwind CSS项目中使用吗？

A：不是。Heroicons的本质是独立的SVG文件，你可以把SVG代码复制到任何HTML页面、任何框架中使用。Tailwind只是它的"娘家"，并非使用前提。

Q：Heroicons的图标数量大概有多少？会不会不够用？

A：当前官网收录316个图标，覆盖通用Web UI场景。如果项目需要大量长尾、垂直领域图标（如特定行业符号、复杂插画），可能需要配合其他图标库使用。

Q：Outline、Solid、Mini、Micro四种风格有什么区别？怎么选？

A：Outline是24×24的线性描边风格，适合默认态；Solid是同尺寸实心填充，适合激活态、强调态；Mini和Micro是更小尺寸规格，用于紧凑工具栏、表格内标记等场景。同一图标命名一致，可按场景切换。

Q：在React项目中如何安装和使用Heroicons？

A：通过npm install @heroicons/react安装，然后以组件方式导入，例如import { UserIcon } from '@heroicons/react/24/outline'，再通过className控制尺寸和颜色。

Q：修改图标颜色和尺寸方便吗？

A：非常方便。SVG图标使用currentColor继承文本颜色，通过CSS或Tailwind的text-*类改色，通过width/height或Tailwind的size-*类改尺寸，无需重新导出。

Q：Heroicons的Figma文件在哪里下载？

A：在heroicons.com官网页面中提供Figma文件入口，设计师可直接下载使用，与前端代码保持同一套图标资源。

Q：Heroicons和Lucide Icons、Feather Icons是什么关系？

A：三者是并列的开源SVG图标库。Heroicons由Tailwind Labs出品；Lucide是Feather Icons的社区分支，在Feather基础上大幅扩充图标数量；Feather是更早的极简线性图标库，目前维护节奏较慢。

九、神器阁测评

Heroicons是Tailwind CSS团队官方出品的免费SVG图标库，以316个手工设计图标、四种尺寸风格变体、MIT开源协议为核心卖点。它的优势在于风格统一、与Tailwind生态无缝配合、React/Vue官方组件开箱即用、商用零成本；短板是图标数量相对克制，覆盖通用UI但不追求长尾垂直场景。

对于使用Tailwind CSS的前端开发者、追求设计系统一致性的团队，以及需要一套免费可商用图标资源的独立开发者来说，Heroicons是第一梯队的首选。如果项目需要更多样化、更大体量的图标集，可以将Heroicons与Lucide等库配合使用。