今天推荐的「Iconshock」是一个国外免费图标搜索网站，目前收录超过 200 万个图标！图标素材超过 400+ 以上，涵盖 30 种不同风格类型，从矢量图到平面设计图示甚至是现代化插图应有尽有。使用者可以从 Iconshock 免费下载 72px 以下（包括 24px、32px、48px 和 64px）图标，而且不用注册登入帐户。
另一个值得一提的是 Iconshock 允许使用者直接在线上变化不同的配色风格，一般来说，寻找图标时必须受限于它的设计风格和颜色，但 Iconshock 可以让使用者自定义颜色、大小或加入配件，使得图标看起来效果一致，也更能与你的网页相衬。除此之外，Iconshock 也提供许多的免费图标集，开放让搜寻图标的开发者可以线上预览、免费下载！
Iconshock
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 是个非常方便的选择。
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
复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。
程远
31676.9w人气 6816文章
发评论！每天赢奖品
点击 登录 后，在评论区留言，系统会随机派送奖品
2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助 联系我们
这么设计才好玩
已累计诞生 657 位幸运星
发表评论 已发布1条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