小小圖標功能大，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. dribbble.com/shots/19320…

以上資源由Mockplus團隊整理，瞭解和得到更多優質設計資源，訪問Mockplus官網