December 29, 2024

Material Icons: A Guide to Google's Classic Icon Set

For years, Material Icons have been a staple for developers needing clean, modern icons that adhere to Google's design language. While they have now been complemented by the more flexible Material Symbols library, Material Icons are still widely used and a solid choice for many projects.

This guide will explain what Material Icons are, how to use them, and how they differ from newer alternatives.

What Are Material Icons?

Material Icons is a collection of over a thousand symbols provided by Google as part of their Material Design initiative. These icons are designed to be simple, modern, and easily understood.

They come in five distinct themes:

  • Filled: The default style with a solid fill.
  • Outlined: A lighter style with outlines only.
  • Rounded: Icons with rounded corners for a softer feel.
  • Two-tone: Icons with a two-color style, using strokes and fills with different opacities.
  • Sharp: Icons with sharp corners for a more angular, geometric look.

How to Use Material Icons

The most common way to use Material Icons is via an icon font hosted on Google Fonts.

  1. Include the Stylesheet: Add the following line to the <head> of your HTML:

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    To access the other themes, you would include the appropriate stylesheet (e.g., Material+Icons+Outlined).

  2. Use them in your HTML: Use the name of the icon inside a <span> tag with the appropriate class.

    <!-- Filled Icon -->
<span class="material-icons">face</span>

<!-- Outlined Icon -->
<span class="material-icons-outlined">face</span>

Material Icons vs. Material Symbols

Material Icons are the predecessor to the newer Material Symbols. While the icons themselves are largely the same, the underlying technology is different.

  • Material Icons are delivered as separate font files for each theme.
  • Material Symbols use a single variable font file, which allows you to customize weight, fill, grade, and optical size with CSS, without needing to load multiple files.

For new projects, it's generally recommended to use Material Symbols as they offer more flexibility and better performance.

Conclusion

Material Icons remain a reliable and easy-to-use choice for web developers. Their clean aesthetic and wide range of symbols make them suitable for many applications.

However, for maximum flexibility and optimization, consider using the newer Material Symbols library or an SVG-based alternative like Lucide, which you can explore in our Icon Explorer.

Share this post