google / material-design-icons

Material Design icons by Google (Material Symbols)

Material Symbols / Material Icons

These are two different official icon sets from Google, using the same underlying designs. Material Symbols is the current set, introduced in April 2022, built on variable font technology. Material Icons is the classic set, but no longer updated. More details below.

The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.

The icons are designed under the material design guidelines.

Icon Requests

We’d love to support your icon needs! Please submit your request here on GitHub as an issue.

Please note that Google Fonts does not accept user submissions of finished icon designs! There are fairly strict guidelines for Material icons, plus Google has upstream source files from which this repo is generated. Therefore, Google does not accept pull requests for icon files (whether new icon suggestions, or fixes for existing icons). Concepts are appreciated—just don’t design SVGs and submit them via pull request.

However, users are perfectly welcome to point at outside files or images as examples—for the kind of thing they want, but they won’t just be taken “as is.” This works especially well if you have multiple examples for a single icon, to help us understand the “essence” of the idea.

For example, there is a fairly universal conceptual logo/icon for “agender,” so if you were proposing Google add an agender icon in the Material style, either mentioning that, or pointing at https://www.google.com/search?q=agender+icon would be a helpful tip.

Third-party logos

Currently, Google does not include 3rd-party logos among the Material Symbols or Material Icons due to legal reasons. Some 3rd-party logos that were included in the past have since been removed.

npm Packages

Google does not currently maintain the npm package for this repo, past v3 (2016). However, user @marella is hosting the following. He tells us these are automatically updated and published using GitHub Actions. Note: Google does not monitor or vet these packages.

material-symbols

• Only WOFF2 variable fonts and CSS for Material Symbols
• Includes outlined, rounded, and sharp icons and all variations of fill, weight, grade, and optical size
• Supports Sass

material-icons

• Only WOFF2, WOFF fonts and CSS
• Includes outlined, round, sharp and two-tone icons
• Supports Sass

@material-design-icons/font

• Only WOFF2 fonts and CSS
• Lighter version of material-icons package
• Doesn't support older browsers such as Internet Explorer because of dropping WOFF (v1)

@material-design-icons/svg

• Only SVGs
• Optimizes SVGs using SVGO

Material Symbols

These newer icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.

These icons were built/designed as variable fonts first (based on the 24 px designs from Material Icons). There are three separate Material Symbols variable fonts, which also have static icons available (but those do not have all the variations available, as that would be hundreds of styles):

• Outlined
• Rounded
• Sharp
• Note that although there is no separate Filled font, the Fill axis allows access to filled styles, in all three fonts. It can also be manipulated for an animated fill effect, to indicate user selection.

Each of the fonts has these design axes, which can be varied in CSS, or in many more modern design apps:

• Optical Size (opsz) from 20 to 48 px. The default is 24.
• Weight from 100 (Thin) to 700 (Bold). Regular is 400.
• Grade from -50 to 200. The default is 0 (zero). -50 is suggested for reversed contrast (e.g. white icons on black background)
• Fill from 0 to 100. The default is 0 (zero).

The following directories in this repo contain specifically Material Symbols (not Material Icons) content:

• symbols
• variablefont

What is currently not available in Material Symbols?

• only the 20 and 24 px versions are designed with perfect pixel-grid alignment
• the only pre-made fonts are the variable fonts
• there are no two-tone icons

Material Icons

The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons?icon.set=Material+Icons

These classic icons are available in five distinct styles:

• Outlined
• Filled (the font version is just called Material Icons, as this is the oldest style)
• Rounded
• Sharp
• Two tone

The following directories in this repo contain specifically Material Icons (not Material Symbols) content:

• android
• font
• ios
• png
• src

What is currently not available in Material Icons?

• variable fonts
• weights other than Regular
• grades other than Regular
• a means to animate Fill transitions
• new icons (since updates were halted in 2022)

Material Icons update history

4.0.0 Update

• 2020 Aug 31
• Restructured repository, updated assets.

3.0.1 Update

• 2016 Sep 01
• Changed license in package.json.
• Added missing device symbol sprites.

3.0.0 Update

• 2016 Aug 25
• License change to Apache 2.0!

2.0

• 2016 May 28

Getting Started

Read the developer guide on how to use the material design icons in your project.

Using a font

The font and variablefont folders contain pre-generated font files that can be included in a project. This is especially convenient for the web; however, it is generally better to link to the web font hosted on Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
      rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
      rel="stylesheet">

