How does it handle different icon styles?

It provides specialized guidance and technical specs for various styles including Outlined, Filled, Duo-tone, and Hand-drawn icons, ensuring consistency across the entire set.

Can this skill generate SVG code directly?

Yes, Icon Designer produces optimized, accessible SVG code with proper viewBox and path definitions ready for immediate use in your codebase.

Can I use it to audit my existing icon library?

Yes, the skill includes a dedicated workflow to analyze existing icons for visual consistency, accessibility compliance, and performance bottlenecks.

Does it support specific frameworks like React or Tailwind?

Absolutely. It provides workflows for integrating icons as React components, SVG sprites, and styling them with CSS or Tailwind-specific classes like 'currentColor'.

Icon Designer

Name: Icon Designer
Author: jmsktm

byjmsktm

•

Design Tools

Generates cohesive, production-ready icon sets and design systems with optimized SVG code and technical specifications.

Icon Designer is a specialized skill for building scalable visual language systems, enabling developers and designers to create consistent, pixel-perfect iconography. It bridges the gap between creative metaphors and technical implementation by providing optimized SVG code, defining design specifications like stroke weight and grid alignment, and offering expert guidance on selecting the best icon libraries for any project. Whether you are auditing a legacy set for consistency or building a unique brand system from scratch, this skill ensures your iconography is accessible, performant, and visually balanced.

Key Features

01Custom SVG icon generation with optimized pathing and accessibility markup

02Comprehensive audits of existing icon sets for consistency and performance

03Technical integration support for React components, SVG sprites, and CSS

042 GitHub stars

05System-wide design specification for consistent stroke weights, radii, and grids

06Expert recommendations for libraries like Heroicons, Lucide, and Phosphor

Use Cases

01Standardizing inconsistent legacy icons within an existing application

02Creating a unique, custom icon set for a new brand or product identity

03Generating optimized SVG code for specific UI features or navigation elements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jmsktm/claude-settings icon-designer

For use in Claude.ai and ChatGPT

Key Features

01Custom SVG icon generation with optimized pathing and accessibility markup

02Comprehensive audits of existing icon sets for consistency and performance

03Technical integration support for React components, SVG sprites, and CSS

042 GitHub stars

05System-wide design specification for consistent stroke weights, radii, and grids

06Expert recommendations for libraries like Heroicons, Lucide, and Phosphor

Use Cases

01Standardizing inconsistent legacy icons within an existing application

02Creating a unique, custom icon set for a new brand or product identity

03Generating optimized SVG code for specific UI features or navigation elements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jmsktm/claude-settings icon-designer

For use in Claude.ai and ChatGPT