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

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

2017/08/26 22999评论区

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

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

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

Maki Icons

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」打包下载。当然在在线编辑器可修改的范围较小,效果也不一定令所有人满意,有兴趣的朋友可以试试看。

值得一试的三个理由:

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

Ionicons

「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,对于开发者来说应该会用到。

值得一试的三个理由:

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

「优设最新神器推荐

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

原文地址:free.com.tw

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/1000-icons-free-download

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 设计流程 视觉设计 配色 用户体验设计 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里