React Icons MCP Server

by anshuopinion

253 downloads

Not rated

GitHub

Other

About

# React Icons MCP Server A Model Context Protocol (MCP) server for React Icons integration. This server enables AI coding tools like Cursor, Windsurf, Cline, and other AI-powered coding assistants to access and understand the React Icons library. ## What is React Icons? [React…

Details

Author: anshuopinion
Downloads: 253
Categories: Other

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name React Icons MCP Server

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

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

JSON

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

JSON

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

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

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

JSON

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

JSON

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

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

From the repository

Install globally via npm install -g react-icons-mcp or run with npx react-icons-mcp. Configure it in your AI tool's MCP settings using the provided JSON for macOS/Linux or Windows. Run in HTTP mode (default port 3334), stdio mode with --stdio, or on a custom port with --port.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

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

McpServers

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

React Icons MCP Server

A Model Context Protocol (MCP) server for React Icons integration. This server enables AI coding tools like Cursor, Windsurf, Cline, and other AI-powered coding assistants to access and understand the React Icons library.

What is React Icons?

React Icons is a popular library that includes icons from multiple icon sets like Font Awesome, Material Design, Bootstrap, and many more. It allows easy integration of icons into React applications using ES6 imports.

What is MCP?

The Model Context Protocol is a standard for AI tools to request specific context from sources outside their main training data. This MCP server allows AI coding assistants to access information about React Icons to provide better coding assistance.

Features

- Get information about all icon libraries available in react-icons
- Search for icons by name across all libraries or within a specific library
- Retrieve all icons from a specific library
- Get detailed information about specific icons
- Get usage examples for icons in different React contexts

Getting Started

Installation

```bash
npm install -g react-icons-mcp

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

Claude Desktop / Cursor

McpServers

React Icons MCP Server

What is React Icons?

What is MCP?

Features

Getting Started

Installation

Install

More like this

Sequential Thinking

Filesystem

EverArt

Google Drive

Reactive Resume

FastMCP v2 🚀