核心功能
使用指南
- 1
打开Heroicons官网https://heroicons.com，进入首页即可查看所有图标列表。
- 2
点击页面上方的Outline、Solid等样式标签，切换到需要的图标风格。
- 3
在搜索框中输入图标相关关键词，快速筛选出符合需求的目标图标。
- 4
鼠标悬停在目标图标上，点击即可直接复制对应的SVG代码。
- 5
若需要框架组件，点击导航栏的React/Vue libraries选项，查看安装调用方法。
- 6
点击Get Figma File按钮，可获取图标对应的Figma设计文件用于设计工作。
- 7
点击Documentation选项，查看完整的图标使用、自定义样式等相关说明。
- 8
将复制的SVG代码或安装的组件导入项目，调整尺寸颜色后即可使用。
优势亮点
与Tailwind CSS设计语言高度统一，使用Tailwind的项目可直接适配无需额外调整。
采用MIT开源许可，个人和商业项目均可免费使用，无版权使用限制。
提供多种尺寸和样式，同时支持主流前端框架组件，适配不同开发场景。
提供Figma设计文件和完整文档，覆盖设计、开发全流程使用需求。
使用须知
定价: Heroicons所有图标资源完全免费，采用MIT开源许可，无付费分层，所有个人用户、商业用户均可直接访问官网下载使用，无需支付任何费用，具体使用规则可参考官网相关说明。
价格和授权政策可能变化，请以官网最新信息为准
访问第三方网站时，请注意以下事项:
- 谨慎提供个人账号、密码和支付信息
- 下载文件前确认来源安全，警惕诱导性广告
- 涉及版权素材使用时，请核实授权范围
- 如遇网站无法访问或内容异常，可反馈给我们
常见问题
深度了解
Heroicons是Tailwind CSS官方团队打造的手绘风格SVG图标资源库，面向前端开发者、UI设计师等群体提供开源免费的图标资源，是Tailwind生态的重要组成部分。
该平台当前版本提供316个图标，支持Outline、Solid、Mini、Micro四种样式，覆盖24x24等多种标准尺寸，官方提供React、Vue对应的组件库，同时支持Figma设计文件下载，还可直接复制图标SVG代码使用，适配不同的工作流程需求。
其使用场景覆盖网页开发、移动端App开发、小程序开发、UI界面设计、原型制作等多个领域，开发者可直接调用组件快速搭建界面，设计师可使用统一风格的图标保持设计系统一致性。
与其他通用图标库相比，Heroicons的图标风格与Tailwind CSS设计语言高度匹配，使用Tailwind的项目无需额外调整样式即可适配，比通用图标库的适配成本更低，同时MIT许可支持全场景免费使用。
建议使用Tailwind CSS进行项目开发的团队、需要统一风格开源图标的设计师、开发个人项目的独立开发者选择使用，可直接访问官网浏览下载所需图标资源。