Material Design Icons — Google's Open Source Icon Set for Any Platform

Introduction

Material Design Icons is Google's official icon library built for the Material Design system. It provides a consistent visual language across platforms and applications, with icons covering common actions, navigation, content types, and communication patterns.

What Material Design Icons Does

• Provides 2,000+ icons covering common UI actions and concepts
• Offers five distinct styles: Filled, Outlined, Rounded, Sharp, and Two-Tone
• Ships as SVG files, web fonts, and platform-native resources
• Integrates with Android, iOS, Flutter, and web frameworks out of the box
• Follows Material Design guidelines for consistent sizing and optical alignment

Architecture Overview

The repository contains icon sources organized by category and style variant. Each icon is available as an SVG master file from which platform-specific assets are generated. Web font builds package glyphs into WOFF2/WOFF files with accompanying CSS classes. Android and iOS resource directories provide density-specific PNGs and vector drawables.

Self-Hosting & Configuration

• Install via npm, Bower, or download the release archive directly
• For web: include the CSS file and reference icons by ligature name or codepoint
• For Android: copy drawable resources or use the Maven dependency
• For Flutter: icons are bundled in the material library by default
• Custom builds can be created by selecting only the icons your project needs

Key Features

• Five style variants per icon for design flexibility
• Variable icon font support with adjustable weight, grade, and optical size
• Pixel-perfect alignment at standard sizes (18, 24, 36, 48 dp)
• Apache 2.0 license allows commercial use without attribution
• Active maintenance with new icons added in each Material Design update

Comparison with Similar Tools

• Font Awesome — broader general-purpose set with brand icons; Material focuses on UI actions
• Lucide — community fork of Feather with consistent stroke style; smaller set but very cohesive
• Tabler Icons — MIT-licensed stroke icons with consistent 24x24 grid; lighter weight
• Heroicons — Tailwind-aligned set by the Tailwind team; smaller but tightly curated
• Phosphor Icons — flexible weight system similar to variable fonts; six weights per icon

FAQ

Q: Can I use these icons in a commercial product? A: Yes. They are released under the Apache 2.0 license, which permits commercial use, modification, and redistribution.

Q: How do I use variable icon fonts? A: Load the variable font CSS from Google Fonts and set font-variation-settings for weight, fill, grade, and optical size on the icon element.

Q: Are the icons accessible? A: You should add aria-label or title attributes when icons convey meaning. Decorative icons should use aria-hidden="true".

Q: How often are new icons added? A: Google updates the set alongside Material Design releases, typically adding dozens of new icons per update.

Sources

• https://github.com/google/material-design-icons
• https://fonts.google.com/icons