
Heroicons 是 Tailwind Labs 提供的开源 SVG 图标库,内容围绕网页和应用界面的常见操作展开。导航里的首页、工具栏里的搜索、表单旁的提示,以及文件、日历、通知等入口,都能从同一套图标中挑选,适合希望统一界面风格的设计师和前端开发者。
图标提供线框与实心样式,既可以直接复制 SVG,也可以通过官方 React 和 Vue 软件包使用。项目采用 MIT 许可,完整图标源文件可从官方仓库免费获取,浏览、复制和下载不要求注册账号。使用时仍须遵守版权与许可通知的保留要求。
核心信息
| 资源类型 | 面向网页与应用界面的开源图标库 |
|---|---|
| 素材格式 | SVG,以及官方 React、Vue 图标组件 |
| 网站语言 | 英文,按英文图标名称查找 |
| 账号要求 | 官网浏览、复制 SVG 与公开仓库下载均无需账号 |
| 免费范围 | Heroicons 完整图标库及官方组件包,不设付费图标层、会员下载区或试用期限 |
| 许可证 | MIT License |
| 商用范围 | 允许用于商业项目,并允许复制、修改、分发及销售副本,须履行许可条件 |
| 署名要求 | 复制或分发软件及其重要部分时,保留 Tailwind Labs 的版权声明和许可通知;MIT 未要求每个图标旁显示可见署名 |
资源里有什么
Heroicons 的官方软件包分成四组,分别是 24×24 线框、24×24 实心、20×20 实心和 16×16 实心。不同尺寸使用各自的 SVG 画布,挑选时可以先看图标将在按钮、菜单还是紧凑工具栏中显示,再决定采用哪一组。

SVG 适合需要缩放的界面素材。官方图标通过 currentColor 跟随 CSS 文字颜色,可在项目中统一调整配色。React 和 Vue 项目可以按名称导入所需组件;普通 HTML 页面可以直接嵌入 SVG,无需先接入这两种框架,也不强制使用 Tailwind CSS。

如何查找和下载
- 打开 Heroicons 官网,输入英文关键词,例如
home、search或folder,查找对应操作的图标。 - 选择需要的样式,复制图标的 SVG 源代码。普通网页可直接嵌入 HTML;如需单独文件,可将完整 SVG 代码保存为 UTF-8 编码的
.svg文件。 - 需要整套素材时,进入 官方 GitHub 仓库,通过 Code 菜单下载 ZIP,在
optimized目录内按尺寸和样式选择 SVG,并保留仓库的 LICENSE 文件。 - React 或 Vue 项目可按官方 README 安装
@heroicons/react或@heroicons/vue,从对应路径导入图标,例如@heroicons/react/24/outline。导入的组件名称采用大驼峰形式,并以Icon结尾。 - 放进页面后检查显示尺寸、颜色与文字对齐。只有图标的操作按钮应补上可访问名称;纯装饰图标应避免让读屏软件重复朗读附近文字。
许可与商用边界
Heroicons 采用有版权的 MIT 开源许可,并不属于 CC0 或公共领域素材。许可允许免费或有偿使用、修改、合并、发布、分发、再许可及销售副本,所以商业网站、客户项目和应用界面可以使用。交付源码、图标文件或包含其重要部分的材料时,应一并保留原版权声明和许可通知。
如果修改图标后重新分发,也应保留适用通知。把图标打包交给客户时,可以随包附上原始 LICENSE,并在项目的第三方许可说明中记录来源。MIT 本身没有要求页面上给每枚图标添加署名链接,也没有提供适销性、适用性或不侵权保证。
限制与注意事项
Heroicons 主要覆盖界面符号,照片、人物肖像和三维模型不在这套图标库的范围内。项目的 MIT 许可覆盖其图标与代码;如果另行加入品牌标识、人物照片或其他第三方素材,需要分别确认商标、肖像及素材授权,不能沿用 Heroicons 的许可结论。
本文的免费范围限定为 Heroicons 图标库及其官方组件包。官网关联的其他 Tailwind 产品属于不同项目,应分别查看条款。官方一方包提供 React 和 Vue 支持,其他框架的社区封装也应另查维护情况和许可。
适合谁
网站导航、后台管理界面、应用原型和教学演示中,如果需要一套搜索、文件、用户与状态类小图标,Heroicons 很容易按用途挑选。设计交付时可以同时注明采用的尺寸组和样式,让后续开发沿用同一套素材;需要复杂插画、品牌标识或多色装饰图形时,应另选对应资源。
本文图标配图的 MIT 版权与许可通知
MIT License Copyright (c) Tailwind Labs, Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
数据统计
相关导航


Feather Icons

Flat Icon Design
Remix Icon

Bootstrap

IFN Free Icons

icon-pit










