超多福利!1000个高质量的图标素材免费下载

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

超多福利!1000个高质量的图标素材免费下载

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

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

Maki Icons

STEP 1

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

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

超多福利!1000个高质量的图标素材免费下载

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

超多福利!1000个高质量的图标素材免费下载

STEP 2

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

超多福利!1000个高质量的图标素材免费下载

STEP 3

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

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

超多福利!1000个高质量的图标素材免费下载

值得一试的三个理由:

  • Maki Icons 收录超过 300 种图案,微小却易于辨识
  • 提供 11×11、15×15 两种尺寸大小的 SVG 矢量图
  • 收录设计指南教你如何在编辑后仍保留 Maki Icons 特色

Ionicons

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

超多福利!1000个高质量的图标素材免费下载

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

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

STEP 1

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

超多福利!1000个高质量的图标素材免费下载

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

超多福利!1000个高质量的图标素材免费下载

STEP 2

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

超多福利!1000个高质量的图标素材免费下载

STEP 3

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

超多福利!1000个高质量的图标素材免费下载

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

超多福利!1000个高质量的图标素材免费下载

STEP 4

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

超多福利!1000个高质量的图标素材免费下载

值得一试的三个理由:

  • 免费顶级图标集,收录超过 700 种图标图案
  • 可直接使用 CDN 网址嵌入使用,无须下载任何素材
  • 图标轻巧,开启速度快,适用于任何大小的屏幕显示

「优设最新神器推荐

  1. 《这款国人开发的EAGLE,堪称收集和管理素材灵感的最佳利器!》
  2. 《超过5万张!免费高清可商用图库ZOOMMY 3.0重磅来袭!》
  3. 《超好用的PS字体管理插件FONTAGS(附安装方法)》

原文地址:free.com.tw

点赞 1
收藏 13
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