本文要推荐的「Maki Icons」是一款开放原始码并采用 CC0 授权的免费图标库，比较特别的是这套图标专为地图设计者所开发设计，因此在这里你可以找到许多具有代表性的标志。

为了让阅读者可以一目了然，这些图标并没有太多复杂的细节设计，即使没有细看也能有极高的辨识度，Maki Icons 为了让使用者能正确编辑、修改这些图标，还准备完整的设计指南（Design Guidelines），教你如何在编修图标后又不影响到原有的简洁和易读性。

整套 Maki Icons 大约有三百多个图案，可以从项目官方网站预览，下载后会有两种尺寸的 SVG 矢量图标：11px 和 15px ，你也能够使用矢量图软件来编辑成其他大小或颜色。因为是采 CC0 授权，没有任何版权或使用上的限制，作为商业用途也没问题。

STEP 1

开启 Maki Icons 网站后可以预览 Maki 图标的所有图案，不过因为它是以地图设计师的需求而量身打造的，要放在地图里图标看起来都会比较小一些（应该也可以用在其他地方，不过我暂时还没想到）。

只要点击右上角的「Download Maki」按钮就能下载、获取所有图标 SVG 素材。

将鼠标移动到图标上方，也会显示每个图案的文件名称。下载后解压缩，就能在「icons」资料夹里找到对应的图标。

STEP 2

我认为 Maki Icons 最有价值的部份除了三百个图标，最重要的是「设计指南」相当用心，如果你想要修改图案设计，务必要仔细阅读这个页面，它有非常详细的 Maki 图标风格设计准则。

STEP 3

最后，再推荐一下 Maki Icons 网站提供的在线图标编辑器（https://www.mapbox.com/maki-icons/editor/），如果你想要先为 Maki 图标进行一些小幅度的编修，或许就能从在线编辑器来快速完成，不用自己抓下来手动编辑。

从 Maki Icons Editor 可以编辑包括颜色、背景颜色、中空效果、深色背景或加入圆角及方形外框等等，编辑后可实时预览，勾选你需要的图标然后点击右上角的「Download」打包下载。当然在在线编辑器可修改的范围较小，效果也不一定令所有人满意，有兴趣的朋友可以试试看。

值得一试的三个理由：

「Ionicons」是一款收录 700 多个高质量图案的免费图标集，它是为「Ionic Framework」开发框架设计的图标字体（Icon font），由 @benjsperry 设计，100% 免费且开放是它的特色。

Ionicons 目前已经有超过 700 种图标图案，除了使用者界面开发会用到的按钮图标外，它也收录几个常见的社群网站图标，例如：Facebook、Twitter 和 Google+ ，对于想加入社群按钮来说就很方便，不用再额外载入其他图标拖慢网页开启速度。

另一方面，Ionicons 也和 MaxCDN（现已被 StackPath 收购）合作提供免费 CDN 网址，各个地区的使用者在取用图标库时速度就会更快、更顺畅，当然也不会消耗自己的网站流量。

STEP 1

开启 Ionicons 图标集网站，点击「Download」就可取得这套完整图标。不过如果你是要使用于网站开发或在网页里使用，建议直接将 CDN 链结嵌入网站就能载入你要的图案（稍后说明）。

一般来说，我在决定要使用这套图标集以前，会先输入几个关键字来查询我需要的图案有没有被收录，或者图案设计上是不是符合我的网站风格。Ionicons 图标设计都比较精简一些，看起来很简洁，对于大部分设计来说应该都很适合。

STEP 2

点击网站上方的「CDN」或直接拖曳到 Ionicons 网页最下方，可以找到 MaxCDN 赞助的链结，这个链结也支援 SSL。如果你觉得这个托管服务不够快，也可以直接从 GitHub 将完整档案下载下来上传到自己的主机空间使用，两种方法基本上是相同的。

STEP 3

要如何在网页里调用某个图标呢？这部份可以参考 Ionicons 说明文件，里头会有一些基本使用范例。

再回到 Ionicons 网站点击你要的图标，就会出现该图标名称，将这名称作为样式就能载入图案，例如最简单的用法：<i class=”icon ion-social-facebook”></i>，照着样式名称做修改调整。

STEP 4

最后，我再推荐一下 Ionicons 提供的「Cheatsheet」也就是小抄页面，非常好用！这个页面里会有每个图标在不同大小的显示样式预览，以及样式名称（Classname）、HTML 和 CSS Content，对于开发者来说应该会用到。

值得一试的三个理由：

原文地址：free.com.tw

【优设网原创文章投稿邮箱：yuan@uisdc.com】

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com