Lucide Icons

by SeeYangZhi

345 downloads
Not rated
GitHub

About

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.

Details

Author
SeeYangZhi
Downloads
345
Categories
Developer Tools, AI, Other, Design

Jump to

- Search through 1,500+ Lucide icons by name or category
- Browse icons organized by categories (Design, Communication, etc.)
- Get React/JSX code examples for any icon
- Detailed information for each icon (name, category, etc.)
- Supports both HTTP server and stdio-based MCP modes
- Ready for Claude Desktop and other MCP clients

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:

  1. Download and install Highlight from highlightai.com/download
  2. Navigate to the plugins tab and select "Add Custom Plugin"
  3. Configure the plugin with the settings below
    Plugin Name Lucide Icons
    Command (node, npx, python, etc.)

    Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.

  4. Enable "Start Automatically" if you want the plugin to start when Highlight launches

From the repository

2 Install Bun If You Don T Have It

Refer to the official](https://modelcontextprotocol.io/introduction)Bun installation guide.
After installation, restart your terminal and check:

This compiles the TypeScript source to JavaScript in thebuilddirectory.

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

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

There are two main ways to run the MCP server:

Suitable for clients that support communication over HTTP.

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

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

To use this MCP server inClaude Desktop:
- Open your Claude Desktop configuration file:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

- Add the server to themcpServerssection:

{ "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"] } } }

- Save the file and restart Claude Desktop.
- You should now see the "lucide-icons" server available in Claude's tools panel.

This MCP server exposes the following tools to AI coding assistants. Each icon can belong to multiple categories, providing flexible search and discovery capabilities.

- Description: Search for Lucide icons by name or category. Returns icons with their complete category arrays.
- Parameters:

- query(string): Search term for icon name or category
- category(optional string): Filter by specific category
- limit(optional number): Maximum results to return

- Description: Search for icon categories by category name using partial matching
- Parameters:

- query(string): Search term for category name
- limit(optional number): Maximum results to return

- Description: Fuzzy Search for icons from lucide by icon name
- Parameters:

- query(string): Search term for icon
- limit(optional number): Maximum results to return

- Description: Fuzzy Search for icon categories by category name
- Parameters:

- query(string): Search term for category name
- limit(optional number): Maximum results to return

- Description: Get usage examples for a Lucide React icon by the exact name
- Parameters:

- name(string): Search term for icon

- Description: List all icons in a specific category
- Parameters:

- category(string): Category name to list icons for
- limit(optional number): Maximum results to return

- Description: List all available icon categories with their icon counts

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

User: "Find me icons related to ArrowRight"

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

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

{ "name": "ArrowRight" }

import { ArrowRight } from "lucide-react"; function Example() { return ( <div> <ArrowRight /> </div> ); }

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

{ "query": "design" }

Then callslist_icons_by_category":

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

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

You can test the MCP server locally using theMCP Inspector.

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

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

- 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 inbuild/)
- 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

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

- Lucide- The icon library
- Lucide React- React implementation
- Model Context Protocol- MCP specification
- MCP TypeScript SDK- SDK used
- MCP Inspector- Testing tool
- Bun- JavaScript runtime

This project is licensed under the MIT License. SeeLICENSEfor details.

This project references icons from Lucide (https://lucide.dev/), which are licensed under theirISC License:

Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Lightweight MCP server for native desktop notifications with action buttons, text replies, and LLM-aware icons.

Hosted MCP server for generating SVG illustrations, icons, and brand mascots with svgapp.ai from MCP-compatible AI clients.

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

Get access to MCP server SVG and MCP server PNG icons in your vibe-coding projects

745+ CSS3 animations and 9,000+ real SVG icons for AI coding agents. 10 MCP tools. Zero-clone setup via npx.

Create, validate, and render diagrams from D2 (Declarative Diagramming) code into SVG and PNG formats.

Extract and download usable website favicons and return direct icon URLs and metadata through an MCP server.

Renders Mermaid diagram syntax to PNG or SVG images with configurable themes and backgrounds.

Quickly retrieve SVGs using the Iconify API, with no external data files required.

A MCP server that exposes SVGR functionality to convert SVG content into React components

Claude Desktop / Cursor

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

{
    "mcpServers": {
        "lucide icons": {
            "lucide-icons-mcp": {
                "command": "bun",
                "args": [
                    "run",
                    "build"
                ]
            }
        }
    }
}

McpServers

{
    "lucide-icons-mcp": {
        "command": "bun",
        "args": [
            "run",
            "build"
        ]
    }
}

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

- Git
- Bun or Node.js

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

```bash
npx lucide-icons-mcp --stdio

No reviews yet — be the first

Sign in to leave a review

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

Email sign in

No reviews posted yet.

Install

Add to Claude Desktop or Cursor

{
    "mcpServers": {
        "lucide icons": {
            "lucide-icons-mcp": {
                "command": "bun",
                "args": [
                    "run",
                    "build"
                ]
            }
        }
    }
}

More like this

Similar MCP servers you might find useful

Browse category

Sequential Thinking

Sequential Thinking is an MCP server that provides a tool for dynamic and reflective problem-solving through a structured, step-by-step thinking process. It is…

88.2k
Other

Filesystem

Filesystem is a Node.js server that implements the Model Context Protocol (MCP) for filesystem operations. It enables AI assistants to read, write, and manage…

88.1k
Other