Fluent Icons

MCP server · HTTP API · CLI

Fluent Icons for coding agents

Search Microsoft's Fluent UI System Icons by meaning and get component names that exist in @fluentui/react-icons. Works with Claude Code, Cursor, Codex, VS Code and any MCP client. Free, no API key.

MCP server
https://fluenticons.co/mcp
HTTP API
https://fluenticons.co/api/v1
CLI
npx -y https://fluenticons.co/cli.tgz --help

Setup

Claude Code

Install the plugin (MCP server and skill):

Terminal
claude plugin marketplace add coltongriffith/fluenticons-plugin
claude plugin install fluenticons@fluenticons

Or add only the MCP server (--scope user enables it in every project):

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

Claude

On claude.ai or Claude Desktop: Customize → Connectors → Add custom connector, then paste:

Connector URL
https://fluenticons.co/mcp

ChatGPT

Turn on Developer mode (Settings → Security and login). Then on chatgpt.com/plugins, press +, choose Public endpoint and paste:

Server URL
https://fluenticons.co/mcp

Developer mode is on the web for Plus, Pro, Business, Enterprise and Edu plans.

Codex

Install the plugin (MCP server and skill):

Terminal
codex plugin marketplace add coltongriffith/fluenticons-plugin
codex plugin add fluenticons@fluenticons

Or add only the MCP server, shared by the Codex CLI, app and IDE extension:

~/.codex/config.toml
[mcp_servers.fluent-icons]
url = "https://fluenticons.co/mcp"

Cursor

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

Use ~/.cursor/mcp.json to enable it for all projects.

VS Code

.vscode/mcp.json
{
  "servers": {
    "fluent-icons": {
      "type": "http",
      "url": "https://fluenticons.co/mcp"
    }
  }
}

Start the server from the file or the MCP view.

Other

Streamable HTTP, no authentication.

URL
https://fluenticons.co/mcp

OpenAI Responses API:

tools[]
{
  "type": "mcp",
  "server_label": "fluent-icons",
  "server_url": "https://fluenticons.co/mcp",
  "require_approval": "never"
}

HTTP API

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

For agents without MCP support. Reference below.

CLI

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

Test a query

MCP tools

ToolReturns
search_iconsIcons matching a meaning or name, best first, with the React component and import.
recommend_iconsOne icon per UI item in a shared style and size, with a single import line.
get_iconStyles, sizes, component names, platforms, SVG URLs and related icons.
get_icon_codeCode for one variant: React, SVG, Blazor, Flutter, WinUI/WPF, icon font, Android, iOS or Power Apps.
find_similar_iconsRelated icons.

Data: 3,000+ designs from @fluentui/svg-icons 1.1.341, updated with each Microsoft release. Unknown names return icon_not_found with suggestions.

HTTP API

Base URL https://fluenticons.co/api/v1. JSON, no key, CORS enabled.

EndpointDescription
GET /icons/search?q=Search. Optional style, size, platform, limit (1–50), exact, category.
GET /icons/{icon}One icon. Accepts PersonLock, person_lock or PersonLock20Filled.
GET /icons/{icon}/codeplatform: react, svg, blazor, flutter, xaml, font, android, ios, powerapps.
POST /icons/recommendA set of icons for UI items.
Request
curl "https://fluenticons.co/api/v1/icons/search?q=user+permissions&limit=3"
Response
{
  "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/"
    },
    …
  ]
}
Request
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
  }'
Response
{
  "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: {"error": {"code", "message"}} with status 400, 404 or 429. Limit: 120 requests per minute per IP, 1,200 for the MCP server (X-RateLimit-Remaining).

CLI

Node 18 or later, nothing to install.

Terminal
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, code --platform flutter, --style, --size and --json.

Agent instructions

For AGENTS.md, CLAUDE.md, Cursor rules or .github/copilot-instructions.md. Claude Code users can install SKILL.md instead; /llms.txt has a summary for language models.

AGENTS.md
## 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.

FAQ

Is it free?

Yes. No signup, key or paid plan.

What is sent or stored?

Search words and icon names, never your code. Requests are counted (query, icons returned, platform, client type) to improve results. See the privacy policy.

Does it use a language model?

No. Search matches names, Microsoft's keywords and a synonym list, so results are fast and deterministic.

Is it official?

No. Fluenticons is independent. The icons are Microsoft's Fluent UI System Icons (MIT License).