MDI vs Material Symbols – What's the Difference?

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,009

License

Apache-2.0

Apache-2.0

Author

Pictogrammers

Google

Category

Material

Material

Multicolor

No

No

Browse Material Design Icons →Browse Material Symbols →

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

HomeAccountMagnifyBellCogDeleteHomePersonSearchNotificationsSettingsDelete

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

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

Frequently asked questions