图标用得多之后，真正麻烦的往往不是画，而是怎么把它们整齐地带进项目。

把图标做成字体这件事是怎么来的

网页里的图标早年间多是切好的一张张小图，数量一多就会带来两个后果：请求次数上去，改颜色也得重新导出一遍。把图标做成字体的思路，是让它们像文字一样被排版系统管理——改大小、换颜色都跟着文字样式走。

IcoMoon 从 2011 年 11 月发布起就在做这件事，官方自述它是第一个支持生成自定义图标字体的工具。它处理的对象是矢量图标，覆盖设计、整理、重组与发布四个环节，整套流程都在浏览器里完成，本地不用额外装设计软件。

从两万枚图标里挑出要用的那几枚

官方图标库收录了两万枚以上免费开源的 SVG 图标，以成套的开源集合组成。数量之外还有一层工艺说明：这些图标经过挑选，画的时候是做手工绘制，并且都做过像素对齐，直接拿去用的时候边缘不容易发虚。

挑选的过程是「按需取用」。与其整包引入一份塞满几百枚图标的大字体，不如只勾中项目里真正用到的那些，再让工具把它们打成一个专属字体。这样生成的字体体积更贴合实际用量，加载时少背一部分用不上的东西。

输出的格式给得很宽。图片类有 SVG、PNG 与图标文件，字体类有带连字的多色图标字体，前端方向则直接给出 Elm、React、Vue 与 Flutter 的组件代码，另外还有把多枚图标合并到一张矢量资源里、通过引用符号使用的雪碧图方案。同一批挑选结果可以按项目需要换成不同形态输出，前端要组件、设计要图片、旧项目要字体，都能从同一次操作里拿到。

免费与许可这两件事要分开看

工具本身的使用门槛很低，打开网页即可开始挑选与编辑；新版应用还带上了矢量编辑器，界面上是图形操作与代码双向同步的形式，官方把它描述为以 SVG 渲染 SVG 的路子。

需要分清楚的是许可那一层。用它生成资源这件事本身没有什么额外要求，但一旦用到了图标库里的现成图标，就得按那个图标包自己的许可来办——库里的每一套图标都有独立的作者与授权说明，可以逐个查看。以官方那套 IcoMoon-Free 为例，它的许可证写明可以在知识共享署名许可与通用公共许可之间任选其一。换句话说，开源图标不等于随便用，署名与衍生作品的要求各有各的说法。

另有一处使用习惯上的提醒：免费方案生成的分享链接有效期只有一天。如果想把一份挑选结果留着长期复用，更稳妥的做法是把导出的资源包下载到本地，而不是依赖那条链接。

图标工作流的省事之处，在于挑一次就能以不同形态复用到多个地方。

使用建议：先在图标库里按类别筛选、收藏出项目要用的那一批，再一次性导出成项目需要的格式；引入现成图标前，顺手看一眼该图标包的许可说明，把署名要求记下来。