material-design-3-icons

Material Design 3 Icons and Material Symbols

Overview

This skill guides the implementation of Material Design 3 (M3) icons using Material Symbols — Google's variable font icon system that provides 2,500+ icons with dynamic customization through font variation axes.

Keywords: Material Design 3, M3, icons, Material Symbols, variable font icons, icon guidelines, icon accessibility, icon sizing, filled icons, outlined icons

Core Principles

Icon Philosophy

M3 icons are designed to:

1. Communicate Clearly: Icons should be instantly recognizable and universally understood
2. Adapt Dynamically: Variable font technology enables real-time customization
3. Support Theming: Icons adapt to M3 color and sizing systems
4. Enhance Accessibility: Icons supplement (never replace) text labels for critical actions
5. Express Brand: Icon weight, fill, and style can be tuned to match brand personality

Material Symbols

Three Icon Styles

Material Symbols are available in three styles, each with its own visual character:

Style	Character	Use
Outlined	Clean, lightweight	Default for most interfaces
Rounded	Soft, friendly	Approachable, casual contexts
Sharp	Precise, geometric	Technical, professional contexts

Variable Font Axes

Material Symbols use four variable font axes for dynamic customization:

Axis	Property	Range	Default	Effect
FILL	Fill	0–1	0	Outline (0) to filled (1)
wght	Weight	100–700	400	Stroke thickness
GRAD	Grade	-25–200	0	Fine weight without size change
opsz	Optical Size	20–48	24	Stroke optimization for size

Implementation

Loading Material Symbols

<!-- Via Google Fonts (recommended) -->
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

<!-- Or Rounded -->
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

<!-- Or Sharp -->
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

Basic Usage

<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">settings</span>

CSS Configuration

/* Base icon styles */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}

Customizing with Variable Font Axes

/* Default icon (outlined, regular weight) */
.icon-default {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Filled icon */
.icon-filled {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Bold icon */
.icon-bold {
  font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 24;
}

/* Light icon */
.icon-light {
  font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
}

/* Small icon (optimized for 20dp) */
.icon-small {
  font-size: 20px;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
}

/* Large icon (optimized for 48dp) */
.icon-large {
  font-size: 48px;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}

Icon Sizing

Standard Sizes

M3 defines standard icon sizes that pair with the optical size axis:

Size	Use	Optical Size (opsz)
20dp	Dense layouts, small controls	20
24dp	Default, most components	24
40dp	Large buttons, featured actions	40
48dp	Hero icons, empty states	48

Sizing with Components

/* Icon in a button */
.md3-button .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'opsz' 20;
}

/* Icon in navigation */
.md3-nav-item .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'opsz' 24;
}

/* Icon in FAB */
.md3-fab .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'opsz' 24;
}

/* Icon in large FAB */
.md3-fab-large .material-symbols-outlined {
  font-size: 36px;
  font-variation-settings: 'opsz' 40;
}

Icon Color

Icons use M3 color tokens and inherit color from their parent:

/* Default icon color */
.icon-default {
  color: var(--md-sys-color-on-surface);
}

/* Icon on primary background */
.icon-on-primary {
  color: var(--md-sys-color-on-primary);
}

/* Icon as interactive element */
.icon-interactive {
  color: var(--md-sys-color-on-surface-variant);
}

.icon-interactive:hover {
  color: var(--md-sys-color-on-surface);
}

/* Active/selected icon */
.icon-active {
  color: var(--md-sys-color-primary);
  font-variation-settings: 'FILL' 1;
}

/* Disabled icon */
.icon-disabled {
  color: var(--md-sys-color-on-surface);
  opacity: 0.38;
}

/* Error icon */
.icon-error {
  color: var(--md-sys-color-error);
}

Fill Transitions

Use fill to indicate selection state — transitioning from outline to filled:

/* Toggle fill on selection */
.icon-toggle {
  font-variation-settings: 'FILL' 0;
  transition: font-variation-settings 200ms var(--md-sys-motion-easing-standard);
}

