Heroicons
Heroicons 是由 Tailwind CSS 团队出品的一套免费开源 SVG 图标库，风格统一、做工精致。它目前提供 316 个图标，覆盖 Outline、Solid、Mini、Micro 四种风格，适配不同粗细与尺寸的界面需求。图标采用 MIT 许可证，个人项目与商业产品都能放心使用。官方同时提供 React 与 Vue 组件库以及 Figma 源文件，方便设计师与开发者直接调用。作为前端开发中广受欢迎的图标方案，它与 Tailwind CSS 生态配合尤其顺滑。
网站&在线应用
简介
优缺点
- ✅ 免费开源，MIT 许可证可自由商用
- ✅ 四种风格齐全，适配不同视觉需求
- ✅ 由 Tailwind CSS 团队出品，品质有保障
- ✅ 提供 React 与 Vue 组件库，接入便捷
- ✅ 支持一键复制 SVG 代码，即取即用
- ❌ 图标总量约三百余个，相对小众图标库偏少
使用方法
- 打开官网，在顶部切换 Outline、Solid、Mini、Micro 四种风格；
- 通过搜索框或分类浏览找到需要的图标；
- 点击图标即可一键复制 SVG 代码；
- 前端项目可安装 @heroicons/react 或 @heroicons/vue 组件包；
- 设计稿可下载官方 Figma 文件拖拽使用。
收费情况
完全免费，采用 MIT 开源许可证，个人与商业项目均可自由使用，无任何付费墙。
平台支持
以网站&在线应用形式提供，同时支持通过 npm 安装 React 与 Vue 组件包，并提供 Figma 源文件。
截图
相关链接
功能标签
特色
免费开源
全套图标采用 MIT 许可证，个人与商业项目均可免费商用。
四种风格
提供 Outline、Solid、Mini、Micro 四种风格，覆盖不同粗细和尺寸需求。
React/Vue 组件
官方提供 React 与 Vue 组件库，安装 npm 包即可在项目中直接使用。
Figma 源文件
配套官方 Figma 文件可供下载，方便设计师在设计稿中直接调用。
与 Tailwind 契合
由 Tailwind CSS 团队打造，与 Tailwind 生态的配色和尺寸体系天然契合。
即点即复制
点击任意图标即可一键复制 SVG 代码，无需注册即可快速取用。
替代方案
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
