skills.rest
dylantarre
dylantarreCOMMUNITY
Explore all skills by this author →
Website𝕏@beatthetarGitHub

icon-system

Standardize icon delivery with SVG sprites and inline components.

38|3|Updated Dec 29, 2025
Search Tags:#accessibility#react#vue#svg#tokens#sprite#icon-system
One-click install
npx skills add https://github.com/dylantarre/design-system-skills --skill icon-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-system
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/patterns/icon-system
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill icon-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Icon systems are often built ad-hoc, causing inconsistent sizes, stroke widths, and accessibility gaps across products. This Skill provides a centralized approach to delivering icons as both SVG sprites and inline components with a defined sizing system.

Core Features & Use Cases

  • SVG Sprite workflow for large icon sets with caching and a single load
  • Inline SVG Components for tree-shaking, styling control, and framework integration (React, Vue, Svelte)
  • Size tokens (xs, sm, md, lg, xl) and consistent stroke width guidance
  • Accessibility patterns: proper ARIA labeling, decorative vs meaningful icons, keyboard-focusable icon buttons
  • Use Cases: establishing a new icon library, migrating from icon fonts to SVG, and scaling icons across apps

Quick Start

Configure an icon-system with SVG sprites and inline components, including size tokens and accessibility patterns.

Frequently Asked Questions about icon-system

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

FAQPage Schema
How do I build a scalable SVG icon system for React and Vue?▼

Build a scalable SVG icon system by standardizing delivery through SVG sprites for large sets and inline components for tree-shaking. This approach ensures consistent size tokens and framework integration across React, Vue, and Svelte.

What is the best way to migrate an icon library from fonts to SVG?▼

Migrating from icon fonts to SVG involves adopting an SVG sprite workflow for single-load caching or using inline SVG components. This standardizes size tokens and fixes accessibility gaps often found in font-based icon systems.

How do I make SVG icons accessible with ARIA labels?▼

Make SVG icons accessible by implementing proper ARIA labeling patterns. Distinguish between decorative icons that need aria-hidden and meaningful icons requiring labels, and ensure keyboard-focusable functionality for icon buttons.

Can I use design tokens to manage SVG icon sizes and stroke widths?▼

Yes, you can use design tokens to manage SVG icon sizes and stroke widths. Define size tokens ranging from extra small to extra large and apply consistent stroke width guidance to maintain visual harmony across your application.

When should I use an SVG sprite vs inline SVG components?▼

Use an SVG sprite workflow for large icon sets to benefit from caching and a single load. Choose inline SVG components when you need tree-shaking, granular styling control, and deep integration with frameworks like React or Vue.

Related Skills

Explore More Design & Creative Skills→
loveconnorloveconnor

icons

Standardize the design, construction, and optimization of accessible SVG interface icons.

Community
Advanced
legioncodeinclegioncodeinc
72

icon-system-stinger

Select icon libraries and delivery patterns for React applications.

Official
Advanced
jubscodesjubscodes
49

gsp-icons

Generate an iconography.md chunk with npm import paths, stroke widths, size tokens, and container CSS/Tailwind rules.

Community
Intermediate
forcedotcomforcedotcom
1.0k

icons-src

Create and integrate custom SVG icons into VS Code extension icon fonts.

Official
Intermediate