共计 624 个字符，预计需要花费 2 分钟才能阅读完成。
作为前端，经常免不了使用图标的时候，尤其当自己业余开发项目，自己又没有设计做图的能力。而使用网上开源的图标是我们常见的一种做法。今天介绍一个图标网站，官网：https://heroicons.com/，目前已收集 292 个纯手绘的常见场景的图标，而且是 SVG 矢量格式，它的好处是可以任意放大缩小而不影响图标的质量。由 Tailwind CSS 开发人员制作而成。
官网中每种图标分别有线框图和实心图，缩小版三种选择：
线框图 ：24 x 24 像素长宽，1.5 像素描边，常用于导航或营销活动场景的应用
实心图 ：24 x 24 像素长宽，实体填充，常用于导航或营销活动场景的应用
缩小版 ：20 x 20 像素长宽，实体填充，常用于页面中很小元素如：按钮、表单元素和支持辅助文本
当鼠标移动到图标上，可复制出 SVG 代码，保存成 SVG 格式的文件，可在前端代码中直接使用。
如果你有改变图标颜色的需求，可以在代码中找到 fill 颜色填充属性，来改变当前的颜色值。
或者可以借助 iconfont 工具在线生成图标字体，这样可直接通过字体大小颜色的属性来设置大小和颜色。
唯一不足的地方，官网没有通过用途或场景对图标进行分类，不是很容易找到，但是可通过搜索栏输入图标的名称进行筛选。同样图标需要 Tailwind CSS 框架搭配一起使用，可以看到以上代码中有 Tailwind CSS 框架中的类名。
详细使用可参见 Github 主页介绍：https://github.com/tailwindlabs/heroicons
正文完