Read more on Material Symbols or Material Icons in the Google Fonts developer guide.

License

We have made these icons available for you to incorporate into your products under the Apache License Version 2.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.

material-design-icons's Issues

Child icon

Please add a child(kid) icon.

Are there any plans for sport related icons?

I love the set and it would be great if you could add some sports related icons like:

• Standings
• Scores
• Bench / Replacements /Substitutians
• Starters
• Trades
• Sign Player
• Release Player
• Team / Roster
• Injuries
• Draft

Just some ideas :)

Add icon for 1d (linear) barcode please

Similar to this request, but for 1d (linear) barcodes.

Why all png files are black and white, no colors?

It's not beautiful without colors. How to make it colorful?

Add common animatable svgs

http://www.google.com/design/spec/animation/delightful-details.html#delightful-details-delightful-details

A few icons have transitions that are so common as to be ubiquitous, especially the menu/arrow transition. It would be nice if the animations were released under the same license as the core icons. Can this be included in your icon set?

Thank you! :)

These icons are absolutely fantastic and I'm putting them to use as I type this.

One question -- in a few scenarios I need 18px or 30px and there is not a corresponding element. If I apply a transformation to the element then Chrome anti-aliasing kicks in on the sub-pixels and causes an ugly blur. I resolved this by transforming the elements in InkScape and then apply PixelSnap, https://code.google.com/p/pixelsnap/, to the transformed path. This extension gracefully snaps the paths to the nearest pixel.

I'm surprisingly happy with the results, but I'm surprised that there's no easier way. I haven't worked extensively with graphics before, though. Is this just a fact of life, or did I make things overly complicated?

"Sort Options" Icon from Google Drive

The Google Drive web interface uses an icon for "Sort Options." It would be great to see that icon added to the library.

A calendar icon

1x_ios has only 24*24 and 48*48 size, which are too small or too big in the UITabbar icon

I have to use 36dp 36*36 in drawable-mdpi

Create an icon font

An icon font is being worked on at the moment and we're hoping to ship it sometime soon :)
This issue is mostly a placeholder to remind us to include it.

Include Vector Drawables

I'd really love to have the icons available as .xml vector drawables. This way they can be directly used in Android 5.0 apps. Now we have to do the translation ourselves.

same icon for component and composite

Why is the icon for "settings input composite" and "settings input component" exactly the same?

Please add those icons: storage, wrench, G+, Graph, ECG, filter, sort

Would be great to have those.

Please add a icon for navigation drawer avatar

