Tailwind 团队做的图标库：Heroicons 开源免费，描边实心都有

同一个图标，有时候需要描边版，有时候需要实心版——比如导航栏未选中用描边、选中了用实心。Heroicons 为每个图标都提供了两种风格。

它解决什么问题

界面里选中态与默认态需要视觉区分，但很多图标库只有一种风格，只能靠颜色硬凑。

描边图标与实心图标来自不同库，切换时线条粗细不一致，观感割裂。

核心能力

选中态靠「风格切换」而不是「换颜色」

很多界面用颜色区分选中态：未选中灰色、选中高亮色。但颜色对比在部分用户（色觉障碍）或强光环境下并不明显。

同时改变图标风格（描边 → 实心）再加颜色，是更稳的做法，Heroicons 的双风格设计正好支持这种用法。

同类工具怎么选

谁适合用

• 用 Tailwind 做项目的前端工程师
• 设计导航、标签栏，需要区分选中态的人
• 想要一套简洁、不花哨的界面图标的人

怎么开始

1. 打开 heroicons.com，搜索语义关键词。
2. 在 Outline / Solid / Mini 之间切换，选定风格。
3. 复制 SVG 或用官方组件包引入。
4. 做选中态时，用同一图标的两种风格配合颜色变化。

常见问题

图标数量多吗？
覆盖常见界面语义，数量不及 Tabler 这类巨型库，但够日常界面使用。

和 Lucide 比呢？
Heroicons 的双风格与多尺寸是特色；Lucide 的线条统一性与图标数量占优。

必须配 Tailwind 吗？
不必须，SVG 与组件包都能单独使用。

授权与合规

Heroicons 由 Tailwind Labs 以 MIT 许可证发布，可自由用于商业项目，无需署名。 官网：heroicons.com。