酷站两连发!超过500个免费矢量图标素材可商用下载

编者按:本文推荐两个免费可商用的图标素材网站,两个都提供了一致性风格很高的线性图标集,超过500个全都可商用,赶紧来收~

本文要推荐的「Feather Icons」是一款免费、开放原始码矢量图标集,收录八大类型、总共 233 个图示,这些图示设计在 24×24 网格上,无论在功能、一致性或简约设计都具有相同特性。图标本身设计是由简单线条构成,宛如「羽毛」般轻巧,因此很适合使用于任何的开发项目。

酷站两连发!超过500个免费矢量图标素材可商用下载

如果你只单独需要其中几个图案,只要点击图示就能下载 SVG 矢量格式,调整成任何你想使用的大小,Feather Icons 亦提供所有图示打包、快速下载。除此之外,Feather 是开放原始码项目,可以在 GitHub 找到更多说明。

Feather Icon

STEP 1

开启 Feather 网站后可以看到所有收录在这套图标集的预览。

酷站两连发!超过500个免费矢量图标素材可商用下载

一共有八种图示类型,总数量超过 200 个!点击任何图案即可下载单独的 SVG 格式。透过你手边的矢量图编辑工具来编辑、调整成你需要的大小或格式。

酷站两连发!超过500个免费矢量图标素材可商用下载

STEP 2

如果想一次打包、下载所有图案,可点击网站上方的「Download」取得压缩档,解压缩后就能获取所有图标的 SVG 格式!图标也会依照类别放在不同的分类目录下。

酷站两连发!超过500个免费矢量图标素材可商用下载

 

Typicons

Typicons 是一款开放原始码、设计线条简单的免费图标集,一共有 336 种图案,使用者只需要从 Github 网站下载特定档案,再将它载入网站或项目就能使用,其中包含原始的 SVG 格式,使用者也能依照自己需求来建构你自订的图示集。

STEP 1

开启 Typicons 网站后,可以看到所有图标集里的图案,目前一共 336 种,其实好像没有限定哪一种类型的操作界面或应用程序才能用,种类还蛮完整的。

酷站两连发!超过500个免费矢量图标素材可商用下载

STEP 2

将鼠标游标移动到图标上方,除了会放大显示,还能从下方得知这个图示的名称,这是用来载入显示某个图标使用的,稍后我会再提到更详细的使用方法。

酷站两连发!超过500个免费矢量图标素材可商用下载

STEP 3

点击 Typicons 网站上方的「Download」按钮连接到 GitHub,可以取得原始码档案,最主要的是 /src/font/ 资料夹下的档案,不知道语法怎么写,请参考 demo 网页档的原始码写法。

酷站两连发!超过500个免费矢量图标素材可商用下载

STEP 4

酷站两连发!超过500个免费矢量图标素材可商用下载

在「How to use Typicons」也有简易教学,其实只要放上一段载入 typicons.min.css 样式表的语法,或者从你现有的 CSS 加入 @font-face 载入 .eot、.woff、.ttf、.svg 等几个必要档案就能使用,网站上提供范例写法,路径稍微改一下就能使用。

本文前面第二个步骤显示的图示名称其实就是 CSS 样式,透过 <span> 标记的 class 来载入图示就能使用,更多设定方法可以参考官方网站的说明文件。

酷站两连发!超过500个免费矢量图标素材可商用下载

「图标素材网站」

  1. 《酷站两连发!收录高达130万免费图标素材的两个网站》
  2. 《酷站两连发!免费打包40,000个图标+日本图标素材站》
  3. 《酷站两连发!专门提供免费简约图标素材的两个网站》

原文地址:free.com.tw

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

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

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

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

收藏 8
点赞

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。