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

2017/09/13 7876

今天推荐的「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 等特定风格(主题)的图标快速链接。

STEP 2

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

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

STEP 3

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

STEP 4

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

STEP 5

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

STEP 6

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

值得一试的三个理由:

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

Devicon

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

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

Devicon

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

STEP 1

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

STEP 2

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

STEP 3

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

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

值得一试的三个理由:

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

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

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

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

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

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

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/iconshock-and-devicon

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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