phosphor-icons-mcp

内容与创意

by lasaths

按名称、分类或标签搜索和浏览 1400+ Phosphor icons;可生成六种字重的 SVG,自定义颜色与尺寸,或批量获取图标,帮助快速完成 UI 设计与集成。

什么是 phosphor-icons-mcp

按名称、分类或标签搜索和浏览 1400+ Phosphor icons;可生成六种字重的 SVG,自定义颜色与尺寸,或批量获取图标,帮助快速完成 UI 设计与集成。

README

Phosphor Icons MCP Server

smithery badge

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

  • 🎨 6 Icon Weights: thin, light, regular, bold, fill, and duotone
  • 🌈 Color Customization: Apply any color (hex, RGB, named colors, or currentColor)
  • 📏 Size Control: Specify custom sizes in pixels
  • 🔍 Search Icons: Find icons by name, category, or tags
  • 📦 Batch Operations: Get multiple icons at once
  • 📚 Catalog Access: Browse all available icons with metadata
  • 🛠️ Implementation Guides: Get framework-specific integration help

Installation

bash
npm install

Development

Run the development server:

bash
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:

  • defaultWeight: Set the default icon weight (thin, light, regular, bold, fill, duotone). Default: regular

Tools

get-icon

Retrieve one or more SVG icons from Phosphor Icons library. Provide either a single icon name or an array of names for batch retrieval.

Parameters:

  • name (string, optional): Single icon name in kebab-case (e.g., 'arrow-left', 'user'). Use this for a single icon.
  • names (array, optional): Array of icon names for batch retrieval. Use this for multiple icons.
  • weight (optional): Icon weight/style
  • color (optional): Icon color - accepts hex (#FF0000), RGB (rgb(255,0,0)), named colors (red), or 'currentColor'
  • size (optional): Icon size in pixels (sets both width and height)
  • format (optional): Output format (svg or png). Default: svg
  • saveToFile (optional): Path to save the PNG file (single icon only)
  • saveDir (optional): Directory to save PNG files (multiple icons only)

Examples:

code
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

Search for icons by name, category, or tags.

Parameters:

  • query (string): Search term
  • limit (optional): Maximum results to return (default: 10)

Example:

code
search-icons query="arrow" limit=5

list-categories

Get a list of all available icon categories.

Resources

phosphor://catalog

Complete catalog of popular Phosphor Icons with metadata including categories, tags, and available weights.

phosphor://weights

Detailed information about the 6 available icon weights/styles and their best use cases.

Prompts

implement-icon

Get guidance on implementing a Phosphor icon in your project.

Parameters:

  • iconName (string): Name of the icon
  • framework (string): Frontend framework (html, react, vue, svelte, angular)

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

  • Thin: Delicate, minimal strokes - best for large sizes
  • Light: Subtle, refined appearance - modern designs
  • Regular: Balanced, versatile - general use (default)
  • Bold: Strong, impactful - emphasis and small sizes
  • Fill: Solid, filled shapes - strong emphasis
  • Duotone: Two-tone design - visual interest

Examples

Get a red heart icon in bold:

typescript
// 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:

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

Search for navigation icons:

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

Get multiple colored icons for a UI:

typescript
// 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, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

USE AT YOUR OWN RISK

  • This is an unofficial, community-driven project created with AI assistance
  • The software is provided without any guarantees or support
  • Users are responsible for testing and validating the software for their use cases
  • The maintainers are not responsible for any damages, data loss, or issues arising from the use of this software
  • This project is not endorsed by or affiliated with the official Phosphor Icons project

License

This MCP server is MIT licensed. Phosphor Icons are also MIT licensed.

Links

Credits

  • Icons: Provided by Phosphor Icons - created by Tobias Fried
  • MCP Server: Community-driven project created with AI assistance
  • Maintainers: Community contributors (not affiliated with Phosphor Icons)

常见问题

phosphor-icons-mcp 是什么?

按名称、分类或标签搜索和浏览 1400+ Phosphor icons;可生成六种字重的 SVG,自定义颜色与尺寸,或批量获取图标,帮助快速完成 UI 设计与集成。

相关 Skills

主题工厂

by anthropics

Universal
热门

给幻灯片、文档、报告和 HTML 落地页快速套用专业配色与字体主题,内置 10 套预设风格并支持现场生成新主题,适合统一品牌或内容视觉。

主题工厂能帮你把幻灯片、文档到落地页快速统一视觉风格,内置 10 套主题,还能按需即时生成新主题。

内容与创意
未扫描109.6k

品牌规范

by anthropics

Universal
热门

把文档、幻灯片等内容快速套用 Anthropic 官方品牌配色与字体规范,统一标题、正文和图形视觉风格,适合做品牌化排版、视觉润色和公司设计标准校准。

把文档、页面和素材快速套用 Anthropic 官方色彩与字体系,少翻设计手册也能稳稳保持统一品牌感。

内容与创意
未扫描109.6k

文档共著

by anthropics

Universal
热门

围绕文档、提案、技术规格、决策记录等写作任务,按上下文收集、结构迭代、读者测试三步协作共创,减少信息遗漏,写出更清晰、经得起他人阅读的内容。

写文档、方案或技术规格时容易思路散、信息漏,它用结构化共著流程帮你高效传递上下文、反复打磨内容,还能从读者视角做验证。

内容与创意
未扫描109.6k

相关 MCP Server

热门

免费的加密新闻聚合 MCP,汇集 Bitcoin、Ethereum、DeFi、Solana 与 altcoins 资讯源。

内容与创意
111

by ProfessionalWiki

让 Large Language Model 客户端无缝连接任意 MediaWiki 站点,可创建、更新、搜索页面,并通过 OAuth 2.0 安全管理内容。

内容与创意16 个工具
72

借助 86+ 个云端 media processing robots,处理视频、音频、图像和文档。

内容与创意
71

评论