Heroicons – Tailwind团队的免费开源图标

1个月前更新 345 0 0
收藏 0

Tailwind CSS团队出的免费开源UI图标，outline和solid两套、MIT授权可免费商用无需署名，配Tailwind顺手。

收录时间：
2026-06-25
打开网站手机查看
Heroicons – Tailwind团队的免费开源图标Heroicons – Tailwind团队的免费开源图标
Heroicons – Tailwind团队的免费开源图标官网首页截图打开网站

Heroicons 是 Tailwind CSS 团队维护的一套免费开源 SVG 图标库，专门为网页界面和产品设计准备。整套图标风格统一、线条精简，既能直接下载 SVG 文件使用，也能通过代码包接入 React、Vue 项目。目标用户是前端开发者、UI 设计师，尤其是本来就在用 Tailwind CSS 做界面的团队。

核心功能

提供 outline（线性）、solid（实心）两大风格，另外还有 mini、micro 两种小尺寸版本，分别对应 24×24、20×20、16×16 的常见使用场景。目前收录 316 个手工绘制的图标，覆盖导航、操作、状态提示等常见界面元素。每个图标都能直接复制 SVG 代码，或者点击下载单个 SVG 文件，不需要额外处理。官方还提供对应的 React、Vue 组件包，通过 npm 安装后可以像组件一样直接引用。开源代码托管在 GitHub 上，同时提供 Figma 社区文件，设计师可以在 Figma 里直接拖用现成图标。整套图标的风格和 Tailwind CSS 的设计语言高度一致，配合 Tailwind 项目基本不需要额外调样式。

国内可用性与注册方式

heroicons.com 国内可以直接打开，页面全英文，不需要注册账号、不需要登录，打开网站选中图标直接复制代码或下载文件即可使用。如果通过 npm 安装组件包，或者去 GitHub、Figma 拿源文件，同样不需要在 Heroicons 官网单独注册。

价格与免费额度

Heroicons 完全免费，采用 MIT 开源许可协议，个人项目和商业项目都可以免费使用，无需署名，官网没有设置付费版本或订阅计划。

三步上手

  1. 打开 heroicons.com，在页面顶部切换 outline、solid、mini、micro 几种风格。
  2. 用搜索框找到需要的图标，点击图标后选择复制 SVG 代码或直接下载文件。
  3. 把 SVG 代码贴进项目，或者通过 npm 安装 @heroicons/react、@heroicons/vue 组件包，在代码里引用对应图标。

替代品

Tabler Icons、Lucide、Font Awesome 都是常用的开源图标库，可以按项目风格需要再对比挑选。

常见问题

Heroicons 支持哪些框架？
除了原生 SVG 文件，官方提供 React、Vue 的组件包，安装后可以当组件直接使用；其他框架可以直接用 SVG 代码或文件接入。

免费版有没有图标数量限制？
没有，316 个图标全部免费开放，不区分免费版和付费版，也没有下载次数限制。

能不能用于商业项目？
可以，MIT 许可协议允许免费用于个人和商业项目，不需要署名或注明来源。

相关导航

数据统计

标签云