Material design icons from Google

Addy Osmani ac6812576b Cross-reference core-icons. 9 éve
action a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
alert a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
av a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
communication a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
content a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
device a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
editor a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
file a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
hardware a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
image a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
maps a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
navigation a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
notification a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
social a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
sprites 153376c932 Regenerate spriets and fix bug making it hard to use multiple CSS/PNG sprites 10 éve
toggle a288bd9ffc Add production SVGs, which address issues #6 and #37 10 éve
LICENSE 0d73c30238 Change our license from CC-BY-SA, to CC-BY 10 éve
README.md ac6812576b Cross-reference core-icons. 9 éve
bower.json 623ff2dfa1 Bump version number for new release. 10 éve
index.html a1cdf30c1c Update index for SVG move 10 éve
package.json 623ff2dfa1 Bump version number for new release. 10 éve

README.md

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)

A live preview of the icon set is available.

Getting Started

You have a few options for getting the icons.

Download the Zip

Grab the latest stable zip archive (~57MB) of all icons or the bleeding-edge version from master.

Bower

Install the icons using the Bower package manager.

$ bower install material-design-icons

npm

You can also find all the icons on npm.

$ npm install material-design-icons

Usage

Take a look at the included index.html file for a preview of all icons included in the set. You are free to use the icons in the way that makes most sense to your project.

Structure

Icons

In general, an icon category (e.g action) will include the following directories, containing multiple resolutions of our icons.

  • 1x, 2x Web
  • 1x, 2x, 3x iOS
  • drawable hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi
  • svg

Decide on the icon resolution required for your project and copy, then reference the icons you wish to use.

Spritesheets

Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the sprites directory, under svg-sprite and css-sprite.

Using CSS Sprites

To use a CSS spritesheet, reference the stylesheet for the icon category you wish to use, then include the icon definition in your markup. E.g to use one of the play icons in css-sprite-av:

Reference the stylesheet:

	<link href="css-sprite/sprite-av-black.css" rel="stylesheet">

Create an element which will use the icon as a background:

	<div></div>

Add a class referencing the icon spritesheet and specific icon icon-ic_play_circle_outline_black_24dp, which you can get from the above stylesheet.

	<div class="icon icon-ic_play_circle_outline_black_24dp"></div>

That's it!

Don't forget to publish the corresponding CSS and SVG/PNG files when deploying your project.

Using SVG Sprites

Similarly, to use an SVG spritesheet, reference the stylesheet for the icon category, then include the icon definition in your markup.

E.g: to use one of the play icons in svg-sprite-av, reference the stylesheet:

	<link href="svg-sprite/svg-sprite-av.css" rel="stylesheet">

Create an element which will use the icon as a background:

	<div></div>

Next, make sure to set a dimension for the icon. This can either be done inline or via a class. We'll use a class for this example:

	<style>
		.svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; }
	</style>

Finally, set the dimension and specific icon svg-ic_play_circle_outline_24px, which you can get from the above stylesheet.

	<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims"></div>

Polymer Icons

If you wish to use the icon set with Polymer, we recommend consuming them via the <core-icons> element.

License

All icons are released under an Attribution 4.0 International license.