Why does this skill recommend avoiding emojis as icons?

Proper icon components offer better visual consistency, professional styling via currentColor, and better accessibility compared to emojis, which vary significantly across operating systems.

Which icon libraries are supported by this skill?

This skill provides comprehensive mapping and templates for Lucide, Heroicons, and Phosphor Icons, with Lucide as the default recommendation for React projects.

Can I use this skill with Tailwind CSS?

Yes, the skill includes standardized Tailwind CSS classes for sizing (e.g., w-4 h-4 for inline text) and semantic coloring rules for consistent UI design.

How does this skill help with application performance?

It provides explicit implementation patterns for tree-shaking, ensuring that only the specific icons used in your project are included in the final bundle, avoiding the overhead of entire icon libraries.

Semantic Icon Design

Name: Semantic Icon Design
Author: brendadeeznuts1111

bybrendadeeznuts1111

0•

Design Tools

Streamlines the selection and implementation of professional icons from Lucide, Heroicons, and Phosphor with a focus on semantic accuracy and performance.

The Semantic Icon Design skill empowers developers to integrate high-quality iconography into web projects with precision and speed. It maps abstract business concepts—like security, speed, or expertise—to the most appropriate icon components across leading libraries including Lucide, Heroicons, and Phosphor. Beyond mere selection, this skill provides production-grade Tailwind CSS templates and enforces critical performance patterns like tree-shaking to prevent bundle bloat. It is an essential tool for creating consistent, accessible, and performant user interfaces for feature grids, navigation systems, and service sections.

Key Features

01Consistency enforcement rules to prevent style mixing

02Tree-shaking patterns for optimized bundle sizes

03Semantic concept-to-icon mapping for popular icon libraries

04Standardized Tailwind CSS sizing and styling guidelines

05Ready-to-use React and HTML implementation templates

060 GitHub stars

Use Cases

01Developing high-performance navigation systems and contact sections

02Building professional landing pages with consistent feature and service grids

03Migrating legacy icon systems to modern, tree-shakeable equivalents

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brendadeeznuts1111/tier-1380-omega icon-design

For use in Claude.ai and ChatGPT

Download Skill