unicon-mcp_skill

This skill helps you configure and troubleshoot Unicon MCP server connections for Claude Desktop, Cursor, and other clients.

Python

3

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill webrenew/unicon --skill unicon-mcp

SKILL.md3.8 KB

Overview

This skill helps you connect the Unicon MCP server to AI-assisted MCP clients like Claude Desktop and Cursor, enabling icon search and generation workflows. It walks through configuration, verification, and troubleshooting so assistants can fetch and return icon code (SVG, React, Vue, etc.). Use it to integrate the Unicon icon catalog into your assistant-driven UI tooling.

How this skill works

The skill explains how to add an MCP server entry that launches the Unicon MCP server via npx and how to restart the client so it discovers the service. It exposes actions to search across 19,000+ icons, request single or multiple icon components in various formats, and retrieve curated starter packs and metadata resources. It also includes verification steps and common troubleshooting tips for connection, installation, and missing-icon issues.

When to use it

Setting up MCP config in Claude Desktop, Cursor, or other MCP-capable clients
Verifying the Unicon MCP server appears and responds to queries
Debugging MCP connection errors or slow initial starts
Requesting icon code (SVG, React, Vue, Svelte) through an AI assistant
Batch-fetching multiple icons or a starter icon pack for a project

Best practices

Add the mcpServers entry exactly as shown and fully quit the client before restarting to ensure discovery
Confirm Node.js 18+ is installed locally when clients launch the MCP server via npx
Use search_icons to validate icon IDs (format: source:name) before requesting code
Set includeCode and format when you need ready-to-use components to avoid extra conversion steps
Cache common icon packs locally in your project to avoid repeated first-run downloads

Example use cases

Ask Claude to "Search for dashboard icons in Lucide" and get a result list with code snippets
Request a React component: get_icon with iconId lucide:arrow-right and format=react
Fetch a set of social icons: get_multiple_icons for an array of icon IDs and format=vue
Retrieve a starter pack for common UI patterns using get_starter_pack to bootstrap a design system
List available libraries and counts by requesting unicon://sources through the MCP client

FAQ

Look for the plug icon in Claude Desktop or run claude mcp list in Cursor; ensure the unicon entry appears.

Why is the server slow the first time?

The first npx run downloads the package; subsequent runs are faster because the package is cached.

What if an icon cannot be found?

Run search_icons with your query to verify the icon ID and use the format source:name (e.g., lucide:home).

How do I debug connection errors?

Ensure Node.js 18+ is installed, verify internet access, check the client config JSON for syntax errors, and try running npx @webrenew/unicon-mcp-server manually to view logs.