# Material Design Icons: one frozen set, one variable font set, and the gap between them
> Material Design Icons holds two official Google sets built on the same underlying designs. The classic Material Icons catalog stopped taking new icons in 2022 and exposes no axes; Material Symbols is the current variable font set, with four adjustable axes, no Filled font, and no two-tone style. The npm packages most projects install are not run by Google.
**google/material-design-icons** — GitHub describes it as Material Design icons by Google (Material Symbols). The metadata lists the Apache-2.0 license. This article stays within the project description and details documented in the GitHub repository README.
- Repository: https://github.com/google/material-design-icons
- Website: http://google.github.io/material-design-icons/
- Stars: 54,051 · Forks: 9,751
- Language: Unknown
- License: Apache-2.0
- Published: 2026-08-13 · Updated: 2026-08-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/google-material-design-icons
## The classic set is frozen, the current set is not
Material Symbols and Material Icons are two official sets built on the same underlying designs, and they are nowhere near the same stage. Material Symbols was introduced in April 2022 and was built on variable font technology. Material Icons is the classic set, described as no longer updated, and the consequences are visible in its own history: version 4.0.0 on 2020 Aug 31 restructured the repository and updated assets, and the list of things Material Icons lacks ends with new icons, since updates were halted in 2022. That is several years with no additions to the classic catalog, even though the repository itself keeps receiving commits, most recently on 2026-09-25. The tags tell an older story: 4.0.0 in 2020, 3.0.2 on 2020-08-19, and 3.0.1 back in 2016, and 3.0.2 has no matching entry in the update history at all. Anyone choosing today is picking between a set that grows and a set that does not.
## Which directory you open decides which set you get
The repository is split by set, and the split is easy to miss in the tree. Two top-level directories hold Material Symbols content only: symbols and variablefont. Five hold Material Icons content: android, font, ios, png, and src. The font directory is the one self-hosting guides point at, and it is the classic set, which is the set with no variable axes, no weight other than Regular, and no grade other than Regular. A developer who grabs font expecting the modern symbols gets a fixed-weight classic font, and the fill and weight controls then do nothing at all. A seventh directory, update, sits beside these at the top level, and nothing in the README says what it holds or how the upstream generation pipeline writes into it. On the hosting question, the guidance leans away from shipping files even though the pre-generated ones are there for convenience:
```html
```
```html
```
Linking to the hosted font is described as generally better, so self-hosting from a directory is a choice you make with the knowledge that the project points the other way.
## Four axes, with ranges and defaults you have to set yourself
Material Symbols is controlled along four design axes, and each one has a stated range and a stated default. Optical Size, opsz, runs from 20 to 48 px with a default of 24. Weight runs from 100, labelled Thin, to 700, labelled Bold, with Regular at 400. Grade runs from -50 to 200 with a default of 0, and -50 is the suggested setting for reversed contrast, such as white icons on a black background. Fill runs from 0 to 100 with a default of 0. Any of the four can be varied in CSS or in modern design apps. The defaults are not automatic answers for every surface: a dark mode row that keeps the default grade gets a heavier icon than the guidelines call for, and correcting it is a value you set rather than a behavior the font infers from the background. None of this exists in the classic set, whose font is one fixed weight and one fixed grade, so any theming built on these axes ties your project to the variable fonts.
## Only the 20 and 24 px sizes sit on the pixel grid
The opsz axis invites any size between 20 and 48 px, but the coverage is narrower than the range suggests: only the 20 and 24 px versions are designed with perfect pixel-grid alignment. The 24 px size is also where the Symbols designs came from, since they were built on the 24 px designs from Material Icons. The consequence is that a 32 px or 48 px request produces a scaled or interpolated rendering rather than a redrawn master, and vertical stems and curves that land cleanly at 24 px can soften at 48 px, which is the range where display and hero usage tends to sit. If crispness matters at a size outside those two, inspect the rendering at that exact size before you write the value into a layout token. A related limit sits in the same list: the only pre-made fonts are the variable fonts, so there is no separate static font build to fall back on where variable font support is weak.
## There is no Filled font, and the Fill axis is the substitute
Symbols ships three variable fonts, Outlined, Rounded, and Sharp, and deliberately no Filled font, even though the oldest style in the classic set is Filled. The route to filled shapes in Symbols is the Fill axis, which reaches filled styles in all three fonts and can be manipulated for an animated fill effect to indicate user selection. That is the mechanism behind a filled favorite or a selected tab, and it is why a Symbols interface can animate a selection change that a classic font cannot: a means to animate Fill transitions is explicitly listed as absent from Material Icons. Two limits come with it. Static instances of the icons are available, but they do not carry all the variations, since that would amount to hundreds of styles, so a static build locks one combination of fill, weight, grade, and size. The animation also lives in the variable font, so a build that resolves to static files loses it.
## Two tone exists in the classic set and has no equivalent in Symbols
Material Icons is organized as five distinct styles: Outlined, Filled, Rounded, Sharp, and Two tone. In the font, the Filled style is simply called Material Icons, because it is the oldest style. Material Symbols has three fonts and, again, no Filled font, and its not-available list includes two-tone icons outright. A Two tone icon therefore has no direct counterpart, and the layered look that style depends on has to be rebuilt by hand rather than switched on with a fill value. This is the sharpest migration edge between the two sets, and it surfaces per icon rather than per catalog: an inventory that counts styles instead of comparing them will report the classic set as fully covered by Symbols while a meaningful share of your two-tone icons are not. The classic set is also where two-tone files still live in package form, since the material-icons npm package includes outlined, round, sharp, and two-tone icons in WOFF2 and WOFF.
## The npm packages are community-run and split by format
Google does not maintain the npm package for this repository past v3, dated 2016, so the packages most projects install are hosted by a community maintainer, @marella, published automatically through GitHub Actions, and Google states plainly that it does not monitor or vet them. That belongs at the top of any decision to depend on one. The packages are also not interchangeable, and choosing wrong costs you either browser support or variable control. material-symbols carries only WOFF2 variable fonts and CSS, with the outlined, rounded, and sharp icons and all variations of fill, weight, grade, and optical size, and it supports Sass. material-icons carries WOFF2 and WOFF fonts and CSS with the outlined, round, sharp, and two-tone icons, also with Sass. The lighter @material-design-icons/font ships WOFF2 only and drops WOFF v1, so it does not work in Internet Explorer. @material-design-icons/svg is SVGs only, optimized with SVGO, with no font and no CSS involved.
## Icon changes go through issues, and third-party logos are excluded
Design contributions run one way. Icon requests are submitted as GitHub issues, and Google Fonts does not accept user submissions of finished icon designs, because the guidelines for Material icons are strict and the repository is generated from upstream source files. Google does not take pull requests for icon files, whether a new icon or a fix to an existing one, and it asks contributors not to design SVGs and submit them, while still welcoming concepts and outside examples pointed at in the issue. Several examples for a single icon are said to help convey the essence of the idea, with an agender icon offered as the model to follow. The practical result is that a missing or wrong icon cannot be patched upstream, so a fix lives in a fork or as a local override in your own product. Separately, Google does not include third-party logos for legal reasons, and logos that were included in the past have since been removed, which means brand marks are not something to plan around in either set.
## Conclusion
Start new work on Material Symbols and treat Material Icons as a fixed legacy catalog, which matters most if your existing screens use two-tone icons or a weight other than Regular. Before you depend on either, verify which top-level directory your build actually reads, pin exact versions of the npm packages because those are published and updated by a third party rather than by Google, and check that the Font variant you pick keeps the browser support you need, since the lighter WOFF2-only package drops Internet Explorer.
## FAQ
### What are material design icons?
They are two official Google icon sets built on the same underlying designs. Material Symbols is the current set, introduced in April 2022 and built on variable font technology, while Material Icons is the classic set, no longer updated. Both are released under the Apache 2.0 license and are designed under the Material Design guidelines.
### Is material design icon free?
The icons are published under Apache 2.0 for use in your products. What is not covered by that is the npm distribution: Google stopped maintaining its npm package past v3 from 2016, and the packages on the registry today are published and updated by a third party without Google monitoring or vetting them.
### Can I customize material icons?
Customization in Material Symbols is limited to four design axes: Optical Size from 20 to 48 px, Weight from 100 Thin to 700 Bold, Grade from -50 to 200, and Fill from 0 to 100. The classic Material Icons font has no variable axes, so it offers Regular weight and Regular grade only, and it cannot animate Fill transitions.
### how to use material design icons in html
Link the stylesheet from Google Fonts rather than shipping files, using one link for Material Icons and another for Material Symbols Outlined. The guidance says linking to the hosted web font is generally better, even though pre-generated files sit in the font and variablefont directories for projects that want them locally.
### how to install material design icons
For fonts, either link the Google Fonts stylesheet or include the pre-generated files from the font and variablefont directories. For npm, install one of the four community packages, which are hosted by @marella and published automatically with GitHub Actions, and pin the version, since Google does not maintain or vet them.
## Sources
- [Official documentation](http://google.github.io/material-design-icons/)
- [Official README](https://github.com/google/material-design-icons#readme)
- [Project repository](https://github.com/google/material-design-icons)
- [Release notes](https://github.com/google/material-design-icons/releases)
---
Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/google-material-design-icons