Installation
npx skills add oakoss/agent-skills --skill icon-design 38
Installs
Icon Design
Select the right icon for the job. Maps concepts to icons across three modern libraries, provides ready-to-use templates, and prevents common mistakes like broken tree-shaking and inconsistent styles.
Quick Reference
| Concept | Lucide | Heroicons | Phosphor |
|---|---|---|---|
| Award/Quality | Trophy |
trophy |
Trophy |
| Price/Value | Tag |
tag |
Tag |
| Location | MapPin |
map-pin |
MapPin |
| Expertise | GraduationCap |
academic-cap |
GraduationCap |
| Support | MessageCircle |
chat-bubble-left-right |
ChatCircle |
| Security | Shield |
shield-check |
Shield |
| Speed | Zap |
bolt |
Lightning |
| Phone | Phone |
phone |
Phone |
Mail |
envelope |
Envelope |
|
| User/Profile | User |
user |
User |
| Team | Users |
user-group |
Users |
| Settings | Settings |
cog-6-tooth |
Gear |
| Home | Home |
home |
House |
| Search | Search |
magnifying-glass |
MagnifyingGlass |
| Check/Success | Check |
check |
Check |
| Close/Cancel | X |
x-mark |
X |
| Menu | Menu |
bars-3 |
List |
| Calendar | Calendar |
calendar |
Calendar |
| Clock/Time | Clock |
clock |
Clock |
| Heart/Favorite | Heart |
heart |
Heart |
Library Selection
| Library | Best For | Package |
|---|---|---|
| Lucide | General use, React projects | lucide-react |
| Heroicons | Tailwind projects, minimal style | @heroicons/react |
| Phosphor | Weight variations needed | @phosphor-icons/react |
Default recommendation: Lucide (1,600+ icons, excellent React integration, dynamic loading via lucide-react/dynamic).
Selection Process
- Identify the concept -- what does the label/title communicate?
- Check semantic mapping -- see
references/semantic-mapping.md - Choose library -- Lucide (default), Heroicons (Tailwind), Phosphor (weights)
- Apply template -- see
references/icon-templates.md - Verify consistency -- same style, same size within each section
Icon Style Rules
| Rule | Detail |
|---|---|
| No mixed styles | Use all outline OR all solid in a section |
| No emoji | Use proper icon components (tree-shakeable) |
| Use currentColor | Icons inherit text color via stroke="currentColor" |
| Semantic colors | Use text-primary, not text-blue-500 |
| Consistent sizing | Inline w-4 h-4, cards w-8 h-8, hero w-10 h-10 |
| Tree-shaking safe | Use explicit named imports and icon maps, never import * |
| Accessibility | Add aria-hidden="true" to decorative icons, aria-label to buttons |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Importing all icons with import * as Icons breaking tree-shaking |
Use explicit named imports and a static icon map |
| Mixing outline and solid icon styles within the same section | Pick one style per section and apply consistently |
| Using emoji instead of proper icon components | Always use tree-shakeable icon components from Lucide, Heroicons, or Phosphor |
Hardcoding color values like text-blue-500 on icons |
Use semantic colors like text-primary so icons inherit theme changes |
| Choosing icons by visual appeal rather than semantic meaning | Map the concept first using the semantic mapping reference, then select the icon |
Missing aria-label on icon-only buttons |
Add aria-label="Description" to buttons containing only icons |
| Using old Heroicons import paths without size prefix | Use @heroicons/react/24/outline with the size prefix |
Delegation
- Audit existing icon usage for consistency and tree-shaking issues: Use
Exploreagent to scan imports and identify mixed styles or wildcard imports - Migrate icons from Font Awesome or Material to modern libraries: Use
Taskagent with the migration guide reference - Plan icon system architecture for a design system: Use
Planagent to select library, define sizing conventions, and establish semantic mappings
References
- semantic-mapping.md -- Full concept-to-icon tables by category (quality, price, location, trade-specific, navigation, status)
- icon-templates.md -- React/HTML patterns with Tailwind (feature cards, buttons, inputs, navigation, status badges)
- library-comparison.md -- Lucide vs Heroicons vs Phosphor (features, bundle size, import patterns)
- migration-guide.md -- Font Awesome, Material Icons, Feather, and emoji to modern equivalents
- accessibility.md -- Decorative vs meaningful icons, aria attributes, screen reader patterns
Installs
Security Audit
View Source
oakoss/agent-skills
More from this source
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
How to use this skill
Install icon-design by running npx skills add oakoss/agent-skills --skill icon-design in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.
No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.
The skill enhances your agent's understanding of icon-design, helping it follow established patterns, avoid common mistakes, and produce production-ready output.
What you get
Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.
Compatibility
This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