.icon-toggle[aria-selected="true"],
.icon-toggle.selected {
  font-variation-settings: 'FILL' 1;
}

Common Fill Patterns

Component	Unselected	Selected
Navigation icon	FILL 0	FILL 1
Favorite/like	FILL 0	FILL 1, color: error
Checkbox icon	FILL 0	FILL 1, color: primary
Bookmark	FILL 0	FILL 1
Tab icon	FILL 0	FILL 1, color: primary

Grade for Emphasis

Grade adjusts weight without changing icon size — useful for emphasis without layout shift:

/* Low emphasis icon */
.icon-low-emphasis {
  font-variation-settings: 'GRAD' -25;
}

/* High emphasis icon (dark text on light bg) */
.icon-high-emphasis {
  font-variation-settings: 'GRAD' 200;
}

/* Adjust grade for dark mode */
[data-theme="dark"] .material-symbols-outlined {
  font-variation-settings: 'GRAD' -25;
}

Accessibility

Requirements

1. Decorative icons: Use aria-hidden="true" when icons accompany text
2. Standalone icons: Provide aria-label or title when icons are used alone
3. Interactive icons: Wrap in <button> with accessible name
4. Touch targets: Ensure 48×48dp minimum touch target regardless of visual icon size

Implementation

<!-- Decorative icon (with text label) -->
<button>
  <span class="material-symbols-outlined" aria-hidden="true">delete</span>
  Delete
</button>

<!-- Standalone icon button (needs label) -->
<button aria-label="Delete item">
  <span class="material-symbols-outlined" aria-hidden="true">delete</span>
</button>

<!-- Informational icon (supplementary) -->
<span class="material-symbols-outlined" aria-hidden="true">info</span>
<span>More details available</span>

Touch Target for Icon Buttons

.md3-icon-button {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-sys-shape-corner-full);
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

/* The icon itself can be smaller than the touch target */
.md3-icon-button .material-symbols-outlined {
  font-size: 24px;
}

Best Practices

Do's

1. ✅ Use Material Symbols for consistent M3 icon styling
2. ✅ Match icon weight to surrounding typography weight
3. ✅ Use optical size (opsz) appropriate to rendered icon size
4. ✅ Use fill transitions to indicate selection state
5. ✅ Provide accessible labels for standalone interactive icons
6. ✅ Use aria-hidden="true" for decorative icons that accompany text
7. ✅ Adjust grade for dark mode (slightly negative for better contrast)
8. ✅ Use M3 color tokens for icon colors

Don'ts

1. ❌ Don't use icons without text labels for primary navigation or critical actions
2. ❌ Don't mix Material Symbols styles (outlined, rounded, sharp) in the same interface
3. ❌ Don't resize icons with CSS transform: scale() — use font-size and opsz instead
4. ❌ Don't use inconsistent weights across an interface
5. ❌ Don't rely solely on icon color to communicate state
6. ❌ Don't use icons smaller than 20dp
7. ❌ Don't ignore touch target requirements for icon buttons

Checklist for Icon Implementation

When implementing M3 icons, ensure:

• Material Symbols font is loaded (outlined, rounded, or sharp — pick one)
• Variable font axes are configured (FILL, wght, GRAD, opsz)
• Optical size matches rendered size (20dp → opsz 20, 24dp → opsz 24, etc.)
• Icon weight matches surrounding text weight
• Fill transitions indicate selection state in navigation and toggles
• Grade is adjusted for dark mode
• All standalone icons have accessible labels (aria-label)
• Decorative icons use aria-hidden="true"
• Interactive icons are wrapped in proper interactive elements (button, a)
• Touch targets are 48×48dp minimum for icon buttons
• Icons use M3 color tokens (on-surface, primary, error, etc.)
• Only one icon style is used throughout the interface
• Icons are supplemented with text labels where clarity demands it

Resources

• Material Symbols: https://fonts.google.com/icons
• M3 icons overview: https://m3.material.io/styles/icons/overview