How do I add Fluent Icons to Cursor?

Add {"mcpServers": {"fluent-icons": {"url": "https://fluenticons.co/mcp"}}} to .cursor/mcp.json.

Does the Fluent Icons API return real React component names?

Yes. Every component it returns exists in @fluentui/react-icons; unknown names return a not-found error with suggestions.

Fluent Icons for AI coding agents

Q: How do I add Fluent Icons to Claude Code?

Run: claude mcp add --transport http fluent-icons https://fluenticons.co/mcp

Give your coding agent the Microsoft Fluent UI icon library so it stops guessing icon names. It can search icons by meaning, get component names that really exist in @fluentui/react-icons, generate correct imports and pick a consistent set of icons for your interface.

It's free, with no signup or API key. Connect it as an MCP server (Claude Code, Cursor, Codex, VS Code and other MCP clients), call the HTTP API directly, or use the command line.

Connect your agent

Add the MCP server (run in your project, or add --scope user for every project):

claude mcp add --transport http fluent-icons https://fluenticons.co/mcp

Optional: add the Fluent Icons skill so Claude reaches for it whenever it picks an icon:

mkdir -p .claude/skills/fluent-icons && curl -fsSL https://fluenticons.co/ai/SKILL.md -o .claude/skills/fluent-icons/SKILL.md

Then ask your agent something like "Add a Fluent icon for user permissions to the sidebar" or "Pick Fluent icons for Home, Projects, Analytics, Billing and Settings".

Try it

This is what your agent gets back. Describe an icon in your own words:

What your agent can do

MCP tool	What it returns
`search_icons`	Icons that match a meaning or name ("user permissions", "billing"), best first, each with its React component and import.
`recommend_icons`	One icon per UI item (navigation, menus, settings sections) in a single style and size, without repeats, plus one import line.
`get_icon`	Every style and size of an icon, exact component names, platforms with published code, SVG URLs and related icons.
`get_icon_code`	Code for one variant: React, SVG, Blazor, Flutter, WinUI/WPF, icon font, Android, iOS or Power Apps, where Microsoft publishes it.
`find_similar_icons`	Alternatives to an icon, for when the first match isn't quite right.

Results come from the same catalogue as this website: 3,000+ icon designs from Microsoft's @fluentui/svg-icons 1.1.341, updated when Microsoft publishes a release. Names that don't exist are never returned: a wrong name gets a "not found" error with suggestions.

HTTP API

JSON over HTTPS at https://fluenticons.co/api/v1. No key needed; CORS is open, so it works from browsers too.

Search

curl "https://fluenticons.co/api/v1/icons/search?q=user+permissions&limit=3"

Optional parameters: style (regular, filled, color, light), size (10–48), platform (adds that platform's code to each result), limit (1–50, default 10), exact=true (exact name only) and category (a keyword such as security).

{
  "query": "user permissions",
  "count": 3,
  "results": [
    {
      "name": "PersonLock",
      "slug": "person_lock",
      "displayName": "Person Lock",
      "score": 0.81,
      "styles": ["regular", "filled"],
      "sizes": [16, 20, 24],
      "keywords": ["human", "contact", "guest", "security", "safety", "access", …],
      "react": {
        "component": "PersonLock24Regular",
        "package": "@fluentui/react-icons",
        "import": "import { PersonLock24Regular } from \"@fluentui/react-icons\";",
        "style": "regular",
        "size": 24
      },
      "svgUrl": "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@…/icons/person_lock_24_regular.svg",
      "url": "https://fluenticons.co/icon/person-lock/"
    },
    …
  ]
}

One icon

curl "https://fluenticons.co/api/v1/icons/PersonLock"

Accepts PersonLock, person_lock, person-lock or a component name such as PersonLock20Filled. Returns styles, sizes, every component name, platforms, SVG URLs and related icons.

Code

curl "https://fluenticons.co/api/v1/icons/PersonLock/code?platform=react&style=filled&size=20"

Platforms: react, svg, blazor, flutter, xaml, font, android, ios, powerapps.

Recommend icons for a UI

curl -X POST "https://fluenticons.co/api/v1/icons/recommend" \
  -H "content-type: application/json" \
  -d '{
    "items": [
      { "label": "Home", "description": "main dashboard" },
      { "label": "Projects", "description": "customer projects" },
      { "label": "Analytics", "description": "performance metrics" },
      { "label": "Billing", "description": "subscriptions and invoices" },
      { "label": "Settings", "description": "application settings" }
    ],
    "style": "regular",
    "size": 24
  }'

