Material Icons

Free Google Material Symbols, ready to drop into your project

Material Symbols are the icons Google designed for Material Design — the same family you see across Android, Gmail, Google Drive and thousands of web apps. Google publishes them as open source under the Apache License 2.0. Materialicons puts all 3,927 of them in one fast, searchable place, each in three styles (outlined, rounded and sharp), filled or unfilled, at seven weights.

Google's own icon browser is built around the variable icon font. That's great when you use the font, but if you need a plain SVG, a PNG for a slide, a React or Vue component, an Android vector drawable or a Power Apps formula, you end up converting files by hand. This site gives you all of those directly, with a search that also matches Google's keywords and categories.

How to use Materialicons

1. Search. Type a name or an idea — "arrow", "delete", "weather", "cart". Search covers icon names and Google's keywords, so "trash" finds Delete. Press / anywhere to jump to the search box.
2. Preview. Click an icon to open it in the editor. Try any color or a linear or radial gradient to see it next to your design.
3. Copy or download. Copy the icon as SVG, an HTML image, a Vue or React component, a CSS background or a Power Apps formula, or download SVG, PNG (512 px), WEBP or a component file. Each icon's page adds the rounded and sharp styles, every weight, and code for HTML, React, Vue, Angular, Flutter and Android.
4. Collect. Heart the icons you need. Favorites are saved in your browser, and you can download them all at once as a ZIP.

Material Symbols or Material Icons?

Material Symbols are the current version. The older Material Icons set (Filled, Outlined, Round, Sharp and Two-tone) is no longer updated and has fewer icons. Symbols replaced its five fixed styles with three styles plus variable fill, weight, grade and optical size, so one set covers every look. If you're starting a project today, use Symbols. The comparison guide explains the differences and how to migrate.

Frequently asked questions

Are Material Symbols free for commercial use?

Yes. Google releases Material Symbols under the Apache License 2.0, which allows commercial and personal use, modification and redistribution. If you redistribute the icons themselves, include a copy of the license. Using them in an app or website's interface is the normal, intended use. See the license page and the license guide.

Is Materialicons made by Google?

No. Materialicons is an independent, free viewer for the open-source icon set. It isn't affiliated with or endorsed by Google. The icons themselves are Google's work.

Should I use the icon font or SVG files?

Use the font when you need many icons and want to change fill or weight with CSS. Use SVGs when you only need a handful of icons, want no font download, or need icons in places fonts don't work, such as emails, design tools or native apps. The HTML and CSS guide covers both.

How do I change an icon's color, fill or weight?

With the font, set color with CSS and fill or weight with font-variation-settings. With SVG, pick the file for the fill and weight you want and set the path's fill (or use currentColor). The fill and weight guide shows how.

Why can't I find an icon I've seen in a Google app?

Some icons in Google's products are product-specific and aren't in the open-source set, and some older Material Icons were renamed in Symbols. Try searching for what the icon means rather than its old name, or browse every icon A–Z.

Guides

• Using Material Symbols in HTML and CSS
• Material Symbols fill, weight, grade and optical size explained
• Material Symbols vs. Material Icons: what's the difference?
• Using Material Symbols in React and Vue
• Material Symbols license: can you use them commercially?

Looking for Microsoft's Fluent icons?

Our sister site Fluenticons does the same for Microsoft's Fluent UI System Icons, the icons of Windows 11 and Microsoft 365.