Heroicons：Tailwind CSS 团队出品，按四种样式分类

这份图标 eaglepack 收录了 Heroicons 全套 316 款图标（icons），每款都有 Outline、Solid、Mini、Micro 四种样式，按样式分成四个文件夹，导入 Eagle 就能直接挑图。Heroicons 由 Tailwind CSS 团队推出，MIT 授权，可免费商用。Outline 是 24×24、1.5px 描边的线性图标，另外三种是面性版本，分别对应 24px、20px、16px。

做界面时，同一个图标经常出现在不同位置：导航栏用 24px，按钮里用 20px，表格或标签里还得缩到 16px。大图标直接缩小，线条很容易糊在一起。Heroicons 把这几个常用尺寸各做了一套，名称完全一致，换尺寸时找同名的那个就行。

Heroicons 出自 Tailwind Labs。这个团队最知名的作品是 Tailwind CSS，一款前端用来写网页样式的工具，在 GitHub 上有近 10 万 star。Heroicons 主要由设计师 Steve Schoger 绘制，他和 Tailwind CSS 作者 Adam Wathan 合著过界面设计书《Refactoring UI》。Heroicons 本身在 GitHub 上有约 2.4 万 star，官方同时维护 React 和 Vue 组件包，也提供 Figma 文件。

主要特点

• 每款图标都有 Outline 24、Solid 24、Mini 20、Micro 16 四种样式
• Outline 统一用 24×24 画布、1.5px 描边
• 图标名称和 React／Vue 组件包一致，设计稿和代码直接对得上
• eaglepack 按四种样式分文件夹，不用在一个文件夹里分辨尺寸

Heroicons 可以免费商用吗？

Heroicons 采用 MIT 授权，个人和商业项目都能免费用，也可以修改。用在自己的设计稿、网站或 App 界面里，不需要在页面上标注来源。如果要把图标文件本身重新打包、对外分发，需要附上原来的 MIT 授权声明。

资源规格与 eaglepack 整理方式

全部是 SVG，可以直接拖进 Figma、Illustrator、Sketch 使用。eaglepack 里的文件夹如下：

• Outline · 24px（316 款）
• Solid · 24px（316 款）
• Mini · 20px（316 款）
• Micro · 16px（316 款）

另有一个 _Deprecated 文件夹，放了 8 款官方已从网站移除、但为了兼容旧版仍保留在包里的图标（比如 arrow-small-up、plus-small），有 Outline、Solid、Mini 三种样式。维护老项目时可能用得上，新设计不用从这里选。

Heroicons 适合用在哪里？

Outline 和 Solid 24px 适合 App 底部标签栏（Tab Bar）、后台侧边栏菜单这类导航位置，线性和面性两版正好用来区分“未选中”和“选中”状态。Mini 20px 适合放在按钮和输入框里；Micro 16px 适合表格、标签（badge）、下拉菜单这类信息密集的地方。

如果你和用 Tailwind CSS 的前端合作，Heroicons 还能少掉不少交接时的来回确认。设计稿里用了哪个图标，前端按同样的名称就能从 @heroicons/react 或 @heroicons/vue 里直接调用，不用再切图或导出 SVG。SaaS 后台、内部管理系统这类迭代快的项目尤其省事。