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:
- Communicate Clearly: Icons should be instantly recognizable and universally understood
- Adapt Dynamically: Variable font technology enables real-time customization
- Support Theming: Icons adapt to M3 color and sizing systems
- Enhance Accessibility: Icons supplement (never replace) text labels for critical actions
- 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,GRAD@20..48,100..700,0..1,-50..200" />
<!-- Or Rounded -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- Or Sharp -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,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
- Decorative icons: Use
aria-hidden="true"when icons accompany text - Standalone icons: Provide
aria-labelortitlewhen icons are used alone - Interactive icons: Wrap in
<button>with accessible name - 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
- ✅ Use Material Symbols for consistent M3 icon styling
- ✅ Match icon weight to surrounding typography weight
- ✅ Use optical size (opsz) appropriate to rendered icon size
- ✅ Use fill transitions to indicate selection state
- ✅ Provide accessible labels for standalone interactive icons
- ✅ Use
aria-hidden="true"for decorative icons that accompany text - ✅ Adjust grade for dark mode (slightly negative for better contrast)
- ✅ Use M3 color tokens for icon colors
Don'ts
- ❌ Don't use icons without text labels for primary navigation or critical actions
- ❌ Don't mix Material Symbols styles (outlined, rounded, sharp) in the same interface
- ❌ Don't resize icons with CSS
transform: scale()— use font-size and opsz instead - ❌ Don't use inconsistent weights across an interface
- ❌ Don't rely solely on icon color to communicate state
- ❌ Don't use icons smaller than 20dp
- ❌ 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
More from shelbeely/shelbeely-agent-skills
material-design-3-guide
Master guide for Material Design 3 — covering the full specification from Material You foundations through M3 Expressive. Explains when to use each Material Design 3 skill subset (color, motion, typography, shape, layout, components, icons). Use this when starting a Material Design 3 project, when you need to understand which M3 skill to apply, or when the user asks about Material Design 3 in general.
28material-design-3-components
Comprehensive guide to Material Design 3 components — from baseline Material You through M3 Expressive. Covers action, containment, communication, navigation, selection, and text input components with specifications, states, and implementation guidelines. Use this when building or styling UI components following Material Design 3 guidelines.
27material-design-3-typography
Applies Material Design 3 Expressive typography principles including variable fonts, type scales, and hierarchy. Use this when working on text styling, type hierarchy, readable interfaces, or when the user asks to apply Material Design 3 typography guidelines.
21material-design-3-layout
Applies Material Design 3 Expressive layout, spacing, and size hierarchy principles including grid systems, responsive design, and elevation. Use this when working on page layouts, spacing, grids, responsive design, or when the user asks to apply Material Design 3 layout guidelines.
20material-design-3-motion
Applies Material Design 3 Expressive motion and animation principles to create natural, intuitive, and engaging user experiences. Use this when implementing animations, transitions, micro-interactions, or when the user asks to apply Material Design 3 motion guidelines.
17material-design-3-color
Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
16