Top Related Projects
The iconic SVG, font, and CSS toolkit
Simply beautiful open-source icons
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
A scalable set of icons handcrafted with <3 by GitHub
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
✒7000+ Material Design Icons from the Community
Quick Overview
Google's Material Design Icons is an open-source project that provides a comprehensive set of icons designed according to Material Design principles. These icons are available in various formats and sizes, making them suitable for use in web, mobile, and desktop applications.
Pros
- Extensive collection of icons covering a wide range of categories and use cases
- Consistent design language following Material Design guidelines
- Available in multiple formats (SVG, PNG, webfont) for versatile implementation
- Regular updates and additions to the icon set
Cons
- Large file size when downloading the entire icon set
- Some icons may not be suitable for non-Material Design projects
- Limited customization options compared to custom icon design
- Potential for overuse, leading to less unique visual identities
Getting Started
To use Material Design Icons in your project:
- Visit the Material Icons Guide for detailed instructions.
- Choose your preferred method of implementation (e.g., web font, SVG, or PNG).
- For web projects, you can include the CSS and use icons as follows:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">face</i>
- For SVG usage, download the desired icons from the Material Icons Library and include them in your project:
<img src="path/to/icon.svg" alt="Icon description">
- For more advanced usage and customization, refer to the official documentation and explore the available options for your specific use case.
Competitor Comparisons
The iconic SVG, font, and CSS toolkit
Pros of Font-Awesome
- Larger icon set with over 7,000 icons, including brand logos
- Offers both free and paid versions with additional features
- Supports CSS pseudo-elements for easy customization
Cons of Font-Awesome
- Larger file size, which may impact page load times
- Some popular icons are only available in the paid version
- Less consistent with Google's Material Design guidelines
Code Comparison
Material Design Icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>
Font-Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fas fa-heart"></i>
Both repositories offer extensive icon libraries for web developers, but they cater to different needs. Material Design Icons focuses on providing a cohesive set of icons that align with Google's design language, making it ideal for projects that follow Material Design principles. Font-Awesome, on the other hand, offers a wider variety of icons, including popular brand logos, making it more versatile for general-purpose use.
The choice between the two depends on the project's specific requirements, design preferences, and performance considerations. Material Design Icons may be preferable for Google-centric projects, while Font-Awesome might be more suitable for projects requiring a diverse icon set or brand-specific icons.
Simply beautiful open-source icons
Pros of Feather
- Lightweight and minimalist design, offering a clean and modern aesthetic
- Customizable through simple SVG files, allowing easy color and size modifications
- Consistent 24x24 grid system for all icons, ensuring visual harmony
Cons of Feather
- Smaller icon set compared to Material Design Icons, limiting options for specific use cases
- Less frequent updates and additions to the icon library
- May not align as closely with Google's design language, potentially causing inconsistency in Google-centric projects
Code Comparison
Material Design Icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>
Feather:
<script src="https://unpkg.com/feather-icons"></script>
<i data-feather="heart"></i>
<script>
feather.replace()
</script>
Both libraries offer easy integration, but Feather requires a JavaScript call to render icons, while Material Design Icons can be used directly with CSS classes. Material Design Icons also benefit from Google Fonts integration, potentially simplifying implementation in some cases.
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Pros of Ionicons
- More customizable with SVG and web font options
- Includes animations for some icons
- Offers a wider variety of icon styles (outline, filled, sharp)
Cons of Ionicons
- Smaller icon set compared to Material Design Icons
- Less consistent with Google's design language
- May require more setup for non-Ionic projects
Code Comparison
Material Design Icons usage:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">face</i>
Ionicons usage:
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<ion-icon name="happy-outline"></ion-icon>
Summary
Ionicons offers more flexibility and customization options, making it suitable for projects that require unique icon styles or animations. However, Material Design Icons provides a larger set of icons and better integration with Google's design language. The choice between the two depends on the specific project requirements and design preferences.
A scalable set of icons handcrafted with <3 by GitHub
Pros of Octicons
- Designed specifically for GitHub's UI, providing a cohesive look for GitHub-related projects
- Smaller icon set, making it easier to navigate and choose appropriate icons
- SVG format allows for easy scaling and customization
Cons of Octicons
- Limited icon variety compared to Material Design Icons
- Less widely recognized outside of the GitHub ecosystem
- Fewer size and style options available
Code Comparison
Material Design Icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>
Octicons:
<svg class="octicon octicon-heart" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"></path>
</svg>
Both icon sets offer easy integration, but Material Design Icons uses a more straightforward approach with font icons, while Octicons relies on inline SVG for greater flexibility and customization.
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Pros of Tabler Icons
- More diverse and unique icon designs, offering a fresh alternative to Material Design
- SVG-based icons, providing better scalability and customization options
- Regular updates with new icons added frequently
Cons of Tabler Icons
- Smaller icon set compared to Material Design Icons
- Less widespread adoption and community support
- May not align as closely with established design guidelines
Code Comparison
Material Design Icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>
Tabler Icons:
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
</svg>
✒7000+ Material Design Icons from the Community
Pros of MaterialDesign
- Larger icon set with over 7,000 icons compared to Material Design Icons' ~1,000
- More frequent updates and community contributions
- Includes additional icon styles like outlined and rounded variants
Cons of MaterialDesign
- Not officially maintained by Google, potentially less consistent with Material Design guidelines
- May require additional setup or configuration in some development environments
- Larger file size due to the extensive icon collection
Code Comparison
MaterialDesign:
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4L10.5,5.5L15.09,10.09L10.5,14.68L12,16.18L18,10.18L12,4Z" />
</svg>
Material Design Icons:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
</svg>
Both repositories provide high-quality Material Design icons, but MaterialDesign offers a larger selection and more frequent updates. Material Design Icons, being the official Google repository, ensures strict adherence to Material Design guidelines. The choice between the two depends on specific project requirements, such as icon variety, update frequency, and consistency with Google's design language.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Material Symbols / Material Icons
These are two different official icon sets from Google, using the same underlying designs. Material Symbols is the current set, introduced in April 2022, built on variable font technology. Material Icons is the classic set, but no longer updated. More details below.
The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.
The icons are designed under the material design guidelines.
Icon Requests
Weâd love to support your icon needs! Please submit your request here on GitHub as an issue.
Please note that Google Fonts does not accept user submissions of finished icon designs! There are fairly strict guidelines for Material icons, plus Google has upstream source files from which this repo is generated. Therefore, Google does not accept pull requests for icon files (whether new icon suggestions, or fixes for existing icons). Concepts are appreciatedâjust donât design SVGs and submit them via pull request.
However, users are perfectly welcome to point at outside files or images as examplesâfor the kind of thing they want, but they wonât just be taken âas is.â This works especially well if you have multiple examples for a single icon, to help us understand the âessenceâ of the idea.
For example, there is a fairly universal conceptual logo/icon for âagender,â so if you were proposing Google add an agender icon in the Material style, either mentioning that, or pointing at https://www.google.com/search?q=agender+icon would be a helpful tip.
Third-party logos
Currently, Google does not include 3rd-party logos among the Material Symbols or Material Icons due to legal reasons. Some 3rd-party logos that were included in the past have since been removed.
npm Packages
Google does not currently maintain the npm package for this repo, past v3 (2016). However, user @marella is hosting the following. He tells us these are automatically updated and published using GitHub Actions. Note: Google does not monitor or vet these packages.
material-symbols 
- Only WOFF2 variable fonts and CSS for Material Symbols
- Includes outlined, rounded, and sharp icons and all variations of fill, weight, grade, and optical size
- Supports Sass
material-icons 
- Only WOFF2, WOFF fonts and CSS
- Includes outlined, round, sharp and two-tone icons
- Supports Sass
@material-design-icons/font 
- Only WOFF2 fonts and CSS
- Lighter version of
material-iconspackage - Doesn't support older browsers such as Internet Explorer because of dropping WOFF (v1)
@material-design-icons/svg 
- Only SVGs
- Optimizes SVGs using SVGO
Material Symbols
These newer icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.
These icons were built/designed as variable fonts first (based on the 24 px designs from Material Icons). There are three separate Material Symbols variable fonts, which also have static icons available (but those do not have all the variations available, as that would be hundreds of styles):
- Outlined
- Rounded
- Sharp
- Note that although there is no separate Filled font, the Fill axis allows access to filled styles, in all three fonts. It can also be manipulated for an animated fill effect, to indicate user selection.
Each of the fonts has these design axes, which can be varied in CSS, or in many more modern design apps:
- Optical Size (opsz) from 20 to 48 px. The default is 24.
- Weight from 100 (Thin) to 700 (Bold). Regular is 400.
- Grade from -50 to 200. The default is 0 (zero). -50 is suggested for reversed contrast (e.g. white icons on black background)
- Fill from 0 to 100. The default is 0 (zero).
The following directories in this repo contain specifically Material Symbols (not Material Icons) content:
- symbols
- variablefont
What is currently not available in Material Symbols?
- only the 20 and 24 px versions are designed with perfect pixel-grid alignment
- the only pre-made fonts are the variable fonts
- there are no two-tone icons
Material Icons
The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons?icon.set=Material+Icons
These classic icons are available in five distinct styles:
- Outlined
- Filled (the font version is just called Material Icons, as this is the oldest style)
- Rounded
- Sharp
- Two tone
The following directories in this repo contain specifically Material Icons (not Material Symbols) content:
- android
- font
- ios
- png
- src
What is currently not available in Material Icons?
- variable fonts
- weights other than Regular
- grades other than Regular
- a means to animate Fill transitions
- new icons (since updates were halted in 2022)
Material Icons update history
4.0.0 Update
- 2020 Aug 31
- Restructured repository, updated assets.
3.0.1 Update
- 2016 Sep 01
- Changed license in package.json.
- Added missing device symbol sprites.
3.0.0 Update
- 2016 Aug 25
- License change to Apache 2.0!
2.0
- 2016 May 28
Getting Started
Read the developer guide on how to use the material design icons in your project.
Using a font
The font and variablefont folders contain pre-generated font files that can be included in a project. This is especially convenient for the web; however, it is generally better to link to the web font hosted on Google Fonts:
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
rel="stylesheet">
Read more on Material Symbols or Material Icons in the Google Fonts developer guide.
License
We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.
Top Related Projects
The iconic SVG, font, and CSS toolkit
Simply beautiful open-source icons
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
A scalable set of icons handcrafted with <3 by GitHub
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
✒7000+ Material Design Icons from the Community
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot