React MCP Server

SVG React icons of popular icon packs using ES6 imports

Local serverstdioTypeScript

What is the React MCP server?

If you already use React, the react mcp server is the piece that lets your assistant work with it directly. SVG React icons of popular icon packs using ES6 imports.

What the server does

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Available tools

The toolset is worth reading before you wire it up, because it tells you what the integration is really for:

  • Key — Default
  • color — undefined (inherit)
  • size — 1em
  • className — undefined
  • style — undefined
  • attr — undefined
  • title — undefined
  • Yarn — The Yarn tool exposed by this server
  • Development — The Development tool exposed by this server
  • Preview — The preview site is the react-icons website, built in Astro+React
  • Demo — The demo is a Create React App boilerplate with react-icons added as a dependency for easy testing

Installation

The server ships on npm as react-icons, so your MCP client can launch it on demand — there is no separate build step. Add the server block to your client's configuration, restart it, and the tools register themselves.

Where it fits

This sits in the developer tooling group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. React's toolset — Key, color, size and 8 more — is a fair guide to whether it matches your workflow. It is maintained by GitHub Actions; worth a glance at recent repository activity before you build anything load-bearing on it.

This entry was verified against React's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.

Worth knowing first

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • With 11 tools registered it takes up a noticeable share of the context window; turn it off in projects that never touch React.
  • Keep per-call confirmation enabled while you learn its behaviour; it is the cheapest safeguard you have.

Available tools

ToolWhat it does
KeyDefault
colorundefined (inherit)
size1em
classNameundefined
styleundefined
attrundefined
titleundefined
YarnThe Yarn tool exposed by this server.
DevelopmentThe Development tool exposed by this server.
PreviewThe preview site is the [react-icons](https://react-icons.github.io/react-icons/) website, built in Astro+React.
DemoThe demo is a [Create React App](https://create-react-app.dev/) boilerplate with react-icons added as a dependency for easy testing.

How to install the React MCP server

{
  "mcpServers": {
    "react-icons": {
      "command": "npx",
      "args": ["-y", "react-icons"]
    }
  }
}

Add to claude_desktop_config.json, then restart Claude Desktop.

Example prompts to try

  • Use React to Key.
  • Use React to color.
  • Use React to size.

Frequently asked questions

It connects React to MCP-compatible AI assistants such as Claude and Cursor, exposing 11 tools (Key, color, size, and more) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with React directly.