material-icons
packageThese 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):
Each of the fonts has these design axes, which can be varied in CSS, or in many more modern design apps:
The following directories in this repo contain specifically Material Symbols (not Material Icons) content:
What is currently not available in Material Symbols?
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:
The following directories in this repo contain specifically Material Icons (not Material Symbols) content:
What is currently not available in Material Icons?
Read the developer guide on how to use the material design icons in your project.
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.
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.