material-symbols-v3_skill

Overview

This skill provides a ready-to-use Material Symbols v3 variable icon font system for web UI. It exposes 2,500+ icons with variable axes (fill, weight, grade, optical size) and integrates with project color tokens and fluid type scales. Use it to add consistent, accessible icons to buttons, navigation, status indicators, and other UI elements.

How this skill works

The skill loads the Material Symbols variable font (CDN or self-hosted) and maps icon names to inline text elements that render as glyphs. CSS custom properties control the font axes and sizes, letting you switch between outlined and filled styles, tune weight/grade, and set optical size for different UI contexts. A small web component wrapper is included for declarative use in HTML.

When to use it

• Iconography for buttons and icon-only controls
• Navigation bars, toolbars, and menus
• Status indicators and semantic state colors (success, error, warning)
• Hero or header graphics that need larger, optically tuned icons
• Fluid interfaces where icon size should scale with typography

Best practices

• Prefer semantic icon names from the official icon catalog rather than custom glyphs to ensure clarity
• Keep interactive icons keyboard-accessible and use aria-label or visible text for meaning
• Use optical size (opsz) for large or small icon contexts to maintain visual balance
• Tune FILL and wght for consistent visual weight across light/dark themes and different backgrounds
• Self-host the font for offline or production builds to avoid CDN dependency

Example use cases

• Button patterns: icon+text buttons, icon-only touch targets with aria-labels
• Navigation: compact home/menu/back/forward icons with outlined style
• Status chips: check_circle, error, warning with semantic color tokens
• Media controls: play, pause, volume icons with animated hover states
• Game UI: fantasy-themed HUD elements (inventory, spells, map) using larger opsz and tuned weight