Material Symbols vs Material Icons – Which One Should You Use?
Google renamed Material Icons to Material Symbols. Here's what actually changed — variable font axes, icon count, and which one to pick in 2026.
If you search “Material Icons” today you’ll land on Google’s newer library, Material Symbols — and that naming overlap is the single most common source of confusion in this comparison. They are not the same icon set, and Google has explicitly positioned Material Symbols as the successor.
Naming trap: “Material Icons” (Iconify prefix ic, Google Material
Icons) is the original, now-legacy set. “Material Symbols” is the newer
variable-font library. This article is about Google’s own two libraries —
not MDI (Material Design Icons), a separate
community-maintained set covered in our MDI vs Material Symbols
comparison.
What actually changed
Material Icons (the original set, 2014) shipped as static SVGs and icon fonts in four fixed styles: Filled, Outlined, Round, and Sharp. Each style is a separate, fixed asset — to go from outline to filled you swap the whole icon reference.
Material Symbols (2022) replaced that with a single variable font. Instead of four separate styles, one icon glyph exposes four continuous axes you control with CSS: FILL (0 or 1), wght (100–700), GRAD (-50 to 200), and opsz (20–48px). One asset, near-infinite visual states.
The variable font axes
.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 (subtle emphasis) */
"opsz" 24; /* 20–48 optical size */
}Material Icons has no equivalent — each style/weight combination is a distinct icon file (baseline-home, outline-home, round-home, sharp-home), so switching styles means changing which icon you reference, not a CSS property.
Icon count
| Library | Icon count | Status |
|---|---|---|
| Material Icons | ~2,100 | Legacy — still works, no new icons |
| Material Symbols | ~3,400+ | Active — Google’s current library |
Material Symbols has more icons and is where Google ships new additions. Material Icons is frozen in place — safe to keep using in an existing project, not the right choice to start fresh with.
Which name maps to which prefix
On this site: browse Material Symbols (the
current library) and Google Material Icons (the legacy static
set, Iconify prefix ic). Both are Apache 2.0 licensed and free for
commercial use.
React / web integration
# Material Symbols — variable font or Iconify
npm install @iconify/react
# Material Icons — legacy MUI package
npm install @mui/icons-material// Material Symbols via Iconify (recommended for new projects)
import { Icon } from "@iconify/react";
<Icon icon="material-symbols:home" width={24} />;
// Material Icons — static, per-style import
import HomeIcon from "@mui/icons-material/Home";
<HomeIcon />;When to use each
| Use case | Pick |
|---|---|
| New project, want CSS-controlled weight | Material Symbols |
| Existing app already using Material Icons | Material Icons (no need to migrate) |
| Need fill/weight animation on hover | Material Symbols |
| Flutter or Android native app | Material Symbols |
Legacy MUI (@mui/icons-material) codebase | Material Icons |
| Smallest possible per-icon asset | Either — both tree-shake well |