小小图标功能大，10个最佳Material Design 图标资源你不可错过

Material design至发布以来，已然形成了其鲜明的设计风格，并渐渐成为统一 Android Mobile、Android Tablet、Desktop Chrome 等全平台设计语言规范。基于这样的趋势，设计师们对 Material Design 的青睐程度以及运用熟练度也越来越明显了。

Material design能给用户带来最贴近真实场景的使用体验，实现简洁直观的效果，这一切都和设计师对界面的把控和信息层次的掌握息息相关。而图标正是material界面设计一个必不可少的元素，对于设计师而言，丰富的图标资源意味着更快捷的设计和更多样的选择，所以本文中，我将和大家分享10个优秀的material design 图标资源，希望对您的设计有所帮助。

1. Google Material Deisgn Icons

格式：PNG, SVG

价格：免费

使用场景：Web, Android, and iOS项目

特点：900多个多种类型的图标，可供单个下载

全浏览器支持

矢量图标，适应所有屏幕和项目

支持色彩，位置，大小自定义操作

Google Material Design UI风格

该资源包含900多个material design设计系统所用的全部图标，多种尺寸选择，还包含可实际运用的网页字体。全部图标资源制作精美，完全可以在网页、Android和iOS项目中使用。该图标资源完全免费，允许再设计并分享，提供者拒绝他人进项售卖。

点击下载：https://material.io/icons/

2. Material Icons form Icons8

格式：PNG, SVG

价格：免费

使用场景：Mac和Windows的所有项目

特点：支持打包下载

提供色彩选择器，可自定义多种色彩

矢量图标，适应所有屏幕项目

提供material图标风格解析，与其他风格进行对比分析

该图标资源包含Facebook，Twitter，Youtube等各种社交媒体所用图标和各种箭头。也包括各种设计项目中所用的图标，包括设置图标，手机电话，首页图标等等。最大的特点是，该图标资源在传统的material design图标风格上加以改进，具有几分“非正统”的气息。

点击下载：http://icons8.com/material-icons/

3. Material Design Icons

格式：PNGs, SVG, XAML

价格：免费

使用场景：全平台和全系统

特点：支持单个下载，且可自定义下载格式和下载尺寸

可作网页字体

矢量图标，适应所有屏幕项目

免费更新

该图标资源库非常丰富，种类多样，包含近4000个免费图标资源。这个巨大的免费资源平台是无数的设计师分享自己的设计成果汇聚而成的，你可以在鼠标悬停的时候看到该图标的名称和其设计师。

点击下载：https://materialdesignicons.com

4. Materialpalette

格式：PNG, SVG

价格：免费

使用场景：iOS和Android

特点：16个图标种类

支持压缩包下载

矢量图标，适应所有屏幕项目

该图标资源库是典型的material design设计风格，页面提供搜索框可快速搜索你想要的图标，方便查找。该网站还提供调色板和色彩选择器。

点击下载：https://www.materialpalette.com/icons

5. Materializecss

格式：PNG, SVG

价格：免费

使用场景：全系统

特点：使用场景规则解析

图标资源大小设定讲解

该网站提供了Google的932个Material Design图标，提供免费下载。可用于设计师原型，也可直接用于开发人员开发APP。

点击下载：http://materializecss.com/icons.html

6. Material Icons Design from Flaticon

格式：Vector icon (SVG & EPS), PNG, PSD and Iconfont

价格：免费

使用场景：全系统

特点：提供直接使用图标设计模板

支持免费分享

支持批量下载

该网站提供了全面的Google Material Design图标，共分为9个页面。图标和设计风格适应于Google Material Design和Monochrome。鼠标选中任意图标，可以查看该图标更多信息，以及进行编辑、分享、添加至收藏夹等操作。

点击下载：https://www.flaticon.com/packs/material-design

7. Webalys

格式：.Sketch, .AI, .SVG, .PDF, .EPS, .Iconjar files.

价格：免费 - 350个图标下载

$87 - 1650个图标下载

$127 - 4000个图标下载

使用场景：全系统

特点：提供免费和收费两种类型的下载

Google material design设计规范

面性和线性风格

该网站是我见过的最为齐全的Material Design图标。其自身也号称是世界最大material design图标包。每个图标都可选择面性和线性风格，可用于应用程序和网站设计。

点击下载：http://www.webalys.com/nova/

8. Material UI

格式：SVGs, PNG

价格：免费

使用场景：全系统

特点：搜索框快速搜索

面性风格和线性风格具有

该图标资源库支持单个图标下载，并且每个图标有四种模式可选：Black, grey, white, SVG，且可选择多种尺寸。预览图标时可以详细查看图标信息，并且可以复制SVG代码。

点击下载：https://www.materialui.co/icons

9. Material Design Icon Template PSD

格式：PSD

价格：免费

使用场景：全系统

特点：适合设计师个人设计使用

提供配套的UI工具包

该图标资源库是设计师Anton Kosolapov上传至设计网站Uplabs进行分享的。该图标资源是一个以Material风格设计为导向的全面的图标模板。它包括指南网格，material设计形式，Android屏幕等。

点击下载：https://www.uplabs.com/posts/material-design-icon-template-psd

10. Material Design Icons By Brad Williams

格式：SVGs, PNG

价格：免费

使用场景：wordpress页面

特点：支持wordpress页面和其博客页面使用

可用于短代码

