material-design-icons README

The project's README from github.com/google/material-design-icons. As one markdown file: README.md.

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 npm install size

material-icons npm install size Downloads

@material-design-icons/font npm (scoped) install size

@material-design-icons/svg npm (scoped) install size

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):

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?

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:

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

What is currently not available in Material Icons?

Material Icons update history

4.0.0 Update

3.0.1 Update

3.0.0 Update

2.0

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 (google/material-design-icons)

material
Searching Database…

54.1K ·GitHub
Material-design-icons
What is this?This is Google's official repository of Material Design icons, offering two icon sets: Material Symbols (the current, actively updated set) and Material Icons (the classic set, no longer updated since 2022).
Is this a font, SVG files, or something else?It's a mix: pre-generated variable fonts (WOFF2), static SVG/PNG icon files, and sprites, organized in folders like 'symbols', 'variablefont', 'android', 'font', 'ios', 'png', and 'src'.
How do I add these icons to my project?The recommended way for web is linking to the web font hosted on Google Fonts rather than self-hosting; the repo's font/variablefont folders also contain files you can include directly. For npm-based workflows, community-maintained packages like 'material-symbols', 'material-icons', '@material-design-icons/font', and '@material-design-icons/svg' are available.
Do I need anything special to use these icons?No build tools are required from this repo itself; you just need a way to consume fonts, SVGs, or PNGs (a webpage, Android/iOS project, or an npm package manager).
Who officially maintains the npm packages?Google does not maintain the npm packages past v3 (2016); a third-party developer (@marella) hosts and auto-publishes the current npm packages via GitHub Actions, and Google does not monitor or vet them.
What's the difference between Material Symbols and Material Icons?Material Symbols is the newer set built on variable fonts, letting you adjust Optical Size, Weight, Grade, and Fill axes in CSS. Material Icons is the older, fixed-style set with five distinct styles (Outlined, Filled, Rounded, Sharp, Two tone) but no variable-font flexibility and no new icons since 2022.
Can I get third-party brand logos in this icon set?No, Google does not include third-party logos among Material Symbols or Material Icons for legal reasons, and some that existed in the past have been removed.
What file formats are available?Depending on the package, you can get WOFF2/WOFF variable or static fonts, CSS, SVG (optionally optimized with SVGO), and PNG/sprite assets for Android and iOS.
Can I animate icon fills to show selection state?Yes, in Material Symbols the Fill axis (0-100) can be manipulated in CSS to create an animated fill effect, useful for indicating user selection — this isn't possible in the older Material Icons set.
What are similar projects?Font-Awesome, MaterialDesign, tabler-icons, heroicons, react-native-ui-kitten, mdb-ui-kit, simple-icons, fluentui-system-icons
Which topics is it in?svg-icons, icon-pack, material, fonts, ui-kit, font, icons, image, material-design, design-system, svg, graphics
Creator
google
Size
4.9 GB
Stars
54.1K
Updated
CommitOct 09Release4.0.0Aug 31
Age
12y
Commits · 90 Days