Google Material Design Icons

In October of 2014 I blogged about Google releasing 700+ free categorized icons. Well they’ve just updated their collection with an additional 96 new icons that you can use personally or commercially without attribution whatsoever. Their license (CC-BY 4.0) does however include a blurb saying it won’t hurt their feelings if you include attribution on your about page. I’ve included their license at the bottom of this post for those interested.

These icons are all material design icons, which means they adhere to Google’s Material Design principles. In Google’s words:

Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.

Not only are these icons available in resolution independent formats, but they also come in a bunch of other flavours such as: 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). So that’s a pretty serious offering for likely whatever you have in the works.

Oh yeah, and if you just want to begin using them on your website and kind of know what you’re doing, you can just include the link to their Material Design Icons web font like so:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Though, if you know what you’re doing you’ll likely want to create your version of the web font because you won’t be using anywhere near the 700+ fonts on your site right? IcoMoon.io has an app that allows you build quite easily your own version of the font using only the icons you want. Highly recommended. Plus once you’ve done it once or twice you’ll be okay with creating and implementing your own web fonts in future projects.

You can download all the icons, roughly a 57MB zip file right now, from their Github repository and read more about formats and implementations via their Material Icons Guide. Lot’s of helpful implementation guidelines there for web developers too.

Have fun creating!

Here’s Google’s license for these Material Design Icons found on their Github page:

We have made these icons available for you to incorporate them into your products under the Creative Common Attribution 4.0 International License (CC-BY 4.0). Feel free to remix and re-share these icons and documentation in your products. We’d love attribution in your app’s about screen, but it’s not required. The only thing we ask is that you not re-sell the icons themselves.