Heroicons

Heroicons 是由 Tailwind CSS 团队官方出品的精美 SVG 图标库，与 Tailwind CSS 一脉相承，以极简的线条与几何化的造型著称。Heroicons 最早于 2020 年随 Tailwind UI 一起发布，后独立开源供所有开发者免费使用。相比 Lucide 和 Phosphor，Heroicons 的设计风格更为硬朗——线条简洁、棱角分明，几乎没有圆滑的曲线过渡，非常适合现代化的极简风格界面。

Heroicons 提供两个版本：Outline（线框风格，适合内容较少的空旷界面）和 Solid（填充风格，适合需要视觉重量强调的场景）。两个版本图标数量合计超过 450 个，涵盖界面交互、导航、文件、媒体、通讯等常用分类。官方提供 React 和 Vue 的组件包，同时也支持直接复制 SVG 代码嵌入任何项目。

主要功能

功能一：Outline / Solid 双版本图标

Heroicons 最大的特点在于同一套图标同时提供 Outline（线框）和 Solid（填充）两种风格，每个图标均有 24×24 与 20×20 两种尺寸规格。Outline 版本采用 1.5px 线宽，适合现代极简风格界面；Solid 版本为实心填充，适合按钮、标签、选中状态等需要视觉强调的场景。两种风格可以共存于同一产品中，通过视觉权重区分界面层级。

功能二：NPM 组件包

官方提供两个独立的 NPM 包：@heroicons/react 和 @heroicons/vue。以 React 为例，引入图标非常简单：import { BeakerIcon } from @heroicons/react/24/solid 或 import { BeakerIcon } from @heroicons/react/24/outline。包体积经过优化，支持 Tree-shaking，组件均为 TypeScript 编写，提供完整的类型推断与 IDE 自动补全。

功能三：在线图标浏览器

heroicons.com 官网提供了直观的图标浏览与搜索界面。所有图标以网格形式展示，支持 Outline / Solid 切换、尺寸切换（20/24）、关键词搜索。每个图标点击后可查看大图预览，并一键复制 SVG 代码或 JSX 代码片段。官网还提供了「图标集」功能，可以将多个图标加入购物车后批量导出。

功能四：SVG 代码直接使用

除了通过 NPM 包引入组件，Heroicons 还支持直接复制 SVG 代码嵌入 HTML。每个图标的 SVG 代码都经过优化（去除冗余属性、统一 viewBox、移除 Illustrator 产生的冗余路径数据），文件体积小、渲染性能好。对于不使用 React/Vue 的项目，直接嵌入 SVG 是最简单的方式。

功能五：与 Tailwind CSS 无缝集成

作为 Tailwind CSS 团队出品的产品，Heroicons 与 Tailwind 的utility-first 理念完全契合。官方推荐的用法是将 Heroicons 作为 React/Vue 组件使用，并通过 Tailwind 的类名（如 className="h-5 w-5 text-blue-500"）控制图标的大小、颜色等样式。这种组合方式已成为 Tailwind 生态中的标准图标使用范式。

核心特点与优势

适用场景

Heroicons 适合以下场景：Tailwind CSS 项目（官方推荐的图标搭档）；极简风格界面设计（Outline 图标线条硬朗、几何感强）；React / Vue 现代前端项目（NPM 包开箱即用）；内容管理系统与后台面板（Solid 版本用于按钮和操作入口，Outline 版本用于导航和标签）。

如果你已经在使用 Tailwind CSS 构建项目，Heroicons 是最自然的选择——同一团队出品，理念一脉相承，配合 Tailwind 的 w-*、h-*、text-* 类名可以轻松控制图标的尺寸和颜色，无需任何额外配置。