10 Best Free Material Design Icons Resources in 2018 for Inspiration

Material Design, a full platform design language, provides standards for designers to create websites and apps with a consistent look and feel. From the overall interface to the tiny details, Google proved it’s digital perfection. Icons play a big role in Material Design. Material Design turns icons into meaningful signs that are the shortcuts that replace 1- 4 words. I’d like to share the 10 best free material design icon resources for your inspiration. Just pick the right ones and integrate them into your design.

1. Google Material Design Icons - Google Material Icons

Format: PNG, SVG 

Price: Free 

Usage pattern: Web, Android, and iOS projects

What’s special:

• 900+ icons all from a single, small file.
• Served from Google Web Font servers or can be self-hosted.
• Supported by all modern web browsers.
• Colored, sized and positioned entirely with CSS.
• Vector-based, looks great at any scale, retina displays, low-dpi display screens.

Google Material Design Icons provide over 900 excellent icons. They are available in a variety of sizes and densities and as a web font. Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects.

Download

2. Material Icons from Icons8 - Material Design Social Icons

Format: PNG, SVG (in any format) 

Price: Mostly free (some features of the icons are paid) 

Usage pattern: Apps for the Web, Mac, and Windows

What’s special:

• Compare Material Icons With Other Styles.
• Single Style, all icons are done by one designer so your user interface will look consistent.
• Editable Vectors, vector icons are not merged and have preserved shapes. (paid)
• Fonts Generator, pick only the icons you need and build your own, small font. (paid)
• Icon Recoloring, pick a color and it will generate recolored versions of your PNG or SVG.
• HTML Embedding, get a code to paste an icon right into your HTML.
• Mac & Win Apps, allows you to search icons quickly and works well with Photoshop.

You have access to 4,400 material design icons in any format, size and color in 20 seconds. There are social media icons like Facebook, Twitter, Youtube, and all kinds of arrows. It also has basic ones like phone, home, and settings. If you are up for something more unorthodox, this is the right place for you.

Download

3. Material Design Icons

Format: PNG, SVG, XAML 

Price: Free 

Usage pattern: All systems

What’s special:

• Free updates.
• Supports download separately, in single file.
• Web font is available.
• Vector drawable, including line icons and solid icons.
• Supports open source.

This icon resource library is very rich and contains varied types with nearly 4000 free icon resources. This huge free resource platform is a collection of numerous UX/UI designers sharing their own design results. You can see the name of the icon and its designer when you hover over it.

Download

4. Materialpalette

Format: PNG, SVG

Price: Free 

Usage pattern: iOS & Android

What’s special:

• 16 types, including the material design search icon, and material design menu icon.
• Bulk download freely.
• Vector icons, looks great at any scale and screen size.

This library provides typical free material design icons. The page provides a search box to quickly search icons making it, easier to find and get what you really need. It also offers a palette and color picker.

Download

5. Materializecss

Format: PNG, SVG 

Price: Free 

Usage pattern: All system

What’s special:

• Usage - to be able to use these icons, you must include this line in the portion of your HTML code Download all at a time.
• Sizes - to control the size of the icon, change the font-size: 30px property of your icon.

The site offers 932 Google material design icons in total. The icons can be used in prototype design for UX/UI designers and used directly by developers to develop apps.

Download

6. Material Icons Design from Flaticon

Format: Vector icon (SVG & EPS), PNG, PSD and Iconfont 

Price: Free 

Usage pattern: All systems

What’s special:

• Support creating patterns with the icons directly.
• Share freely.
• Download all at one time.

This site offers a comprehensive arrey of Google material design icons. They are divided into 9 pages for better display. They are applicable to Google Material Design and Monochrome. You can select the icons to view more information and make operations like edit, share, or add to favorites.

Download

7. Webalys

Format: .Sketch, .AI, .SVG, .PDF, .EPS, .Iconjar files. 

Price: Free pack - 350 icons

Essential pack - $87 for 1650 icons

Ultimate pack - $127 for 40000 icons

Usage pattern: All system

What’s special:

• Various pack choices.
• Google Material Design Guidelines.
• Each icon was separately drawn in 2 versions, so you get a total of 8,000 icons.
• The Nova icons are provided in all essential files used by developers and designers, including Sketch, Illustrator, SVG, PDF.

It says “the World's Biggest Material Design Icons Pack”, and touts itself as the only icons pack that include all icons in solid and line style, for designing applications and websites. It’s legible and consistent. The Nova icons follow the Google Material Design Guidelines to ensure consistency, readability and clarity even at small sizes. You can import the 8,000 icons into the Iconjar application in one click.

