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.
Características Principales
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
Casos de Uso
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
