超过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 等特定风格(主题)的图标快速链接。

STEP 2

将鼠标移动到图标上方,会显示 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,必须把这段样式表链接放到你的网站部分;接着再把底下的那段代码加入网页里要显示图标的位置,重新整理页面就能看到效果。

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180208G03IWB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励