超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

今天推荐的「Iconshock」是一个国外免费图标搜索网站,目前收录超过 200 万个图标!图标素材超过 400+ 以上,涵盖 30 种不同风格类型,从矢量图到平面设计图示甚至是现代化插图应有尽有。使用者可以从 Iconshock 免费下载 72px 以下(包括 24px、32px、48px 和 64px)图标,而且不用注册登入帐户。

另一个值得一提的是 Iconshock 允许使用者直接在线上变化不同的配色风格,一般来说,寻找图标时必须受限于它的设计风格和颜色,但 Iconshock 可以让使用者自定义颜色、大小或加入配件,使得图标看起来效果一致,也更能与你的网页相衬。除此之外,Iconshock 也提供许多的免费图标集,开放让搜寻图标的开发者可以线上预览、免费下载!

Iconshock

https://www.iconshock.com/

STEP 1

开启 Iconshock 网站后直接从首页上方搜寻框输入要查找的图标名称或关键字,如果不知道要输入什麽下方也有范例可供参考,顶部选单有社群网站、iPhone、iOS、Windows 10 等特定风格(主题)的图标快速链接。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

STEP 2

例如下图是我开启「Social」也就是社群网站相关的图标库。可以看到风格一致,预设情况下显示的预览图为 72px 大小,可从左侧选项调整大小、颜色或背景色。点击上方「Free Full Pack」可一次打包、下载所有图标,不过最多只有 72px PNG 图标可免费下载,不包含原始档,如果要取得所有尺寸大小及原始档必须付费购买「Premium Full Pack」。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

将鼠标移动到图标上方,会显示 PNG、SVG 两个按钮,不过 SVG 向量格式旁边有个锁头,必须升级付费会员才能下载,免费用户只能获取一般 PNG 格式,但有各种大小可以下载其实还算耐用。若有特殊需求的话建议付费升级。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

STEP 3

点击进入图标页面,跟一般免费图库不太一样,Iconshock 可以让我们直接从浏览器线上自订,如果你不想修改,从右下角的「Download」就能选择各种图示尺寸,前面有提到:24px、32px、48px、64px 和 72px 这五种大小可以免费下载,如果要更大的尺寸或 SVG 格式必须付费升级。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

STEP 4

看到左侧的「Color」吗?如果你想要稍微调整一下图标配色风格,可以从这里快速选择、套用,而且网站已经把各种颜色分类好,例如平面化颜色、简单风格、iOS、Material Design 等等,当然也可以自己设定色值。当选择颜色后右侧预览及上方图标库的颜色风格就会统一,也能够个性化更适合你网站或APP配色风格的免费图标。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

STEP 5

Iconshock 还有另一个有趣的玩法,从上方中间挑选「配件」来加入图标,让它在组合后成为一个全新的图标。当然每一套图标可以加入的配件不同,稍微搭配几种发现组合起来效果很搭,不会有感觉突兀或不自然的状况,搭配上个步骤的配色工具,还能让这个新图标呈现出不同感觉。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

STEP 6

最前面介绍有提到,Iconshock 还有一些「免费图标库——Free Icons」可以下载,如果你比较不想自定义颜色或组合的图标,而是倾向寻找一整套图标的话,或许可从这个分类开始找起。点选上方选单的「Free Icons」就能开始浏览。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

值得一试的三个理由:

  • Iconshock 收录超过 200 万个免费图标,400 套以上图标库。
  • 线上快速变更图标颜色风格,可加入配件或调整大小。
  • 免费下载 72px 以下的 PNG 格式图示。

Devicon

「Devicon」是一款免费图标库,以收录程式语言、设计和开发工具为主,常见的技术相关标志图标都可在这个网站中找到。Devicon 提供两种使用方式:字体图标或 SVG 向量图格式,只要从网站上找到你要的图案,直接将产生的代码复制、贴上,就能快速取用图案。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

值得一提的是无论是使用哪种格式,都可通过 CSS 调整大小或显示方式,让它能使用于任何网页。除此之外,字体图标也已经支持 CDN,开发者无须自行托管档案,节省流量开销。如果你刚好需要取用这些图标,Devicon 是个非常方便的选择。

Devicon

https://konpa.github.io/devicon/

STEP 1

开启 Devicon 网站(目前版本为 2.0),右侧会列出所有图标,左侧有「超级」快速设定方法,简单来说,选择你要的图标后,快速设定下方就会显示出对应的代码,将代码复制到网站适当位置就能够显示。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

STEP 2

Devicon 也有提供 WordPress 的标志,点击后会发现图标字体有四种样式,SVG 版本有三种,看起来颜色不太一样,有些除了 Logo 外还会加入英文字体。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

STEP 3

我们把画面再拉近一点,字体版本的图标使用方式会多一行代码,主要是载入字型和 CSS,必须把这段样式表链接放到你的网站 <head></head> 部分;接着再把底下的那段代码加入网页里要显示图标的位置,重新整理页面就能看到效果。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

如果你只想单独取用一两个图标,可能 SVG 版本会更适合,至少不用载入完整字体及 CSS 样式表,在流量方面都能够大幅节省。SVG 格式是直接以代码绘制,因此只要三行代码就能直接在网页内将图标绘制出来,非常强大,有兴趣的朋友可将产生的 SVG 代码复制到自己网站测试一下。

超过200万个高质量的图标素材免费下载,还可以自定义配色和大小!

值得一试的三个理由:

  • 提供各种技术及开发人员可能会用到的标志、Logo
  • 两种格式:Icon Font、SVG 复制代码即可快速使用
  • 免费、开放原始码,已经内建 CDN 功能

「福利大放送!精致图标免费下载」

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

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

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

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

收藏 74
点赞 1

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