该图标是设计师Brad Williams提供，包含1000多个可以在WordPress页面和博客中使用的Material Design图标，此外，可以使用简码或HTML标记插入图标。该图标资源可以3种不同的方式使用：简码，HTML和TinyMCE。

点击下载：https://cn.wordpress.org/plugins/material-design-icons/

以上就是本文整理出的10个material design图标资源，绝大部分是免费提供，希望您能下载使用。但拥有优秀的图标资源并不意味着完成了优秀的设计，如何对这些图标资源进行有效运用呢？如何保证图标设计和APP的整体Material Design界面风格无缝融合呢？

最有效的方法就是实践设计，只有不断的实践，才能一步一步锤炼设计技能。快速运用图标资源进行设计，你需要一款高效简洁的原型工具。您可以使用国内最好的原型设计工具Mockplus进行设计。

Mockplus自身带有300多个组件，还包含2000多个矢量图标，只需简单拖拽进行界面设计。在其属性面板上，你可以对图标进行可见性、色彩、透明度等设置，还可一键将其转化为图片进行更多操作。

此外，你还可以将以上所有的图标资源导入Mockplus组件库加以利用。导入组件库后，你还可以共享给你的团队成员，提高组件复用性，来规范项目、减少工作量。

那么，如何在Mockplus中利用以上图标资源呢？我们一步一步来。

步骤一：打开Mockplus，新建一个项目。在左侧面板选中组件库图标，点击“+”新建一个组件库，并命名为material design icons，你还可以添加描述，或者更换缩略图。

步骤二：选中新建组件库“material design icons”，点击“+”在下拉框中点击导入图片，或者右键新建组件库也可以找到导入图片选项。找到下载的material design图标资源，选中想要导入的图标资源，即可导入图标至该组件库。Mockplus目前支持PNG和JPE格式的图标资源，你可以批量选中，一次性导入100个图标资源。

步骤三：此刻，你可以看到图标资源已经在你的组件库里了，你可以随时随地使用它们。如何分享这些图标资源呢？点击“+”旁边的管理按钮，进入组件库管理界面，你可以进行同步、编辑、导出、删除等操作。同步后，点击分享按钮，输想要入共享的人的Mockplus账号，即可分享该组件库给他人。他人登录自己的Mockplus账号，更新组件库，就可以看到你分享的这些图标资源了。

使用Mockplus，进行更快更简单的设计。Mockplus中有更多优秀的组件和设计可以让您快速进项原型设计，只需简单拖拽，快速呈现界面设计。此外，交互设计也只需拖拽鼠标即可完成，你可以快速完成动态原型。

更多免费material design 图标资源：

1. https://github.com/Templarian/MaterialDesign

2. https://dribbble.com/shots/1938275-Icons-Free-PSD

3. http://materialdesignblog.com/free-master-set-of-material-design-icons/

4. https://dribbble.com/shots/1932096-Material-Design-Powerpoint-Keynote-icons

5. https://www.producthunt.com/posts/material-design-icons

6. https://cdnjs.com/libraries/material-design-icons

7. https://www.iconfinder.com/iconsets/google-material-design-icons

8. https://dribbble.com/shots/1932096-Material-Design-Powerpoint-Keynote-icons

以上资源由Mockplus团队整理，了解和获得更多优质设计资源，访问Mockplus官网

小小图标功能大，10个最佳Material Design 图标资源你不可错过相关推荐

翻译 | 2015年的最佳Material Design集锦【上篇】
注:最棒的还是第一名~ 我觉得已经可以和现实结合了~ 为了庆祝一年的真棒材料设计灵感和资源,我们收集了在2015年MaterialUp排名前20位Material Design实例! 在开始之前,我 ...
Material design - 图标（二）
系统图标系统图标表示常见操作,文件,设备和目录. 概念系统图标设计简单,现代,友好,有时古怪.每个图标都缩小为最小形式,表达了基本特征. 图标形状是粗体和几何.它们具有对称且一致的外观,即使在小尺 ...
大量 Material Design 学习资源
汇集MaterialDesigh相关的各种资源. Material Design介绍: http://www.google.com/design/spec/material-design/introd ...
10 个最佳 VSCode 插件，帮助你写出更优雅的代码
英文 | https://medium.com/gytworkz/10-best-vscode-extensions-for-better-programming-2022-629688f309d5 ...
助你快速搭配 Material Design 配色方案的10款Web工具
在设计 Material Design 的过程中你会发现一个很大的问题,那就是如何大胆.灵活的使用色彩组合. Material Design 里的调色板工具将色彩描述为"受大胆排列色块并结合 ...
如何缩小计算机桌面图标,win10系统桌面图标太大如何缩小？桌面图标缩小的方法...
电脑重装win10正式版系统后,发现桌面图标很大导致没放几个图标就挤满了桌面,而且还不美观,如果没有特别深度近视,一般桌面图标大小就可以了.想要设置桌面图标,但无奈电脑小白不知如何操作?其实桌面图标大 ...
资源素材 -- Google发布750个Material Design Icon 图标
Google发布750个Material Design图标: 这个图标素材包含750个Meatrial Design系统图标,足够应付一般的APP程序需求了. 1. 24PX.48PX尺寸的SVG格式 ...
android6.0进入Material Design时代
Material Design 官方Material Design详细介绍文档:http://www.google.com/design/spec/material-design/introducti ...
【Android】进入Material Design时代
由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...

小小图标功能大，10个最佳Material Design 图标资源你不可错过

小小图标功能大，10个最佳Material Design 图标资源你不可错过相关推荐

最新文章

热门文章