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 代码，无需注册即可快速取用。
替代方案
开发者工具
QuickType
QuickType 是把 JSON 样例转成强类型模型与序列化代码的生成器，适合省下接口类型的手写功夫。
Bundlephobia
Bundlephobia 是一个在线分析 npm 依赖体积与加载耗时、帮前端项目瘦身排雷的工具。
Shields
Shields 是给开源项目做状态徽章的开源服务，一条图片地址就能把构建、覆盖率等指标嵌进 README。
Transform Tools
Transform Tools 是给开发者把代码与数据格式就地互转的浏览器工具集。
Mockaroo
Mockaroo 是一个在线生成随机测试数据、并把 Schema 变成 Mock API 的工具。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
