Material Symbols

Instant CSS & Tailwind Generator

Snippet updates automatically to match whichever weight you select above.

What do I do with this?

Just want to use the font? Click "Get this font on Google Fonts" to download it or add it directly to a document, design tool (like Canva or Photoshop), or your computer's font list.

Building a website? Click "Copy Font Code" to copy a short snippet, then paste it into your website's HTML (usually inside the <head> section) to use this font on your site.

Material Symbols is a variable icon font developed by Google as part of the Material Design system. It delivers a comprehensive set of clean, geometric symbols built on a consistent grid, with adjustable optical size, weight, fill, and grade settings that let designers fine-tune the visual density and style of each glyph. The icons sit within a monospace framework, ensuring predictable spacing and alignment across interfaces. The overall character is functional and neutral — these are utility glyphs designed to communicate action and meaning at a glance, not to express personality. The style ranges from outlined and minimal to filled and solid depending on configuration, making it adaptable without being decorative.

The most natural home for Material Symbols is in digital product interfaces, where it serves as the backbone of navigation, action buttons, status indicators, and form controls. Any web or mobile application that needs a scalable, consistent icon system — dashboards, admin panels, productivity tools — benefits from its systematic approach. It also works well in design systems and component libraries where teams need a shared visual language that stays coherent across products and screen sizes. A secondary use case is in developer-facing tools or documentation sites, where the monospace grid aligns naturally with technical content and code-adjacent layouts.

Best suited for: Material Symbols works best for digital interfaces requiring consistent icon systems across applications, dashboards, admin panels, and developer documentation where functional clarity and predictable spacing are priorities.

Design considerations: The monospace grid structure ensures reliable alignment and spacing in layouts, while seven weight variants from 100 to 700 allow flexible visual hierarchy without changing icon dimensions. Designers may appreciate the adjustable optical properties for balancing icon prominence against surrounding typography and interface density.

Pairing guidance: Pair Material Symbols with Roboto or Source Sans 3 to create cohesive product interfaces where the sans-serif text and icon weights coordinate naturally, or combine with Space Mono when icons need to integrate with code samples and technical documentation where monospace alignment reinforces systematic structure.

Pairs well with

Material Symbols at a glance

All 7 Material Symbols styles

Can I use Material Symbols commercially?

Yes, it's free for personal and commercial use. Material Symbols is released under the SIL Open Font License 1.1. You can use it in logos, websites, apps, videos, printed products and merchandise without paying or asking permission. The one thing you can't do is sell the font file on its own.

Fonts similar to Material Symbols

Material Symbols FAQ