skills.rest
dennislee928
dennislee928COMMUNITY
Explore all skills by this author →
WebsiteGitHub

icon-design

Select semantically appropriate icons from Lucide, Heroicons, and Phosphor for React and HTML projects.

54|Updated Nov 19, 2025
Search Tags:#react#icons#ui design#tailwind#lucide#heroicons#phosphor
One-click install
npx skills add https://github.com/dennislee928/Ethic-Latex --skill icon-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-design
Source: https://github.com/dennislee928/Ethic-Latex/tree/main/.claude/skills/icon-design
Command: npx skills add https://github.com/dennislee928/Ethic-Latex --skill icon-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you choose the most semantically appropriate icons for your website or application, ensuring visual consistency and clear communication, and preventing the use of less professional emoji.

Core Features & Use Cases

  • Concept-to-Icon Mapping: Quickly find the best icon for abstract concepts like "security," "speed," or "quality."
  • Library Recommendations: Guides you to choose between Lucide, Heroicons, and Phosphor based on project needs.
  • Template Examples: Provides ready-to-use React/HTML patterns for common UI elements like feature cards, buttons, and lists.
  • Consistency Rules: Enforces best practices for sizing, styling, and tree-shaking to maintain a professional and performant UI.
  • Use Case: When designing a new feature section, you can ask this skill to suggest icons for "user management," "data security," and "reporting," and it will provide the Lucide components and Tailwind CSS classes to implement them correctly.

Quick Start

Use the icon-design skill to select an icon for 'user profile' and provide the Lucide component code.

Frequently Asked Questions about icon-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose the best UI icons for abstract concepts in React?▼

To choose UI icons for abstract concepts in React, map concepts like security or speed to semantically appropriate components from libraries such as Lucide, Heroicons, or Phosphor, ensuring clear communication and visual consistency across your application.

Should I use emojis or icon libraries for website UI design?▼

For website UI design, you should use icon libraries like Lucide or Phosphor instead of emojis to maintain a professional appearance, ensure visual consistency, and guarantee accessibility across different operating systems and platforms.

What is the best way to implement tree-shaking for icons in a Tailwind CSS project?▼

The best way to implement tree-shaking for icons in a Tailwind CSS project is to import individual icon components directly from libraries like Lucide or Phosphor, rather than importing entire packages, ensuring optimal performance and smaller bundle sizes.

How do I map UI features to Lucide icons with Tailwind CSS classes?▼

You can map UI features to Lucide icons with Tailwind CSS classes by using concept-to-icon mapping templates that provide ready-to-use React and HTML patterns for common elements like feature cards and buttons, ensuring proper sizing and styling consistency.

Does this icon selection guidance work with Phosphor and Heroicons?▼

Yes, this icon selection guidance works with Phosphor and Heroicons, offering library recommendations and best practices to help you choose between them based on your specific project needs, style preferences, and accessibility requirements.

Related Skills

Explore More Design & Creative Skills→
zxj719zxj719

ui-change

Standardize React UI components with Tailwind CSS and lucide-react icons.

Community
Basic
TheBushidoCollectiveTheBushidoCollective
187

tailwind-utility-classes

Compose Tailwind CSS utility classes for responsive component styling.

Official
Intermediate
HubDigitalEPNHubDigitalEPN
1

fluxui-development

Create and customize Livewire UI components with Flux UI and Tailwind CSS.

Official
Intermediate
douincdouinc
1

figma-icons-iconify

Fetch SVG icons from Iconify and insert them into Figma designs.

Official
Intermediate