Sponsored by Deepsite.site

MCP.so

lucide-icons-mcp

Created By
SeeYangZhi6 months ago
A Model Context Protocol (MCP) server exposing Lucide icons as resources and tools for LLMs and agentic applications. Built with Bun and the MCP TypeScript SDK.
# lucide-icons
# mcp
OverviewContentToolsComments
Content

lucide-icons-mcp

A Model Context Protocol (MCP) server exposing Lucide React icons as resources and tools for LLMs and agentic applications. Built with Bun and the MCP TypeScript SDK.

What is Lucide?

Lucide is a beautiful & consistent icon toolkit made by the community. It's an open-source icon library that provides over 1,500+ carefully crafted icons in a single, consistent style. Originally forked from Feather Icons, Lucide has grown into one of the most popular icon libraries for modern web development.

What is MCP?

The Model Context Protocol (MCP) is a standard for AI tools to request specific context from sources outside their main training data.

This MCP server allows AI coding assistants and other agentic applications to access information about Lucide React icons, enabling better assistance with icon search, discovery, and implementation.

Features

  • 🔍 Icon Search: Search through 1,500+ Lucide icons by name or category
  • 📂 Category Browsing: List icons by categories (Design, Communication, Media, etc.)
  • 💡 Usage Examples: Get React/JSX code examples for any icon
  • 🔧 Icon Information: Detailed information about each icon
  • 🚀 MCP Integration: Ready for Claude Desktop and other MCP clients
  • 🌐 Dual Mode: HTTP server or stdio-based MCP server
  • 📊 Comprehensive Coverage: All Lucide icons with proper JSX usage

Prerequisites

Getting Started (Development)

1. Clone the repository

git clone https://github.com/SeeYangZhi/lucide-icons-mcp.git
cd lucide-icons-mcp

2. Install Bun (if you don't have it)

Refer to the official Bun installation guide.
After installation, restart your terminal and check:

bun --version

3. Install dependencies

bun install

4. Build the project

This compiles the TypeScript source to JavaScript in the build directory.

bun run build

Usage

HTTP Mode

You can run the HTTP server using npx:

npx lucide-icons-mcp

This starts the HTTP server (defaults to port 3000).

Or install globally:

npm install -g lucide-icons-mcp

Then run:

lucide-icons-mcp

Stdio Mode

npx lucide-icons-mcp --stdio
# or if installed globally
lucide-icons-mcp --stdio

Local Development

There are two main ways to run the MCP server:

1. HTTP Mode

Suitable for clients that support communication over HTTP.

For development (using Bun):

bun run start
# or directly
bun run src/entry.ts

2. Stdio Mode

Often used for direct integration with tools like Claude Desktop or the MCP Inspector.

For development (using Bun):

bun run src/entry.ts --stdio

Configuration with AI Tools

Example: Claude Desktop

To use this MCP server in Claude Desktop:

  1. Open your Claude Desktop configuration file:
code ~/Library/Application\ Support/Claude/claude_desktop_config.json
  1. Add the server to the mcpServers section:

Option A: via npx (Recommended):

{
  "mcpServers": {
    "lucide-icons": {
      "command": "npx",
      "args": ["lucide-icons-mcp", "--stdio"]
    }
  }
}

Option B: Pointing directly to the build output:

{
  "mcpServers": {
    "lucide-icons": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/lucide-icons-mcp/build/entry.js", "--stdio"]
    }
  }
}
  1. Save the file and restart Claude Desktop.
  2. You should now see the "lucide-icons" server available in Claude's tools panel.

Tools Available (MCP)

This MCP server exposes the following tools to AI coding assistants:

1. search_icons

  • Description: Search for Lucide icons by name or category
  • Parameters:
    • query (string): Search term for icon name or category
    • category (optional string): Filter by specific category
    • limit (optional number): Maximum results to return (default: 20)

2. search_categories

  • Description: Search for icon categories by name
  • Parameters:
    • query (string): Search term for category name
    • limit (optional number): Maximum results to return (default: 10)

3. get_icon_usage_examples

  • Description: Get React/JSX usage examples for a specific Lucide icon
  • Parameters:
    • name (string): Icon name (e.g., 'Home', 'User', 'Settings')

4. list_icons_by_category

  • Description: List all icons in a specific category
  • Parameters:
    • category (string): Category name to list icons for
    • limit (optional number): Maximum results to return

5. list_all_categories

  • Description: List all available icon categories with their icon counts
  • Parameters: None

6. get_icon_info

  • Description: Get detailed information about a specific icon
  • Parameters:
    • name (string): Icon name to get information for

7. list_all_icons

  • Description: List all available Lucide icons
  • Parameters:
    • category (optional string): Filter by category
    • limit (optional number): Maximum results to return (default: 100)

