Why should I use this skill instead of just using emojis?

Proper icon components are more professional, fully customizable via CSS, and can be tree-shaken, whereas emojis render inconsistently across different operating systems.

How does this skill improve web performance?

It enforces explicit mapping patterns for icon components to prevent bundling entire libraries, ensuring that tree-shaking works correctly in production builds.

Can I use this with Tailwind CSS projects?

Yes, it includes standardized Tailwind classes for sizing (w-4 to w-16) and uses semantic color patterns like text-primary to ensure visual consistency.

Does it help with icon selection for abstract concepts?

Yes, it includes a semantic mapping guide and a decision tree to help you choose the most appropriate icon for concepts like security, speed, or expertise.

What icon libraries does this skill support?

The skill primarily supports Lucide, Heroicons, and Phosphor, providing specific mappings and React templates for each.

Icon Design System

Name: Icon Design System
Author: jezweb

byjezweb

•

169

Design Tools

Streamlines the selection and implementation of semantically appropriate icons using Lucide, Heroicons, and Phosphor for modern web projects.

About

The Icon Design skill transforms Claude into a design-aware assistant that ensures your application's iconography is consistent, professional, and performant. It provides a robust framework for mapping abstract concepts to specific icons, enforces Tailwind CSS styling best practices for sizing and coloring, and implements critical React patterns to ensure effective tree-shaking. By guiding the selection process between popular libraries like Lucide, Heroicons, and Phosphor, this skill eliminates visual inconsistencies and technical debt associated with improper icon usage.

Key Features

Performance-optimized React implementation patterns for tree-shaking
Semantic concept-to-icon mapping for major icon libraries
Library comparison guides for Lucide, Heroicons, and Phosphor
Tailwind CSS styling rules for consistent sizing and semantic coloring
169 GitHub stars
Style consistency enforcement for unified UI design

Use Cases

Establishing a standardized icon design system for large-scale Tailwind projects
Refactoring legacy icon implementations to modern, tree-shakeable React components
Building professional feature grids and service sections with consistent iconography

About

Key Features

Performance-optimized React implementation patterns for tree-shaking
Semantic concept-to-icon mapping for major icon libraries
Library comparison guides for Lucide, Heroicons, and Phosphor
Tailwind CSS styling rules for consistent sizing and semantic coloring
169 GitHub stars
Style consistency enforcement for unified UI design

Use Cases

Establishing a standardized icon design system for large-scale Tailwind projects
Refactoring legacy icon implementations to modern, tree-shakeable React components
Building professional feature grids and service sections with consistent iconography