10 sets of free Material Design icons for web designers and developers

There’s a lot more to a great design than the icons, but in some cases, tiny element of web, mobile or graphic design can mean a lot. Icons are especially important in Material Design, because they are the visual expression of a brand’s products, services, and tools.

 

The well designed icon can signify a movement, an action, a branding or meaning, and tell the application user a lot despite being so tiny. Icons are essential elements of any mobile app or web-related project, but designing your own custom icons for each of your projects is rarely practical and it takes a lot of time. On the other hand, finding suitable icons set for an app or web project in the ocean of tens of thousands of free icons available out there, also takes a lot of time. So to help you out, we have compiled a list of well-crafted Material Design icons.

All icons come in a variety of settings and are suitable for both : mobile apps and web based projects, allowing you to work and make use of them in whatever way suits you best. You’ll definitely find at least a few icon sets that you can put to a good use in your next Material Design project, whether personal or commercial.

1. Material Design Icons by Google

Official-material-design-icons

Material Design Icons are the official open-source icons featured in the Google Material Design specification.

What’s included?

  • SVG versions of all icons in both 24px and 48px flavours
  • SVG and CSS sprites of all icons
  • 1x, 2x icons targeted at the Web (PNG)
  • 1x, 2x, 3x icons targeted at iOS (PNG)
  • Hi-dpi versions of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)

Preview

Download on GitHub

2. Morphing Material Design SVG icons – SVG Morpheus

SVG-Morpheus-material-design-icons

JavaScript library enabling Material Design SVG icons to morph. Icon set implements Material Design’s delightful details and transitions. Excellent tool to reduce your JS or animation code.

Preview

Download on GitHub

3. Material Design icons for AngularJS

material-design-angularjs-icons

AngularJS directive to use Material Design icons with custom fill-color and size. This project encompasses all svg icons from Google’s official Material Design Icon repository in a form of angular directive that gives option to specify custom fill-color and size. Changes to icon will go through delightful morphing if SVG-Morpheus (refer to icon set nr.2 mentioned above) is also included in your application.

Preview live demo

Download on GitHub

4. Material Design Webfont Icons

material-design-icons-main

One of the most popular Material Design icon sets among Material Design web developers community created by Austin Andrews.
Material Design Webfont is a Bower Dist, that includes the stock and community icons in a single webfont collection.

Visit Materialdesignicons.com for detailed info

Alternatively, check out this project on GitHub

5. Material Design Icons in MD colors

material-design-icon-colors

This one is a tool, rather than stand-alone icon set. However it might be very handy for developers while creating colorful web or mobile applications, because this source code allows you to color Google’s Material Design Icons (refer to nr.1 ) with official Material Design color scheme. As described by code developers : Google’s material design icons for Android 5.0 Lollipop, colored with the material design color scheme.

Download on GitHub

6. Google’s Material Design – free icon set

Material-Design-free-icon-set

Free Material Design icon set by multiple authors. Check out full description on Behance or download directly here

7. Free Material Design icons for Powerpoint & Keynote

powerpoint-keynote-material-design-icons

To make things less messy and miserable designer Kyle Ledbetter converted 425 material design icons into native ppt & key note editable shapes! Scale & change color to your heart’s delight!

8. Material Design Icons in free PSD

iconset-material-design-psd

This free set of PSD Material Design ‘ish icons has been posted on Dribbble by Sergey and available to download it for free here

9. Material Design Icon Template for Adobe AI

material-design-icon-adobe-ai

Adobe Illustrator is one of the most popular design softwares in graphic and web design industry. This simple, Material Design Icon template by Meritt Thomas is a great starting point for graphic designers to build icons in Material Design style.

Preview & Download

10. Google inbox logo icon for Sketch

Google-inbox-material-design-icon

Excellent Google inbox icon based on Material Design guidelines, created by John Menard. Free file for Sketch application available here.

The bottom line: we have selected some of the best and free icon sets based on Google’s Material Design. However, this list could be extended as there are plenty of talented designers creating and publishing awesome Material Design icons every day. If you feel that your icons slipped out our attention, please do share it in comments below.

#materialdesign #development #app #application #apps #examples #webdesign #lollipop #Google #inspiration #keynote #showcase #android #download #free #websites #webdesign #icons

One response on “10 sets of free Material Design icons for web designers and developers

  1. Rubén

    donde está la sección de comentarios acá?

Leave a Reply