Heroicons

网站描述

精美的手工制作SVG图标，由Tailwind CSS制作者打造,完全免费开源。

Heroicons是什么

Heroicons 是由 Tailwind CSS 团队出品的一套手工打磨的 SVG 图标库。提供 outline、solid 和 mini 三种风格，常见尺寸是 24×24 和 20×20。数量并不庞大，但每个图标的质感和风格一致，和 Tailwind 的设计理念贴得很牢。

主页

如何使用Heroicons

使用 Heroicons 简直不要太爽！最简单的方法就是直接复制 SVG 代码，粘贴到你的 HTML 里就能用。

快速上手：

访问 heroicons.com，浏览所有图标
点击喜欢的图标，选择样式（Outline/Solid/Mini）
复制 SVG 代码或下载文件
粘贴到你的项目中

框架集成：

如果你用 React，直接安装 @heroicons/react：

npm install @heroicons/react

然后就能像这样导入使用：

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

function MyComponent() {
  return 
}

Vue 用户也有 @heroicons/vue 包。最棒的是支持树摇优化，只会打包你用到的图标！

Heroicons 的特色

手工精制品质

每个图标都是 Tailwind 团队精心手绘的 SVG，品质堪比艺术品，绝不是批量生成的粗制滥造。

三套完整样式

Outline、Solid、Mini 三种样式，24x24 和 20x20 两种尺寸，覆盖各种使用场景。

框架原生支持

提供 React、Vue 等主流框架的组件包，TypeScript 支持，树摇优化，开发体验一流。

Tailwind 血统

与 Tailwind CSS 天生一对，设计理念完全契合，用起来毫无违和感。

像素级精准

每个图标都经过像素级调整，确保在任何尺寸下都有完美的显示效果。

完全开源免费

MIT 协议，商业项目随便用，没有任何限制，这在高质量图标库中相当罕见。

Heroicons 的使用场景

Tailwind CSS 项目

这是最完美的搭配！如果你的项目用了 Tailwind，那 Heroicons 绝对是首选。设计理念高度契合，用起来毫无违和感。

高端产品界面

追求极致视觉品质的产品，比如 SaaS 平台、金融应用、设计工具等，Heroicons 的精致程度完全配得上。

现代前端框架

React、Vue、Angular 等项目的完美选择，有官方组件包，TypeScript 支持，开发体验一流。

企业设计系统

作为企业级设计系统的基础图标库，风格统一、品质可靠，能确保整个产品的视觉一致性。

品牌级项目

对视觉品质有极高要求的项目，比如品牌官网、高端电商、艺术平台等，需要每个细节都完美。

Heroicons 优缺点

优点

图标质量极高，手工制作

风格高度统一，视觉精美

与 Tailwind CSS 完美集成

提供多种框架组件包

完全免费开源使用

性能优化，支持树摇

像素完美对齐

Tailwind 团队品质保证

缺点

图标数量相对较少（288个）

更新频率不是很高

风格相对单一

某些特殊场景可能找不到合适图标

Heroicons 常见问题

Q1: Heroicons 与其他图标库有什么区别？

Heroicons 最大的特点是品质极高 - 每个图标都是手工制作的 SVG，而且与 Tailwind CSS 完美集成。虽然数量不多，但每个都是精品。

Q2: 如何在 React 项目中使用？

安装 @heroicons/react 包，然后直接导入需要的图标组件使用，支持 TypeScript 和树摇优化。

Q3: 三种图标样式有什么区别？

Outline（24x24）适合简洁界面，Solid（24x24）适合需要强调的场景，Mini（20x20）适合空间有限的地方。

Q4: 可以自定义图标颜色吗？

当然可以！图标使用 currentColor，可以通过 CSS 的 color 属性或 Tailwind 的文本颜色类来控制。

Q5: 图标数量会继续增加吗？

Tailwind 团队会根据社区需求和设计标准逐步增加新图标，但他们更注重质量而非数量，每个新图标都会经过严格的设计审查。