Unicon for Claude Code

Complete guide to using Unicon with Claude Code (Anthropic's CLI coding assistant).

Quick Start

1Add MCP Server

Run this single command to add the Unicon MCP server:

Terminal

claude mcp add unicon -- npx -y @webrenew/unicon-mcp-server

2Install the Unicon Skill (Recommended)

For the best experience, install the Unicon skill which teaches Claude how to use the icon tools effectively:

Terminal

npx @webrenew/unicon skill --ide claude      # npm
pnpm dlx @webrenew/unicon skill --ide claude # pnpm
bunx @webrenew/unicon skill --ide claude     # bun

This creates .claude/skills/unicon/SKILL.md in your project.

3Verify Setup

Terminal

claude mcp list

You should see unicon in the list.

Why Install the Skill?

The MCP server gives Claude the tools to work with icons. The skill gives Claude the knowledge of how to use them effectively.

Without Skill

•Claude has tools but may not know optimal usage patterns
•May need multiple attempts to find right icons
•Might not know about all libraries and formats

With Skill

✓Understands Unicon's capabilities immediately
✓Knows to search before getting specific icons
✓Understands differences between icon libraries
✓Can recommend best format for your project
✓Follows best practices automatically

Available MCP Tools

Tool	Description
search_icons	AI-powered semantic icon search
get_icon	Get a single icon by ID in any format
get_multiple_icons	Get multiple icons at once
list_libraries	List all 9 icon libraries
list_categories	Browse icons by category
get_starter_pack	Get curated icon sets

Example Prompts

Once set up, you can ask Claude things like:

“Add a home icon to my header component”

“Search for icons related to user settings”

“Get React components for home, settings, and profile icons”

“What icon libraries are available?”

“Find notification icons from Lucide”

“Add dashboard icons to my sidebar”

Installing the Skill

Via CLI (Recommended)

Terminal

npx @webrenew/unicon skill --ide claude      # npm
pnpm dlx @webrenew/unicon skill --ide claude # pnpm
bunx @webrenew/unicon skill --ide claude     # bun

Manual Installation

1. Create the directory:

mkdir -p .claude/skills/unicon

2. Download the skill:

curl -o .claude/skills/unicon/SKILL.md https://unicon.sh/skills/unicon.md

Global Installation

To make the skill available across all projects:

mkdir -p ~/.claude/skills/unicon
curl -o ~/.claude/skills/unicon/SKILL.md https://unicon.sh/skills/unicon.md

Skill Contents

The Unicon skill teaches Claude:

All CLI commands and their options

When to use each output format (React, Vue, Svelte, SVG)

How to search effectively with semantic queries

Icon library characteristics (stroke vs fill)

Best practices for icon bundling

Tree-shaking recommendations

Generated component patterns

View Skills Registry

Troubleshooting

MCP Server Not Working

1. Verify installation:

claude mcp list

2. Remove and re-add if needed:

claude mcp remove unicon
claude mcp add unicon -- npx -y @webrenew/unicon-mcp-server

Skill Not Being Used

• Ensure the skill file exists at .claude/skills/unicon/SKILL.md
• Check file permissions are readable
• Try starting a new conversation

Icons Not Found

• Use search_icons first to find correct icon IDs
• Icon IDs follow format: source:name (e.g., lucide:home)
• Try broader search terms

Best Practices

Install both MCP and Skill — They work together for the best experience

Commit the skill file — Add .claude/skills/unicon/SKILL.md to git so your team benefits

Be descriptive — Use natural language like "loading spinner" instead of exact icon names

Specify format — Tell Claude if you want React, Vue, Svelte, or SVG output

Batch requests — Ask for multiple icons in one prompt when possible