Phosphor Icons MCP provides access to the Phosphor Icons library, a comprehensive collection of over 1,400 customizable icons for UI design and development. Key features of Phosphor Icons MCP: - Six icon weights available: thin, light, regular, bold, fill, and duotone - Customizable appearance with any color (hex, RGB, named colors, or currentColor) and custom pixel sizes - Search and discovery tools to find icons by name, category, or tags - Batch retrieval for multiple icons simultaneously - Complete catalog browsing with metadata for all available icons - Framework-specific integration guidance for quick implementation

Phosphor Icons MCP Server

[](https://smithery.ai/server/@lasaths/phosphor-icons-mcp)

A Model Context Protocol (MCP) server that provides access to Phosphor Icons - a flexible icon family with 6 different weights and over 1,000+ icons.

> Important: This is a community-driven, AI-assisted MCP server and is not an official repository or affiliated with the Phosphor Icons project. This project was created with AI assistance and is maintained by the community. The original Phosphor Icons project can be found at https://github.com/phosphor-icons.

Features

Installation

npm install

Development

Run the development server:

npm run dev

This will start the server on port 8081 and open the Smithery playground for testing.

Configuration

The server supports an optional configuration parameter:

Tools

get-icon

Parameters:

Examples:

get-icon name="heart" weight="bold" color="#FF0000"
get-icon names=["star", "heart"] weight="fill" color="gold" size=48
get-icon name="user" color="currentColor"

search-icons

Parameters:

Example:

search-icons query="arrow" limit=5

list-categories

Resources

phosphor://catalog

phosphor://weights

Prompts

implement-icon

Parameters:

Publishing to Smithery

1. Push your code to GitHub 2. Visit smithery.ai/new 3. Connect your GitHub repository 4. Configure automatic deployments

Icon Weights

Examples

Get a red heart icon in bold:

// Returns SVG content for a bold red heart icon
get-icon({ name: "heart", weight: "bold", color: "#FF0000" })

Get a blue star icon at custom size:

// Returns a 48px blue filled star icon
get-icon({ name: "star", weight: "fill", color: "#3B82F6", size: 48 })

Search for navigation icons:

// Returns list of icons related to navigation
search-icons({ query: "navigation", limit: 10 })

Get multiple colored icons for a UI:

// Get home, user, and settings icons all in blue
get-icon({ 
  names: ["home", "user", "gear"],
  weight: "regular",
  color: "#3B82F6",
  size: 24
})

Disclaimer

NO WARRANTY OR LIABILITY

THIS SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,