Material Symbols is Google's current icon system, released under the Apache 2.0 licence with roughly 3,800 symbols. It supersedes Material Icons, the set that shipped with Material Design from 2014 and is now in maintenance.
The important difference is not the drawing. It is that Symbols is delivered as a variable font, where the same glyph responds to four continuous axes. That makes it uniquely flexible and also the most confusing free icon set to use correctly.
The short version
Three styles: Outlined, Rounded, Sharp. Four axes: weight (100 to 700), fill (0 to 1), grade (-25 to 200) and optical size (20 to 48). Pick one style and stick to it. Use fill for state, weight for hierarchy, and leave grade alone unless you are working on dark backgrounds.
Outlined, Rounded, Sharp
These are three separate drawings of the same icon, not axis values. You cannot interpolate between them, and you should not mix them.
| Style | Corner treatment | Reads as |
|---|---|---|
| Outlined | Slightly rounded, the default | Neutral, works almost anywhere |
| Rounded | Fully rounded terminals | Soft, friendly, consumer |
| Sharp | Square corners, no radius | Technical, precise, dense |
Pick based on your typeface. Rounded pairs with geometric humanist type such as Poppins or Nunito. Sharp pairs with tighter grotesques and works well in dense data interfaces. Outlined is the safe answer if you are unsure.
The four axes explained
| Axis | Range | What it does | Use it for |
|---|---|---|---|
wght | 100 to 700 | Stroke thickness | Matching icon weight to text weight |
FILL | 0 to 1 | Outline to solid | Selected and active states |
GRAD | -25 to 200 | Fine weight adjustment | Compensating on dark backgrounds |
opsz | 20 to 48 | Detail level for display size | Keeping icons legible when small |
The one that earns its keep immediately is FILL. Because it is continuous rather than a swap between two files, you can animate it. A bookmark filling in when tapped, rather than jumping from outline to solid, is one line of CSS transition and it is a genuinely nicer interaction.
.icon {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
transition: font-variation-settings 200ms ease;
}
.icon.is-active {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}Grade: the axis nobody understands
Weight and grade both change stroke thickness, so the obvious question is why there are two. The answer is that weight changes the icon's footprint and grade does not.
Increasing weight makes the icon visually larger and shifts the layout around it. Grade adjusts the thickness with almost no change to the shape's overall dimensions. It exists for one specific problem: light-on-dark text and icons appear thicker than the same shapes dark-on-light, an effect called irradiation. On a dark background you often want to thin the icon very slightly to compensate.
The practical recipe: on dark backgrounds, set grade to around -25. Everywhere else, leave it at 0. That is the whole of it. If you are not doing dark mode, ignore this axis entirely.
Optical size, and why it exists
Optical size is the axis that separates Symbols from every other free icon set. It does not scale the icon. It changes how much detail the icon contains based on the size it will be displayed at.
At opsz 20, the drawing simplifies: fine details are removed and strokes proportionally thicken, so the icon survives being small. At opsz 48, more detail returns and strokes proportionally thin, so it does not look clumsy when large. This is the same principle as an optical-size axis in a text typeface, where display cuts have finer detail than caption cuts.
The rule: set optical size to match your rendered pixel size. A 20px icon should use opsz 20. A 40px icon should use opsz 40. Getting this right is the difference between icons that look drawn for your interface and icons that look scaled into it. Related reading: icon sizes.
Variable font vs SVG
Google's default delivery is a font loaded from Google Fonts. That gives you the axes at runtime, and it also gives you every downside of an icon font: a render-blocking request to a third-party domain, a flash of missing icons, no multi-colour, and screen readers announcing ligature text unless you hide it properly. There is also a privacy consideration, since every page view makes a request to Google's servers, which is exactly the sort of thing your cookie policy has to account for.
Use the variable font when you genuinely need runtime axis changes, animated fill, or theme-driven weight. Use static SVG when you do not, which is most of the time. Exporting the exact variant you need as SVG gives you no external request, no FOIT, full CSS colour control and correct accessibility handling. The trade-off is set out fully in SVG vs icon fonts.
The ICON OOP tool gives you the SVG directly, so you can take the shape without taking the font.
Material Symbols vs Material Icons
| Material Symbols (current) | Material Icons (legacy) | |
|---|---|---|
| Introduced | 2022 | 2014 |
| Variable axes | Four | None |
| Styles | Outlined, Rounded, Sharp | Filled, Outlined, Rounded, Sharp, Two-tone |
| Roughly | 3,800 symbols | 2,100 icons |
| Status | Actively developed | Maintenance only |
Names carry over in most cases, so migrating is usually mechanical. The visible change is that "Filled" is no longer a separate style, it is FILL 1 on the axis.
Naming and finding icons
Material names are lowercase with underscores and lean toward the literal: home, account_circle, arrow_forward, keyboard_arrow_down. Google's own vocabulary shows through, so arrow_forward rather than arrow_right, and settings rather than gear. If a search returns nothing, try Google's word for it.
Licence in plain English
Material Symbols is Apache License 2.0. Commercial use, modification and redistribution are permitted, including in paid products. Apache 2.0 asks that you include the licence and note any significant changes you make if you redistribute the files, and it includes an express patent grant, which is one reason legal teams tend to be comfortable with it. No visible attribution is needed on your website. More on this in icon licensing.