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)