skills.rest
shelbeely
shelbeelyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

material-design-3-icons

Implement Material Design 3 icons using Material Symbols variable font axes.

4|Updated Feb 16, 2026
Search Tags:#accessibility#icons#ui design#material design 3#material symbols#variable font
One-click install
npx skills add https://github.com/shelbeely/Shelbeely-Agent-skills --skill material-design-3-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-icons
Source: https://github.com/shelbeely/Shelbeely-Agent-skills/tree/main/skills/material-design-3-icons
Command: npx skills add https://github.com/shelbeely/Shelbeely-Agent-skills --skill material-design-3-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides comprehensive guidance and implementation details for using Material Design 3 icons, specifically leveraging Google's Material Symbols variable font system, to ensure visual consistency and accessibility in user interfaces.

Core Features & Use Cases

  • Icon Styles: Explains the three distinct styles (Outlined, Rounded, Sharp) and their use cases.
  • Variable Font Axes: Details how to customize icons using FILL, wght, GRAD, and opsz axes for dynamic effects.
  • Implementation Guidance: Provides HTML and CSS examples for loading and styling icons, including responsive sizing and color theming with M3 tokens.
  • Accessibility: Outlines best practices for icon accessibility, including touch targets and ARIA attributes.
  • Use Case: When designing a new feature, use this Skill to select and implement appropriate icons that align with Material Design 3 guidelines, ensuring they are visually appealing, accessible, and adaptable to different contexts.

Quick Start

Apply Material Symbols using the provided HTML and CSS examples to integrate icons into your project.

Frequently Asked Questions about material-design-3-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement Material Symbols variable font icons in my UI?▼

Implement Material Symbols by loading the variable font via Google Fonts and applying CSS styling to control axes like FILL, wght, GRAD, and opsz for dynamic icon effects.

What is the difference between Outlined, Rounded, and Sharp Material Design 3 icon styles?▼

Material Design 3 icons offer Outlined, Rounded, and Sharp styles to suit different visual contexts. These distinct styles are implemented using the Material Symbols variable font system.

How do I customize Material Symbols using variable font axes?▼

Customize Material Symbols by adjusting four variable font axes: FILL for interior styling, wght for stroke weight, GRAD for grade emphasis, and opsz for optical size adaptation.

What are the accessibility best practices for Material Design 3 icons?▼

Accessibility best practices for Material Design 3 icons include ensuring proper touch targets and applying ARIA attributes to differentiate standalone interactive icons from decorative ones.

How do I apply color theming to Material Symbols using M3 tokens?▼

Apply color theming to Material Symbols by mapping CSS properties to Material Design 3 color tokens, ensuring your icons visually adapt to different UI themes and contexts.

Does the Material Symbols variable font support responsive icon sizing?▼

Yes, the Material Symbols variable font supports responsive icon sizing through the opsz optical size axis and standard CSS styling techniques for adaptable UI layouts.

Related Skills

Explore More Design & Creative Skills→
petbrainspetbrains
13

frontend-google-fonts

Configure Google Fonts typography for Next.js and Tailwind projects.

Official
Basic
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate
neogenzneogenz
4

material-design-3

Applies Material Design 3 theming and typography to Angular apps.

Community
Intermediate
ThomashighbaughThomashighbaugh
1

icon-generator

Generate favicon, PWA, and Unreal Engine icon sets from a single PNG or SVG source.

Community
Intermediate