Heroicons

Heroicons 是 Tailwind CSS 团队推出的手工绘制 SVG 图标库，风格简洁、清晰，适合现代 Web 应用和 Tailwind 项目使用。它提供 Outline 和 Solid 等常见图标形式，覆盖导航、操作、文件、媒体、状态、通讯等界面高频语义，是很多前端项目中轻量、稳定的图标选择。

主要功能

Heroicons 的核心能力是提供统一风格的 SVG 图标，并支持直接复制 SVG 或通过 React、Vue 包引入。Outline 版本适合普通导航、菜单、表单和工具栏；Solid 版本适合选中状态、强调按钮、标签或需要更高视觉重量的位置。由于由 Tailwind 团队维护，它与 Tailwind UI 和 Tailwind CSS 项目搭配自然。

相比图标数量特别庞大的集合，Heroicons 更强调常用图标的质量和一致性。对于大多数产品界面，搜索、设置、用户、菜单、箭头、通知、文件、编辑、删除等基础操作已经足够。图标以 SVG 形式使用，便于继承文本颜色、设置尺寸，并在高分辨率屏幕上保持清晰。

适合场景

使用建议

Heroicons 很适合保持界面克制，但图标数量和风格变化没有 Iconify、Phosphor 那样丰富。如果项目涉及大量行业专用图标，可能需要搭配其他图标库或自绘图标。混用时应统一尺寸、线宽、圆角和颜色规则，避免不同图标体系放在同一导航或工具栏中显得不一致。

工程接入时建议按需导入 React 或 Vue 图标，不要把整个包打入业务代码。对于纯图标按钮，应补充可访问名称；对于装饰图标，应设置隐藏语义。商业使用前也要核对许可证和品牌图标边界，Heroicons 适合通用 UI 语义，不应用作第三方品牌 Logo 的替代。

测试体验

从官网公开描述看，Heroicons 的定位非常直接：由 Tailwind CSS 制作者提供的手工 SVG 图标。网站选择成本低，适合快速找到常用图标。它的优势是轻量、一致、易接入；限制是风格较固定，不适合追求复杂插画化图标的页面。

访问地址

官网：https://heroicons.com/