MDI vs Material Symbols: Community SVG or Google Font

Both MDI and Material Symbols follow Material Design principles, but one is a community project and the other is the official Google library. In 2026, Material Symbols is the clear successor for new projects.

Library

Material Design Icons

Material Symbols

Samples

Icons

7,447

15,611

License

Apache-2.0

Author

Pictogrammers

Google

Origins

Material Design Icons (MDI) is maintained by Pictogrammers, a community organization. It launched as an extended community version of the original Google Material Icons, covering niche categories that Google’s official set never addressed. Today it ships 7,400+ icons under Apache 2.0.

Material Symbols is Google’s official icon library, the direct evolution of Material Design Icons (the original Google set). Launched in 2022 with variable font technology. It allows CSS-controlled weight, fill, grade, and optical size from a single font file. It ships ~3,400 icons, all free under Apache 2.0.

The same icon in both libraries

Cog

The variable font advantage

Material Symbols’ killer feature is CSS-controlled variation axes:

/* One font file, infinite stylistic variations */
.icon {
  font-family: "Material Symbols Outlined";
  font-variation-settings:
    "FILL" 0,
    /* 0 = outline, 1 = filled */ "wght" 400,
    /* 100–700 weight */ "GRAD" 0,
    /* -50 to 200 grade */ "opsz" 24; /* 20–48px optical size */
}

MDI ships as SVG components, each icon is a static SVG file with no variation axes. To change weight or style, you use a different icon name or a different MDI component variant.

Icon count comparison

Library	Icon count	Source
MDI	7,400+	Pictogrammers community
Material Symbols	~3,400	Google (official)

Info

MDI has 2× more icons than Material Symbols. For niche categories, specific app domains, medical, IoT, weather, MDI is likely to have what Symbols doesn’t.

React integration

# MDI: via @mdi/react
npm install @mdi/react @mdi/svg

# Material Symbols: via @mui/icons-material or Iconify
npm install @iconify/react

// MDI
import Icon from "@mdi/react";
import { mdiHome } from "@mdi/js";
<Icon path={mdiHome} size={1} />;

// Material Symbols via Iconify
import { Icon } from "@iconify/react";
<Icon icon="material-symbols:home" width={24} />;

When to use each

Use case	Pick
New Material Design app	Material Symbols
Need 5,000+ icon variety	MDI
CSS variable font control	Material Symbols
Existing MDI codebase	MDI
IoT, medical, niche categories	MDI
Flutter / Android native	Material Symbols

Frequently asked questions

Is MDI officially from Google?

No. MDI (Material Design Icons) is maintained by Pictogrammers, a community organization. Material Symbols is the official Google-maintained icon library.

Which has more icons, MDI or Material Symbols?

MDI has 7,400+ icons, significantly more than Material Symbols' ~3,400. MDI covers more niche categories including medical, IoT, and specialized professional icons.

Does MDI support variable font like Material Symbols?

No. MDI ships as SVG components or individual SVG files. Material Symbols uses a variable icon font allowing CSS-controlled weight, grade, optical size, and fill from a single font file.

Are MDI and Material Symbols visually compatible?

They share Material Design DNA so they look similar, but they're not pixel-identical, MDI icons are community-extended and may have slightly different proportions. Mixing them in a production UI is not recommended.