Download

8. Material UI

Format: SVG, PNG

Price: Free 

Usage pattern: All system

What’s special:

• Search box to quickly find icons you need
• Both line icons and sold icons

This icon library supports single download. Each icon has four modes: Black, grey, white, SVG. There is a variety of sizes you can choose from. All the icon information can be viewed in detail. You can also copy the SVG code.

Download

9. Material Design Icon Template PSD

Format: PSD 

Price: Free 

Usage pattern: All system

What’s special:

• Personal use for designers.
• Comes with matched UI kits.
• Future updates.

It’s an ultimate template of icons designed in Material style. It includes guideline grid, material shapes for the creation of an awesome icon. It also provides android screens so you and your customers could see the icons live and scaled in all resolutions.

Download

10. Material Design Icons By Brad Williams

Format: SVG, PNG 

Price: Free 

Usage pattern: All systems

What’s special:

• Enables 1000+ Material Design icons within WordPress pages and posts.
• Shortcode generator – includes an easy-to-use TinyMCE pop-up shortcode generator.

These icons are is provided by designer Brad Williams; this resource contains more than 1000 Material Design icons that can be used on WordPress pages and blogs. In addition, icons can be inserted using shortcodes or HTML tags. The icon resource can be used in 3 different ways: shortcode, HTML and TinyMCE.

Download

I have provided what I consider to be the 10 best material design icon resources from my side. Since most of them are free of charge, you can try one or all them out. We all know that icons affect user experience. So, how do you use them effectively? How do you integrate them into your projects? How so you ensure that the icons match with the overall Material Design interface?

You need to practice. Practice makes perfect. We all know that prototyping is of great importance. When you use the right prototyping tool, you can build an app with a good-looking interface and excellent interactions quickly and effortlessly. Here I take Mockplus as an example. I will show you how to quickly use those icons in design with this tool.

Powerful input icon resources in Mockplus

Mockplus comes with more than 300 components and over 2,000 vector icons itself. With a simple drag and drop, you can build interface design. In its properties panel, you can set icons for visibility, color, transparency, etc. You can also convert them into pictures for more applications with a single click.

Easily make use of the above material icons resources in Mockplus

You can also import all the above icon resources into the Mockplus component library. You can also share them with your team members to improve component reusability and reduce workload.

How to use the above icon resources in Mockplus? Here we go.

1) Create a component library

Open Mockplus and create a new project. Select the component library icon on the left panel, click "+" to create a new component library and name it as “material design icons”. You can also add descriptions or change thumbnails.

2) Import material icons

Select the library "material design icons", and click “import image” on the drop-down menu of the "+" icon, or right-click on the library can also find the import image options. Then with one click, you can import the icons in Mockplus with a batch of 100 icons at a time. Mockplus currently supports PNG and JPE format icon resources.

3) Share you component library

Now you can see that the icons are already in your component library. How do you share these icon resources? Click the management button next to the "+" icon to enter the component library management interface. Here you can synchronize, edit, export, and delete the component. Click “share to” then add the accounts of your team members in order to share it with them.

More free material design icons resources:

1. Material Design

This repository contains all the planning for current and work-in-progress Material Design Icons. It also contains converted icons from Google's official icon set. Not that SVG icons are not compressed in GitHub. You will need to manually edit the CSS file to remove the version query string.

Download here：https://github.com/Templarian/MaterialDesign

2. Material Design Blog

This is a free master set of beautiful Material Design icons by Jurre Houtkamp. It contains colorful, bold, well-crafted, Material Design style icons from Amsterdam based designer Jurre Houtkamp. It’s available in .icns, .ico and .png file type.

Download here：http://materialdesignblog.com/free-master-set-of-m...

3. Material Design Powerpoint & Keynote icons

Powerpoint & Keynote is still used in the business world. To make things less miserable, this designer converted 425 material design icons into native ppt & key editable shapes! You can change scale and color freely.

Download here:https://dribbble.com/shots/1932096-Material-Design...

4. Material Design Icons

750 free open-source glyphs from Google.

Download here: https://www.producthunt.com/posts/material-design-...

5. Material-design-icons

Material design by Google. It includes all versions.

Download here: https://cdnjs.com/libraries/material-design-icons

6. Google Material Design icons

617 vector icons that you can freely add to your collections.

Download here: https://www.iconfinder.com/iconsets/google-materia...

Related readings:

7 Ways to Get Vector Icons For UX/UI Design

120+ Free Set PSD Colorful Ficons Icons Download