Skills
.Work. You
Rest

icon-systems

Community

Ship accessible, performant SVG icon systems.

Design & Creative#performance#accessibility#design system#icons#svg#icon sizing#currentColor
Authorandersoncollab
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Icon libraries often cause inconsistent sizing, poor accessibility, and unnecessary performance costs across products.

Core Features & Use Cases

  • Library selection & consistency: Compare Lucide, Heroicons, Phosphor, Material Symbols, and custom SVGs, then standardize usage for a cohesive UI.
  • Sizing scale & optical alignment: Define icon tokens and ensure visual centering for different geometric shapes (e.g., arrows vs circles).
  • Accessibility & implementation patterns: Apply aria-hidden rules, icon-only button labeling, SVG titles, and currentColor inheritance while optimizing bundle size via tree-shaking or sprite strategies.
  • Performance & integration guidance: Recommend SVG inline vs sprite sheets and provide setup examples for Lucide React and Heroicons.

Quick Start

Use the icon-systems skill to design an accessible icon system for a web app by selecting an icon library, defining sizing tokens, and implementing SVG/currentColor patterns for labeled and decorative icons.

Dependency Matrix

Required Modules

None required

Components

references

💻 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: icon-systems
Download link: https://github.com/andersoncollab/design-agent/archive/main.zip#icon-systems

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 471,000+ vetted skills library on demand.