Skills
.Work. You
Rest

material-design-3-icons

Community

Master Material Design 3 icons.

Design & Creative#accessibility#icons#ui design#material design 3#material symbols#variable font
Authorshelbeely
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: material-design-3-icons
Download link: https://github.com/shelbeely/Shelbeely-Agent-skills/archive/main.zip#material-design-3-icons

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.