The navigation drawer left-top corner has a avatar. It would better to provide a default icon (when user hasn't logged or uploaded its own avatar) .

This icon is 64dp (I can't find its size in Google Material Design spec, so I measured it but still not sure) and action -> account circle or default rounded avatar in Gmail/G+ may be a good choice.

Wrong filenames for 3 icons: Format textdirection l to r/functions/format textdirection r to l

Hi,
Today one issue: wrong filenames for 3 icons from the editor/ folder:
Format textdirection l to r/functions/format textdirection r to l.

http://google.github.io/material-design-icons/ needs update too because of that.

PS: Great, comprehensive icons set. Thanks for sharing so much with the FOSS community!

action/ic_settings_24px.svg, action/ic_settings_48px.svg seem to be corrupted

This could be an issue with fontastic.me, but the settings svg appears corrupted.

Add 2x PNG sprites for the icons

The current version of the icons only provide a 1 x resolution sprite. We'd ideally also ship a compatible 2 x version (retina).

Hang in tight if you're waiting on this. It'll come soonish :)

Separate packages for web and SVG icons

The current npm package weigh in at 44 MB. This takes forever to install and takes a lot of diskspace.

Would be nice if there were multiple packages so you could choose a subset of what you want:

• material-design-icons-web - only the web 1x/2x icons
• material-design-icons-svg - only the SVG icons

Might make sense to make material-design-icons just a combination of the above (read; exclude Android/iOS icons from the package) as I don't see why you would want to use npm when creating Android/iOS apps.

Viral license question-- Can non-FLOSS projects/apps use these icons?

I'm not sure if an issue is the appropriate way to ask this (maybe it is), but the CC-SA-BY 4.0 has a requirement that "if you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original." The meaning of this has been debated previously in other contexts, but I'd like to seek clarity from Google directly about the intent of this license-- these icon images, if used and credited (I assume to "Google, Inc."?), may be used as part of a non-FLOSS project without having to CC-SA-BY the entire app... right? What about other art that may "intermingle" with the CC'd art, as in screenshots, etc?

IANAL, but from the terms of the license itself, "Adapted Material", and "Adapter's License" seem to me to fall within the scope of "stuff pertaining to these images" only. But I think it would be helpful and reassuring to be explicit on this, ie "You may use these images for any kind of purpose you like-- and if you make changes to these images, THOSE ALTERED IMAGES ALONE will be licensed under the same terms, and not any other part of the app, including artistic content or executable or source code."

Or perhaps, to be even clearer, consider re-licensing without the viral "Share-Alike" requirement because I've seen it lead to confusion....

Finally, how are these icons licensed compared to the ones used by Polymer (github)?

Thanks!

Bonus question: Why no ldpi?

Some icons are wrong.

For example ic_done_white_48dp has the same size for hdpi and mdpi. And xxhdpi image is smaller than xhdpi.

Artwork bugs

• ic_android_24px.svg isn't #000
• ic_android_48px.svg isn't #000
• ic_credit_card_24px.svg has a path filled with white
• ic_credit_card_48px.svg has a path filled with white
• ic_signal_wifi_statusbar_connected_no_internet_3_26x24px.svg has a path filled with white

Add icon for QR code please

QR codes scanning is a thing, so you know may be you can add it.

Draft a contribution guide

• How to contribute?
• Any CLA material that needs signing
• Open an issue before working on PRs etc.

Include build tools in repo

Hi!

I am super curious to hear about your build process for this icon library, I would imagine that you have an awesome tool to output all of the different formats and css files. Maybe you could check the build stuff in or create a blog post?

What is the best color and alpha for icon?

Hi Material Team,

I saw in the specs that you suggest 54% alpha (#000000) for icons.
In current android specs, you sugest:

Colors: #333333
Enabled: 60% opacity
Disabled: 30% opacity

and

Colors: #FFFFFF
Enabled: 80% opacity
Disabled: 30% opacity

My questions are:

• Why released icons are different with the specs?
• What the best practices for icon color on other background color (not black and white), for example yellow color (#ffeb3b)?

Thanks!
Looking for your feedback!

Best regards,
Henry

P/S:
Checkout:
http://www.google.com/design/spec/style/color.html#color-ui-color-application
http://developer.android.com/design/style/iconography.html

Device Temperature and Weather Icons

I thought it would be a good idea to add "Device Temperature" and "Weather" Icons to the mix. Thanks.

Can you make a SVG file to contain all icons?

I ask because I find the icons very nice and would love to be able to use them as a @fontface webfont.

Thanks

action/ic_favorite_24px.svg, action/ic_favorite_48px.svg seem corrupted

Fontastic.me has trouble rendering this icon:

SVG bugs

Some of the optimized SVGs are triggering librsvg bugs (Gnome SVG renderer which is used among many apps). Usually original AI exported SVGs or SVG designers like Inkscape know how to deal with such issues.

Just wanted to let you know if you like fix such issues.

"Cake" shape looks like Unicode U+1F4A9

I'm really really sorry to raise this issue and probably this says more about myself than about the icon set's design, but...

...see for yourselves:

vs

Textdirection icons incorrect

It seems that the icons for textdirection are not correct. L-to-R is a sigma character and R-to-L is pointing the wrong way (L-to-R).

how to change the svg sprite color?

Hello, I use the example code to add a svg sprite icon in my html code but how to change a color of the icon?

I wrote

.svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; fill: red;} an dnothing happen. hel me please

ActionBar 32dp icons

Why there aren't icons at 32dp?
https://developer.android.com/design/style/iconography.html

Add Windows/Linux/Mac/Android/iOS icons

As a web developer who is building a download page,
I need icons to show what platform each download is,
but these icons are not available in this icon suite.

I want official platform icons included in this repo,
so that I can avoid sourcing my own and having inconsistent icon styles.

keyboard alt and timer auto icons are incorrect

The keyboard alt icon is a smiley face (same as mood, insert emoticon, etc.) and the timer auto icon is the same as person. I'm assuming these are just temporary icons until actual icons can be developed, but these icons don't really make sense in their current context.

See the hardware and image sections here: http://google.github.io/material-design-icons/.

Sprites directory missing from download?

I downloaded the zip archive from here and after reading this I'd like to try working with SVG sprites. Problem is, I can't find the sprites directory anywhere in the download. Please let me know if I'm being dumb?

Sprite CSS bug

It's impossible to use two different sprites in the same file.
Could you rename "icon" to "icon-action" for "sprite-action-black.css", and the same for each css files

http://jsfiddle.net/tiftof69/43ajgom8/

Youtube?

Hello!
I'm working on my website, and I need a Youtube icon, but when I search in the icons, I don't see any Youtube icon... 😢
Could you create one, or give my the path if there's already any?
Thank you anyway!

Are the names for ic_volume_off and ic_volume_mute swapped?

Hey,

ic_volume_off shows a volume icon with a slash through it. ic_volume_mute shows a volume icon with no volume bars coming out of it and no slash through it.

I think it's common to see a slash through the volume icon when volume is muted. It surprised me to see this associated with 'off' and not 'mute.' Is this intentional?

'Invisible' shapes appear when importing

Hi Josh,

I'm following up re the below issues because I have new information:

#32
#31
#30

I've been in touch with Fontastic.me's Vincent Le Moign, and his response to the issue is pasted below. He's also asked if I could put you in touch with him so you two can discuss a solution in-depth. Vincent's email is [email protected]. Feel free to CC me ([email protected]) if needed:

All the icons which cause problems have a transparent shape that you don’t normally see, but that cause a problem when you import it.
(as the shape really exists even if invisible)

For example, I’ve fixed the magnifier icon you mentioned, and you can see that it’s imported without problem with Fontastic below:

I’ve attached to this email the original magnifier icon, and the fixed one.

Have a look and try to import, you’ll see.

This is actually a classic problem, and I detail how to fix in the Fontastic FAQ: http://fontastic.me/faq

"settings" icon missing on png sprite

"Settings" icon is missing in png sprite (between "search" and "settings applications"

material-design-icons/sprites/css-sprite/sprite-action-*.png

Hierarchy inside out

I think it would be better to invert the hierarchy:
1x_ios--------------->| action
1x_web                  | alert
2x_ios                    | av
2x_web                  | communication
3x_ios                    | content
drawable_hdpi       | device
drawable_mdpi      | editor
drawable_xdpi       | file
drawable_xxdpi      | hardware
drawable_xxxdpi    | image
svg                         | maps
LICENSE                | navigation
README.md          | notification
browser.json           | social
index.html               | sprites
package.json          | toggle

It occurred to me when, I was finding a way to just download all the svg icons.

Changing SVG icon colors

At the moment, coloring the SVG icons dynamically is very difficult.

Issue is that it uses the svg icons as a background-image, which cannot be directly manipulated by the DOM. As a developer, this limits the use of the material-design-icons compared to, say, bootstrap glyphicons, which are powerful because they're treated in css as fonts.

Could there be an easy way to inject the SVG directly in-line to the HTML? At the moment I have to directly edit the XML or the SVG file itself to achieve the results I'd like.

maps/ic_map_24px.svg, maps/ic_map_48px.svg appear to be corrupt

This is possibly an issue with fontastic.me, but these map icons seems to be corrupted.

The icon zip file is corrupted

The zip file cannot be unzip.

Please add those icons: filter, storage, wrench, G+, Graph, ECG

Would be great to have those.

Where are the SVGs?

You state that SVGs are included in the release, but the zip I downloaded has only pngs!

Optimize PNG images

We currently auto-generate many of the icons in the repo, but our PNGs could be optimized further. We definitely plan on doing this but want to work it into our asset optimization flow at Google first.

Side: at some point, we may well open-source the tooling process around the icons or add them to this repo but our current focus is on making sure the icons provided are as polished and consumable as possible.

The zip file only contains the "acttion" icons. Its missing all other icons.

I just downloaded the zip file. And it only has an "action" directory. It misses all other icons.

Optimize SVG please

• mnification is helpful (whitespace removed)
• Prep for web usage; expect filename mangling (concocting, optimizers like CloudFlare)
  • Might be better to include IDs for individual icons & not just the sprite sheet.
  • Some sort of <!-- comment -->, meta, or description to insert author & copyright
    • helps source upgrades & bug reports if you know where the file came from
    • need license legal notification, epically when transferring business asses.

Usually I'm all about making files small as possible, but we're all used to having mininfied files having ID info & legal notifications in a header-comment. Easier to take out stuff we're certain we don't need later than trying to find and add it when it is too late.

I was thinking about tweaking your Gulp/Grunt config, but you haven't released it yet. ;)