Material Symbols v3

Material Design 3 icon system using variable fonts. This project uses Material Symbols Outlined loaded from Google Fonts CDN.

Related Skills

• ux-iconography

  : UX patterns for icon usage, accessibility, and animations

• ux-accessibility

  : ARIA requirements for icon-only buttons

• utopia-fluid-scales

  : Type scale tokens for fluid icon sizing

Project Setup

Location:

css/styles/icons.css

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

Self-Hosting (Offline)

For offline/production without CDN:

1. Download from fonts.google.com/icons
2. Place in

   /fonts/material-symbols-outlined.woff2

3. Replace CDN import:

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
}

Basic Usage

<span class="icon">home</span>
<span class="icon">settings</span>
<span class="icon">favorite</span>

Use the icon name from Material Symbols as text content.

Icon Sizes

.icon--sm

.icon--md

.icon--lg

.icon--xl

<span class="icon icon--sm">info</span>
<span class="icon icon--md">info</span>
<span class="icon icon--lg">info</span>
<span class="icon icon--xl">info</span>

Fluid Sizing with Utopia

For icons that scale with typography:

.icon-fluid {
  font-size: var(--step-1);
  --icon-optical-size: 24;
}

Variable Font Axes

Material Symbols is a variable font with 4 axes:

FILL

wght

GRAD

opsz

Fill Styles

<span class="icon icon--outlined">favorite</span>  <!-- Outline (default) -->
<span class="icon icon--filled">favorite</span>    <!-- Filled -->

Weight Variants

<span class="icon icon--thin">home</span>     <!-- 100 -->
<span class="icon icon--light">home</span>    <!-- 300 -->
<span class="icon icon--regular">home</span>  <!-- 400 (default) -->
<span class="icon icon--medium">home</span>   <!-- 500 -->
<span class="icon icon--bold">home</span>     <!-- 700 -->

Grade Variants

<span class="icon icon--grade-low">home</span>    <!-- -25: thinner on dark bg -->
<span class="icon icon--grade-normal">home</span> <!-- 0 (default) -->
<span class="icon icon--grade-high">home</span>   <!-- 200: bolder emphasis -->

Custom Variation

.custom-icon {
  --icon-fill: 1;
  --icon-weight: 600;
  --icon-grade: 0;
  --icon-optical-size: 24;
}

Icon Colors

Semantic Colors

<span class="icon icon--primary">check_circle</span>
<span class="icon icon--secondary">info</span>
<span class="icon icon--disabled">block</span>

Inherit from Parent

.icon {
  color: inherit;  /* Default behavior */
}

.btn-primary .icon {
  color: var(--theme-on-primary);
}

State Colors

.icon-success { color: var(--color-success); }
.icon-error { color: var(--color-error); }
.icon-warning { color: var(--color-warning); }

Interactive Icons

<span class="icon icon--interactive">settings</span>

.icon--interactive {
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.icon--interactive:hover {
  color: var(--icon-color-primary);
  transform: scale(1.1);
}

.icon--interactive:active {
  transform: scale(0.95);
}

Button Patterns

Icon + Text Button

<button class="btn">
  <span class="icon" aria-hidden="true">add</span>
  <span>Add Item</span>
</button>

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

Icon-Only Button

<button class="btn-icon" aria-label="Settings">
  <span class="icon" aria-hidden="true">settings</span>
</button>

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  padding: var(--space-xs);
}

Trailing Icon

<button class="btn">
  <span>Next</span>
  <span class="icon" aria-hidden="true">arrow_forward</span>
</button>

Accessibility

Decorative Icons (with visible label)

<button>
  <span class="icon" aria-hidden="true">save</span>
  Save
</button>

Meaningful Icons (icon-only)

<button aria-label="Close dialog">
  <span class="icon" aria-hidden="true">close</span>
</button>

Screen Reader Text

<button class="btn-icon">
  <span class="icon" aria-hidden="true">delete</span>
  <span class="sr-only">Delete item</span>
</button>

High Contrast Mode

@media (forced-colors: active) {
  .icon {
    forced-color-adjust: auto;
  }
}

Common Icons Reference

Navigation

home

menu

arrow_back

arrow_forward

close

Actions

add

edit

delete

save

search

Status

check_circle

error

warning

info

help

Media

play_arrow

pause

volume_up

volume_off

Settings

settings

tune

brightness_6

lock

Browse all icons: fonts.google.com/icons

Animation

With Anime.js

import { animate } from 'animejs';

// Wiggle
animate(iconEl, {
  rotate: [0, -10, 10, -10, 10, 0],
  duration: 300,
  ease: 'easeOutQuad'
});

// Bounce
animate(iconEl, {
  scale: [1, 1.2, 1],
  duration: 200,
  ease: 'easeOutBack'
});

CSS Transitions

.icon {
  transition: transform 0.15s ease;
}

.btn:hover .icon {
  transform: scale(1.1);
}

.btn:active .icon {
  transform: scale(0.95);
}

Web Component Wrapper

class MIcon extends HTMLElement {
  static observedAttributes = ['name', 'size', 'filled'];

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const name = this.getAttribute('name') || 'help';
    const size = this.getAttribute('size') || 'md';
    const filled = this.hasAttribute('filled');

    this.innerHTML = `<span class="icon icon--${size}${filled ? ' icon--filled' : ''}" aria-hidden="true">${name}</span>`;
  }
}

customElements.define('m-icon', MIcon);

Usage:

<m-icon name="home"></m-icon>
<m-icon name="favorite" filled size="lg"></m-icon>

CSS Custom Properties

:root {
  /* Font */
  --icon-font: 'Material Symbols Outlined';

  /* Sizes */
  --icon-size-sm: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 40px;
  --icon-size-xl: 48px;

  /* Variable font axes */
  --icon-fill: 0;
  --icon-weight: 400;
  --icon-grade: 0;
  --icon-optical-size: 24;

  /* Colors */
  --icon-color: var(--color-on-surface);
  --icon-color-primary: var(--color-primary);
  --icon-color-secondary: var(--color-on-surface-variant);
  --icon-color-disabled: var(--color-outline);
}

Migration from Emoji

Replace emoji icons with Material Symbols:

<span aria-hidden="true">📖</span>

<span class="icon" aria-hidden="true">menu_book</span>

<span aria-hidden="true">⚙️</span>

<span class="icon" aria-hidden="true">settings</span>

<span aria-hidden="true">🏠</span>

<span class="icon" aria-hidden="true">home</span>

<span aria-hidden="true">⭐</span>

<span class="icon" aria-hidden="true">star</span>

<span aria-hidden="true">🔒</span>

<span class="icon" aria-hidden="true">lock</span>

<span aria-hidden="true">🔊</span>

<span class="icon" aria-hidden="true">volume_up</span>

<span aria-hidden="true">🔇</span>

<span class="icon" aria-hidden="true">volume_off</span>

<span aria-hidden="true">✓</span>

<span class="icon" aria-hidden="true">check</span>

Files

• css/styles/icons.css

  - Icon system styles and CSS custom properties