Example Usage

Here's how an AI tool might use this MCP server:

Example 1: Finding Icons

User: "Find me icons related to ArrowRight"

AI tool calls search_icons:

{
  "query": "ArrowRight",
  "limit": 5
}

Response: Lists icons like ArrowRight

Example 2: Getting Usage Examples

User: "Show me how to use the ArrowRight icon"

AI tool calls get_icon_usage_examples:

{
  "name": "ArrowRight"
}

Response:

import { ArrowRight } from "lucide-react";

function Example() {
  return (
    <div>
      <ArrowRight />
    </div>
  );
}

Example 3: Browsing Categories

User: "What design-related icons are available?"

AI tool calls search_categories:

{
  "query": "design"
}

Then calls list_icons_by_category":

{
  "category": "Design",
  "limit": 10
}

Icon Categories

Lucide icons are organized into categories such as:

  • Accessibility
  • Accounts & access
  • Animals
  • Arrows
  • Brands
  • Buildings
  • Charts
  • Communication
  • Connectivity
  • Cursors
  • Design
  • Coding & development
  • Devices
  • Emoji
  • File icons
  • Finance
  • Food & beverage
  • Gaming
  • Home
  • Layout
  • Mail
  • Mathematics
  • Medical
  • Multimedia
  • Nature
  • Navigation
  • Notification
  • People
  • Photography
  • Science
  • Seasons
  • Security
  • Shapes
  • Shopping
  • Social
  • Sports
  • Sustainability
  • Text formatting
  • Time & calendar
  • Tools
  • Transportation
  • Travel
  • Weather

Testing MCP Locally with Inspector

You can test the MCP server locally using the MCP Inspector.

First, ensure the project is built:

bun run build

Then launch the Inspector:

npx @modelcontextprotocol/inspector node ./build/entry.js --stdio

This opens the Inspector interface for interactive testing of your MCP server.

Development Scripts

  • bun run dev: Starts the server in HTTP mode for development
  • bun run dev:stdio: Starts the stdio MCP server for development
  • bun run build: Compiles TypeScript to JavaScript (output in build/)
  • bun run lint: Lints the codebase using ESLint
  • bun run lint:fix: Automatically fixes linting issues
  • bun run crawl: Crawls Lucide website to update icon data
  • bun run pre-build: Crawls data, builds icon metadata, and fixes linting

Project Structure

lucide-icons-mcp/
├── src/
│   ├── entry.ts          # Main entry point
│   ├── http.ts           # HTTP server implementation
│   ├── stdio.ts          # Stdio server implementation
│   ├── utils.ts          # MCP server and tools logic
│   ├── data/
│   │   └── icons.ts      # Generated icon metadata and helpers
│   └── scripts/
│       ├── main.ts       # Web crawler for Lucide icons
│       ├── build-data.ts # Icon data processing
│       └── routes.ts     # Crawler route definitions
├── build/                # Compiled JavaScript output
├── storage/              # Crawler data storage
└── data/                 # Processed icon metadata

Data Sources

This project includes a web crawler that automatically extracts icon information from the Lucide website, ensuring up-to-date icon data and categories.

Resources

License

This project is licensed under the MIT License. See LICENSE for details.

The project includes icons from Lucide, which are licensed under the ISC License. See the LICENSE file for full attribution details.

Recommend Servers
TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.
MCP AdvisorMCP Advisor & Installation - Use the right MCP server for your needs
Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.
Howtocook Mcp基于Anduin2017 / HowToCook （程序员在家做饭指南）的mcp server，帮你推荐菜谱、规划膳食，解决“今天吃什么“的世纪难题； Based on Anduin2017/HowToCook (Programmer's Guide to Cooking at Home), MCP Server helps you recommend recipes, plan meals, and solve the century old problem of "what to eat today"
CursorThe AI Code Editor
EdgeOne Pages MCPAn MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.
Serper MCP ServerA Serper MCP Server
Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code
DeepChatYour AI Partner on Desktop
Amap Maps高德地图官方 MCP Server
WindsurfThe new purpose-built IDE to harness magic
Jina AI MCP ToolsA Model Context Protocol (MCP) server that integrates with Jina AI Search Foundation APIs.
BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.
Context7Context7 MCP Server -- Up-to-date code documentation for LLMs and AI code editors
TimeA Model Context Protocol server that provides time and timezone conversion capabilities. This server enables LLMs to get current time information and perform timezone conversions using IANA timezone names, with automatic system timezone detection.
AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.
Tavily Mcp
ChatWiseThe second fastest AI chatbot™
Baidu Map百度地图核心API现已全面兼容MCP协议，是国内首家兼容MCP协议的地图服务商。
MiniMax MCPOfficial MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.
Playwright McpPlaywright MCP server