{
  "recommendations": [
    { "label": "Home", "icon": "Home", "component": "Home24Regular", "confidence": 1, … },
    { "label": "Projects", "icon": "Folder", "component": "Folder24Regular", … },
    { "label": "Analytics", "icon": "DataPie", "component": "DataPie24Regular", … },
    { "label": "Billing", "icon": "Receipt", "component": "Receipt24Regular", … },
    { "label": "Settings", "icon": "Settings", "component": "Settings24Regular", … }
  ],
  "import": "import { Home24Regular, Folder24Regular, DataPie24Regular, Receipt24Regular, Settings24Regular } from \"@fluentui/react-icons\";"
}

Errors are JSON too: {"error": {"code": "icon_not_found", "message": …, "suggestions": […]}} with status 400, 404 or 429. The limit is 120 requests per minute per IP address; responses carry X-RateLimit-Remaining.

Command line

No install needed (Node 18 or later):

npx -y https://fluenticons.co/cli.tgz search "user security"

npx -y https://fluenticons.co/cli.tgz search billing --react

npx -y https://fluenticons.co/cli.tgz recommend "Home, Projects, Analytics, Billing, Settings"

Also: get PersonLock, code PersonLock --platform flutter, --style filled, --size 20 and --json.

Instructions for your agent

Add this to your project's AGENTS.md, CLAUDE.md, Cursor rules or .github/copilot-instructions.md so the agent uses Fluent Icons whenever it picks an icon:

## Icons

This project uses Microsoft's Fluent UI icons (@fluentui/react-icons). Never guess icon component names.
- Find icons with the Fluent Icons MCP server (tools search_icons, recommend_icons, get_icon, get_icon_code) or, without MCP, the API: https://fluenticons.co/api/v1/icons/search?q=<what the icon means>
- Search for what the icon should mean ("user permissions", "billing"), then use a returned component name exactly, e.g. import { PersonLock24Regular } from "@fluentui/react-icons".
- For several icons in one UI (navigation, menus, tabs), use recommend_icons so they share one style and size.
- Before using another size or style, check it exists with get_icon; don't build names yourself.

For Claude Code there's also a ready-made skill: SKILL.md (see the Claude Code tab above). A summary for language models is at /llms.txt.

Questions

Is it free?

Yes. There's no signup, API key or paid plan.

What does it send or store?

Your agent only sends the words it searches for and the icon names it asks about — never your code. We count requests (search words, icons returned, platform, and the kind of client) to improve results. See the privacy policy.

Does it use an AI model?

No. Search matches icon names, Microsoft's keywords and a list of synonyms ("billing" finds Payment, Receipt and Wallet), so it's fast and returns the same result every time. Your agent does the thinking; Fluent Icons makes sure the names are real.

Is this an official Microsoft service?

No. Fluenticons is an independent project. The icons are Microsoft's Fluent UI System Icons, used under the MIT License.

Fluent Icons for AI coding agents

Connect your agent

Claude Code

Cursor

Codex

VS Code / Copilot

Other MCP clients

HTTP API

CLI

Try it

What your agent can do

HTTP API

Search

One icon

Code

Recommend icons for a UI

Command line

Instructions for your agent

Questions

Is it free?

What does it send or store?

Does it use an AI model?

Is this an official Microsoft service?