手工打造高品质免费图示集,566 种图案收录各种格式

开发一项新的专案前,可能会先去把相关资源找齐,其中在介面部分一定会碰到的问题是要使用那一套图示做为主视觉,网路上已经有相当多免费图示可供下载甚至是商业使用,若非必要其实不用再重新开发,我在上一篇「超过1000 个向量图示免费下载,完美像素放大缩小不影响解析度」提过一些之前介绍过的图示素材,

本文要推荐的「Zwicon」是一套来自匈牙利的免费图示集,这套图示的特色是纯手工打造,一共有566个图案、26种分类,这些图示都是以24px网格做为基础,采用1px线条粗细和2px圆角效果,看起来相当精致且风格一致,能够呈现优异的视觉效果。

Zwicon是以满足UX / UI设计师需求而生,因此非常适合各种类型的开发项目,也会在遇到问题和缺少图案时更新图库。Zwicon附带Sketch、InVision Studio和Figma相关档案,特别注意分类命名,因此可以很轻松浏览和找到需要的图示档案,除此之外也提供 .svg、.jpg、.png、.pdf和.iconjar等格式。

未来Zwicon还会支援Axure RP、Adobe XD和桌面端字型。

如果你要将图示运用于网站或网页应用程式,Zwicon也有网页字型(webfont)格式和相关档案,只要载入.css样式表,再以程式码就能载入特定图案。

网站名称:Zwicon

网站地址:https://www.zwicon.com/

使用教学

STEP 1

开启Zwicon网站,点选「Icon set」可找到完整的图示集预览,透过上方搜寻框输入关键字快速查找特定的图示图案,或以分类浏览,在写这篇文章时Zwicon一共收录566个图示。

点选任一图示,会开启在使用Webfont时载入图示可使用的样式语法。如果你想各别下载图示,还可以点选下方「Download Svg」下载.svg格式档案。

STEP 2

点选Zwicon首页的「Free Download」免费下载图示集,这边要注意的是网站提供两种下载方式:以PayPal赞助或发布一则Twitter推文,赞助的话最少是$5美金,这里我们直接选择「Pay with a tweet」就能免费下载。

依照相关说明进行到最后一个步骤,点选「Access」就能下载Zwicon图示集

STEP 3

下载后解压缩,会取得所有Zwicon格式和相关档案,这时候打开「How to use」查看使用说明。如果是使用于网站或网页应用程式,可以载入.css样式表,再透过程式码载入特定的图示。

这里有提到Zwicon是采用「Creative Commons姓名标示-禁止改作4.0国际」授权,因此可自由使用,包括商业用途,但必须标注出处,而且改作后不得将素材重新散布。

STEP 4

至于完整的图示图案我就不在文章里放上,想预览的话可直接前往Zwicon网站,点选上方的「Icon set」就能找到完整图示。

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!