What grid sizes are recommended?

The skill defines standard grids for various use cases, including 16x16 for inline text, 24x24 for default UI, and up to 48x48 for hero illustrations.

How does it handle icon accessibility?

It follows industry best practices by providing ARIA roles, labels, and focus management recommendations for both decorative and meaningful icons.

Does this skill support different icon styles?

Yes, it provides specific guidance and templates for outline, filled, and duotone styles to ensure visual consistency across your entire project.

Can it help with icon animations?

Absolutely. The skill includes patterns for hover rotations, infinite loading spinners, and sophisticated draw-on animations using SVG stroke-dasharray attributes.

Icon Design System & SVG Architect

Name: Icon Design System & SVG Architect
Author: ArnavPuri

byArnavPuri

•

디자인 도구

Generates consistent, accessible, and high-performance SVG icon systems for modern web applications.

This skill empowers Claude to act as a specialized icon designer, providing a comprehensive framework for creating professional SVG icon sets. It covers everything from standard 24x24 grids and optical alignment corrections to advanced CSS animations and accessibility best practices. Whether you are building a custom icon library from scratch or aligning new icons with an existing design system, this skill ensures your iconography is visually balanced, semantically correct, and fully responsive.

주요 기능

01Optical alignment and visual weight balancing techniques

02Built-in accessibility (ARIA) and semantic selection patterns

03Standardized SVG grid systems ranging from 16px to 48px

041 GitHub stars

05Multi-style support including Outline, Filled, and Duotone patterns

06CSS-driven animations for interactive states and loading indicators

사용 사례

01Designing interactive UI elements like animated checkmarks and loading spinners

02Optimizing existing SVG icons for better performance and accessibility

03Creating a cohesive custom icon set for a new brand or UI kit

주요 기능

01Optical alignment and visual weight balancing techniques

02Built-in accessibility (ARIA) and semantic selection patterns

03Standardized SVG grid systems ranging from 16px to 48px

041 GitHub stars

05Multi-style support including Outline, Filled, and Duotone patterns

06CSS-driven animations for interactive states and loading indicators

사용 사례

01Designing interactive UI elements like animated checkmarks and loading spinners

02Optimizing existing SVG icons for better performance and accessibility

03Creating a cohesive custom icon set for a new brand or UI kit