Which icon libraries are supported by this skill?

The skill currently supports Lucide, Heroicons, and Phosphor Icons, providing specific naming conventions and component maps for each.

Does it prevent the use of emojis in professional projects?

Yes, one of the core rules of this skill is to replace emojis with proper, scalable SVG icon components to maintain a professional design standard.

How does this skill help with website performance?

It provides explicit implementation patterns for React that prevent 'importing all' icons, ensuring that your final bundle only includes the icons you actually use (tree-shaking).

Can I use this with Tailwind CSS?

Yes, the skill includes pre-defined Tailwind utility classes for consistent sizing (from 16px to 64px) and semantic coloring using currentColor.

Icon Design Pro

Name: Icon Design Pro
Author: piotroq

bypiotroq

0•

디자인 도구

Selects and implements semantically appropriate UI icons using modern libraries like Lucide, Heroicons, and Phosphor.

The Icon Design skill provides a comprehensive framework for selecting the perfect icons for any web project, ensuring visual consistency and semantic accuracy. It moves beyond generic emojis by offering a robust mapping of business concepts to professional icon sets, while simultaneously enforcing technical best practices like tree-shaking for React performance and Tailwind CSS integration for styling. This skill is ideal for developers building landing pages, dashboards, or service grids who need to maintain a high-quality, production-grade design aesthetic without manually searching for individual icons.

주요 기능

01Decision tree logic for selecting icons based on specific brand messaging

02Standardized Tailwind CSS sizing and consistency rules for UI harmony

03Optimized React implementation patterns to ensure efficient tree-shaking

04Multi-library support for Lucide, Heroicons, and Phosphor Icons

050 GitHub stars

06Semantic mapping for 20+ core concepts like Security, Expertise, and Support

사용 사례

01Building feature sections and service grids for professional landing pages

02Refactoring legacy projects from emojis or icon fonts to modern SVG components

03Standardizing navigation and contact information icons across a web application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com icon-design

For use in Claude.ai and ChatGPT

Download Skill