IcoMoon App 收录 5500 个免费向量图示，选取下载 SVG、PNG 图示字型

网络上有不少提供免费图示的素材库可以使用，大部分都是以风格分类，可一次下载整套图示，再从图示集找出自己需要的图示设计，除了常见的 PNG 格式以外也会有 SVG 向量图档，文件容量更小，也可自行设定要使用的尺寸大小或颜色等等，或是透过网页字型（Webfont）形式只要载入 CSS 样式表，就能以程序码载入特定图案。

本文要介绍「IcoMoon」是一个提供精緻设计图示集网站，其中有个 IcoMoon App 功能非常方便好用，可以浏览超过 5500 个免费向量图示，选择自己需要的图案在线製作为最佳化的图示字型格式（Icon Fonts），亦可产生为 SVG 和 PNG 文件。

值得一提的是 IcoMoon App 允许使用者上传自己的图示档（仅限 SVG 格式），将图示在线转为 Icon Font 图示字型，转换后下载就能取得相关文件，包括 CSS 和示範页面都帮你直接产生，非常好用，依照说明网页将语法带入就能在特定位置载入图示。

IcoMoon App
https://icomoon.io/app/

使用教程

STEP 1

开启 IcoMoon App 会看到预设的图示集，点选左上角「Import Icons」可汇入自己手边的 SVG 图示，再从 IcoMoon 选择需要的图案然后一起打包成图示字型。

IcoMoon App 也有提供「Icon Library」图示库功能（从 Import Icons 右侧的图示库图案进入），会有需付费才能使用的图示或免费图示，分辨方式很简单，只要图示集下方显示的按钮为「Add」代表可直接加入选择，若是 Purchase 或 Go Premium 字样就必须要付费购买或升级才能使用。

STEP 2

从 IcoMoon App 选择要使用的图示图案，如果在前一个步骤有加入其他图示集，往下捲动就会看到。

从图示集右上角按钮切换显示或隐藏，也能调整每个图示集要显示的位置，选好所有需要的图示后点选下方按钮来产生 SVG、PNG 压缩档或产生字型。

STEP 3

例如我点选「Generate SVG & More」会将我选取的图示产生为两种格式，接着点左下角「Download」下载并解压缩后就会取得 SVG 和 PNG，将游标移动到图示上方会点选取得代码会出现详细资料，像是 HTML、CSS 和 Symbol definition 语法，稍微研究一下就能将图示运用到网页或是应用程序。

如果是点选「Generate Font」会出现类似画面，点选右下角「Download」也能取得製作产生后的图示字型相关文件，一样点选图示会显示相关资讯，或是解压缩文件、开启里头的 demo.html 会有示範和教程说明可以参阅。

STEP 4

除此之外，IconMoon App 有个比较特别的功能是「Quick Usage」，直接产生 CSS 样式表和相关文件，只要点选上方说明「Enable Quick Usage」开启这项功能就会出现网址，不过临时的网址只有 24 小时保存期限，仅供测试使用，其实只要将产生的文件下载回来自行託管就没有使用期限问题。

值得一试的三个理由：

1. 收录超过 5000 个向量图式，选择需要的图案製作为图示字型
2. 将图示下载为 SVG、PNG 或产生为图示字型（Icon Font）
3. 使用者可上传自己的图示档并在在线转为图示字型