Better Icons: 200,000+ Icons via MCP
A tutorial by Bereket Engida et al. Featured in the OTF curated resource library.
The Icon Problem
Every developer knows the icon workflow: need an icon → open a browser tab → search the icon library → copy the component name → paste into your code → realize it's the wrong icon → repeat. It's tedious, breaks flow, and wastes surprisingly large amounts of time.
AI coding agents make this worse in a way: they tend to guess icon names, often inventing names that don't exist in your icon library. 'Add a settings icon' becomes a hunt for whether it's Settings, Cog, Gear, or SettingsGear in your specific library.
The Icons MCP server solves this by giving your AI agent direct access to 200,000+ icons from every major library. The agent searches, finds the exact icon, and uses the correct import — no guessing, no browser tabs.
Setting Up the Icons MCP
Connect the Icons MCP server to your AI coding tool in under 3 minutes.
Install the MCP server
The Icons MCP server runs locally and provides icon data to any MCP-compatible AI tool (Cursor, Claude Code, Windsurf, etc.).
npx @anthropic-ai/icons-mcp@latest
Configure your AI tool
Add the Icons MCP server to your tool's MCP configuration. In Cursor: Settings → MCP Servers → Add. In Claude Code: it auto-discovers local MCP servers.
Test with a prompt
Try: 'Find a shopping cart icon from Lucide React and add it to the navbar.' The agent searches the icon library, finds the exact component name, and generates the correct import and usage.
Using Icons in Your Prompts
Describe the Concept, Not the Name
Say 'add an icon for user settings' rather than 'add the Settings icon.' The MCP server searches by concept, returning the most relevant icons from your configured library.
Specify Your Library
If your project uses a specific icon library, mention it: 'Find a notification bell icon from Lucide React.' This narrows the search and ensures the correct import path.
Browse Alternatives
Ask 'show me 5 different arrow icons from Lucide' to see options. The MCP server returns multiple matches ranked by relevance, letting you pick the best fit.
Supported Icon Libraries
The Icons MCP server indexes icons from all major libraries:
- Lucide React — 1,400+ icons, the default for most React projects
- Heroicons — 300+ icons, popular in Tailwind CSS projects
- Phosphor Icons — 4,000+ icons in 6 weights
- Radix Icons — Minimal, clean icons for Radix UI projects
- Material Icons — Google's 2,500+ icon set
- Font Awesome — 2,000+ free icons (Pro icons require license)
- Tabler Icons — 4,600+ minimal line icons
- Bootstrap Icons — 2,000+ icons for Bootstrap projects
The total collection exceeds 200,000 icons when counting all variants, weights, and styles. Search works across all libraries simultaneously, or you can filter to a specific one.
