AI-Con — Iconify MCP (Minimal)

AI-Con is a tiny Model Context Protocol (MCP) server that lets AI coding agents (e.g., Claude Code) search and save icons as SVG files into a folder named AI-Con/ in your project.
Agents and developers can then reuse local SVGs by importing from AI-Con/ — no emojis, no duplicate fetches.

What it does

• search_icons(query, prefix?, limit?) → Find icon IDs from Iconify (e.g., mdi:home).
• save_icon(id, color?, width?, height?, forceOverwrite?) → Fetch the SVG from Iconify and save to AI-Con/{Prefix}{Name}.svg (e.g., AI-Con/MdiHome.svg).

Once saved, you import the file from your code:

import HomeIcon from "../AI-Con/MdiHome.svg";

Quick Start

1) Install

pnpm i   # or npm i / yarn

2) Dev run

pnpm dev   # or: npm run dev / yarn dev

This starts the MCP server on stdio.

3) Add to Claude Code (example)

From Claude Code (CLI) or your MCP-enabled host, add the server:

claude mcp add ai-con --command "node" --args "$(pwd)/dist/server.js"
# For dev with tsx (optional)
claude mcp add ai-con-dev --command "pnpm" --args "dev"

Then restart Claude Code / your MCP client so it loads the new server.

Note: Each host may configure MCP differently. See your tool's docs.

Configuration

• AICON_DIR — folder to store SVGs (default: AI-Con)
• ICONIFY_BASE — base URL for Iconify API (default: https://api.iconify.design)

Example:

AICON_DIR="AI-Con" ICONIFY_BASE="https://api.iconify.design" pnpm dev

Tool Specs

search_icons

Input:

{ "query": "cart", "prefix": "mdi", "limit": 24 }

Output: JSON containing matches (e.g., ["mdi:cart", "mdi:cart-outline", ...]).
Uses: Iconify Search API.

save_icon

Input:

{ "id": "mdi:home", "width": "24", "height": "24", "color": "%23000000" }

Fetches from: Iconify Icon API
Saves as: AI-Con/MdiHome.svg (prefix + PascalCase icon name).
Returns saved path and the Iconify URL.

Links

• MCP quickstart: https://modelcontextprotocol.io/quickstart/server
• Iconify docs: https://iconify.design/docs/
• Iconify API: https://iconify.design/docs/api/

License

MIT