Guides
Practical walkthroughs for using Google's Material Symbols in real projects: HTML and CSS, React and Vue, customizing fill and weight, migrating from Material Icons, and licensing.
Using Material Symbols in HTML and CSS
Three ways to put Google's Material Symbols on a web page — the icon font from Google Fonts, a self-hosted font, or SVG files — with the trade-offs and the CSS you need for each.
Material Symbols fill, weight, grade and optical size explained
What the four variable axes of Material Symbols do, which values to use, how to set them in CSS, and how to get the same looks as SVG files.
Material Symbols vs. Material Icons: what's the difference?
How Google's current Material Symbols differ from the older Material Icons — styles, variable axes, icon count, naming — and how to migrate a project from one to the other.
Using Material Symbols in React and Vue
How to use Google's Material Symbols as components in React and Vue — with the icon font or as SVG components — plus fill and weight props, accessibility, and keeping bundles small.
Material Symbols license: can you use them commercially?
A plain-English look at the Apache License 2.0 that covers Google's Material Symbols — what it allows, what it asks of you, and common questions about attribution and trademarks.