skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

icon-systems

Standardize icon library selection and SVG implementation for consistent sizing and accessibility.

Updated Aug 27, 2026
Search Tags:#performance#accessibility#design system#icons#svg#icon sizing#currentColor
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill icon-systems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-systems
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/icon-systems
Command: npx skills add https://github.com/andersoncollab/design-agent --skill icon-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about icon-systems

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

FAQPage Schema
How do I build an accessible SVG icon system for a web app?▼

Compare icon libraries like Lucide, Heroicons, and Phosphor by evaluating visual consistency, bundle size, tree-shaking support, and SVG delivery methods to standardize usage for a cohesive web and app UI design system.

How do I make SVG icons accessible with aria-hidden and title elements?▼

Lucide React and Heroicons are compared against Material Symbols and custom SVGs by evaluating visual consistency, tree-shaking support, and SVG delivery methods to standardize usage for a cohesive design system.

How do I optimize SVG icon performance with tree-shaking and sprite sheets?▼

Optimize SVG icon performance by tree-shaking unused icons, using sprite sheets to reduce HTTP requests, and avoiding icon fonts in favor of inline SVG or sprite strategies for efficient asset delivery.

Should I use inline SVG or sprite sheets for my design system icons?▼

Choose inline SVG for simpler tree-shaking and currentColor inheritance, or use sprite sheets to reduce HTTP requests when bundling many icons; avoid icon fonts to ensure accessible, performant SVG delivery across your design system.

How do I define icon sizing tokens and optical alignment for different shapes?▼

Define icon sizing tokens using a consistent scale and apply optical alignment adjustments to visually center different geometric shapes like arrows and circles within your UI design system.

Related Skills

Explore More Design & Creative Skills→
ilanf23ilanf23
1

icon-system

Define icon set standards for grid, sizes, naming, and styles.

Community
Basic
1k-off1k-off
1

umbraco-icons

Register custom SVG icons for the Umbraco backoffice via extension manifest.

Community
Intermediate
ProfPowellProfPowell
1

icons

Standardize Lucide-based icons with a local <x-icon> component.

Community
Intermediate
legioncodeinclegioncodeinc
72

icon-system-stinger

Select icon libraries and delivery patterns for React applications.

Official
Advanced