Material design icons
Official Material Design icon sets from Google, including variable font-based Material Symbols and classic Material Icons.
What is Material design icons?
Material Design Icons is a collection of two official icon sets from Google: Material Symbols, the current variable font-based set, and Material Icons, the classic set no longer updated. These icons follow Material Design guidelines to provide consistent, scalable, and visually appealing icons for user interfaces across web and mobile applications. They solve the problem of maintaining design coherence and accessibility in digital products.
Frontend developers and designers building web or mobile applications that adhere to Material Design principles, particularly those using frameworks like Angular, React, or Vue who need reliable, scalable iconography. It's also suitable for UI/UX designers seeking standardized icons for prototyping and production.
Developers choose this over alternatives because it offers official, high-quality icons directly from Google with seamless integration via Google Fonts, ensuring design consistency and wide browser support. The unique selling point is the variable font technology in Material Symbols, allowing dynamic styling adjustments like weight, grade, and fill without multiple icon files.
Overview
Material Design icons by Google (Material Symbols)
Use Cases
Best For
- Building web applications that require Material Design compliance and consistent iconography.
- Implementing variable font icons with adjustable optical size, weight, grade, and fill for dynamic UI effects.
- Integrating icons via Google Fonts for straightforward web usage without managing local assets.
- Developing mobile apps (Android/iOS) using pre-generated icon fonts or SVGs from the classic Material Icons set.
- Creating accessible user interfaces with scalable icons that adhere to design guidelines.
- Using npm packages for convenient icon integration in modern JavaScript projects, with options for fonts or SVGs.
Not Ideal For
- Projects requiring third-party logos or brand-specific icons not covered by Material Design
- Applications needing two-tone icon styles with modern variable font capabilities
- Teams that demand pixel-perfect icon rendering at all optical sizes beyond 20 and 24px
- Projects with strict policies against external CDNs or reliance on Google services
Pros & Cons
Pros
Material Symbols provide four adjustable axes—optical size, weight, grade, and fill—enabling dynamic styling without multiple asset files, as detailed in the variable font documentation.
Icons can be easily linked via Google Fonts, simplifying web usage without local asset management, as shown in the getting started examples with stylesheet tags.
All icons adhere to Material Design guidelines, ensuring visual coherence and accessibility across applications, which is a core philosophy stated in the README.
Available as fonts (WOFF2, WOFF) and SVGs, with npm packages for integration, offering flexibility for different development environments, as outlined in the npm packages section.
Cons
Material Icons, the classic set, is no longer updated, limiting new icon additions and fixes for users relying on this style, as explicitly mentioned in the README.
npm packages are maintained by a third-party contributor (@marella), not Google, which may raise concerns about long-term support and security vetting, as noted in the README.
For Material Symbols, only 20 and 24 px versions have perfect pixel-grid alignment, potentially affecting crispness at other sizes, a limitation admitted in the README.
Frequently Asked Questions
Related Projects
Font AwesomeThe iconic SVG, font, and CSS toolkit
FeatherSimply beautiful open-source icons
HeroiconsA set of free MIT-licensed high-quality SVG icons for UI development.
Tabler IconsA set of over 6000 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.