Skills
.Work. You
Rest

ux-iconography

Community

Icon usage patterns with Material Symbols.

Design & Creative#a11y#animation#icons#ui-patterns#iconography#material-symbols
Authormatthewharwood
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Consistent icon usage reduces cognitive load and improves recognition. This skill outlines patterns for sizing, color, and accessibility.

Core Features & Use Cases

  • Icon sizing patterns (sm, md, lg, xl) and fluid sizing with typography.
  • Inline icon + text patterns and icon-only buttons.
  • Accessibility guidance for decorative vs meaningful icons.

Quick Start

Implement a trailing icon in a button and ensure the icon has an accessible label when used as an icon-only control.

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: ux-iconography
Download link: https://github.com/matthewharwood/fantasy-phonics/archive/main.zip#ux-iconography

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