Heroicons

网站简介

Heroicons 是一款由 Tailwind CSS 团队出品的免费、手绘风格 SVG 图标库。所有图标均经过手工精心绘制，线条自然流畅，风格统一且具有独特的柔和质感，非常适合现代 Web 应用、移动端界面以及设计稿中使用。目前该图标库共收录了 316 个常用图标，涵盖箭头、按钮、表单、媒体、社交、状态指示等丰富类别，几乎覆盖了日常开发中的绝大多数场景。

主要功能/内容

图标风格

Heroicons 提供四种风格变体：

• Outline：24x24 尺寸，1.5px 描边风格，图标线条清晰，适用于大多数界面场景。
• Solid：24x24 尺寸，实心填充风格，视觉重量更强，适合强调操作或状态。
• Mini：20x20 尺寸，比 Outline 更紧凑，适合在空间有限的列表或按钮中使用。
• Micro：16x16 尺寸，让图标在小尺寸下依然保持辨识度。

每种风格都包含全部图标，根据设计需求可自由切换，同时还可以通过网站顶部的切换按钮快速预览不同风格的效果。

多框架支持

Heroicons 不仅提供原始 SVG 文件，还封装了 React 和 Vue 组件版本。开发者可以直接在项目中安装对应的 npm 包，以组件的形式调用图标，代码简洁且支持按需引入，有效减小打包体积。此外，官方还提供了 Figma 文件，设计师可以直接在 Figma 中使用整套图标资源，方便进行 UI 设计协作。

开源免费

Heroicons 基于 MIT 许可证 发布，这意味着你可以免费将其用于商业项目、个人作品、开源项目甚至嵌入式系统中，无需支付费用，也不需要署名。对于团队和独立开发者来说，这是一套低成本、高质量的选择。

在线预览与复制

网站提供了直观的图标浏览页面，支持按名称搜索，也可以一键切换风格。当选中某个图标时，可以直接复制其 SVG 代码或 React/Vue 组件代码，极大地方便了开发流程。同时，网站还提供了文档链接和更新日志，帮助用户快速上手。

特点说明

Heroicons 最大的特点是“手绘感”。与很多机械生成、棱角分明的图标库不同，Heroicons 的图标曲线更加圆润自然，看起来更像是设计师一笔一划画出来的，因此整体视觉风格亲切、柔和，不会给人冷冰冰的感觉。

作为 Tailwind CSS 的官方配套图标库，Heroicons 与 Tailwind CSS 生态无缝集成，在许多使用 Tailwind 的项目中被广泛应用。对于前端开发者和 UI 设计师而言，Heroicons 提供了一种统一、可靠、易用的图标解决方案，无论是快速搭建原型还是打磨正式产品，都能提供出色的视觉支持。

总的来说，Heroicons 是一个值得收藏的图标资源网站，它的简洁设计、丰富主题和友好的使用方式使其成为 Web 开发中不可或缺的工具之一。