mcpField
P
pickapicon-mcp

pickapicon-mcp

Local
github.com/Leee62Media & Design4Updated 74w ago

About pickapicon-mcp

pickapicon-mcp is an MCP server for frontend developers, UI designers, and designers who need SVG icons. It uses the Iconify API to find icons by description and retrieve their SVG code.

Key features

  1. 01List Iconify icon repositories
  2. 02Find icons by description and prefix
  3. 03Retrieve SVG details by name and prefix

Use cases

  1. 01Finding SVG icons for components or pages
  2. 02Retrieving SVG code for a chosen icon
  3. 03Searching for icons with a modern design color

MCP support

The MCP server exposes tools to list Iconify repositories, search icons, and retrieve SVG code by icon name and prefix.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
"mcpServers": {
"pickapicon": {
"command": "npx",
"args": [
"-y",
"pickapicon-mcp"
],
"env": {
"PREFIX": "<PREFIX>"
}
}
}
}
Run commandnpx -y pickapicon-mcp
Environment variables to set
PREFIX

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmpickapicon-mcp

Tools

3

Saved tool list · updated 3w ago

This tool takes no parameters.

Details

From the project README

pickapicon-mcp

logo

smithery badge 中文文档 English

Description

This is a mcp for FE/UI/Designer to get SVG By Iconify API.

By using pickapicon-mcp, You just need to ask LLMs to get what you need instead of going to the website to find svg and copying stupidly.

It can make your workflow to get svg simplify, Dancing with MCP & LLMs 😎.

👉👉 Icon Repo WebSite Iconify 👈👈

Tools

  • get_icon_repos

    • get all repo name, for other tools param <prefix>
  • get_icons_by_desc_and_prefix

    • get icons by inputting desc what you want and prefix
    • inputs:
      • desc: desc what you want
      • prefix?: prefix
  • get_icon_detail_by_prefix_and_name

    • get icon detail (SVG code) by prefix and svg name
    • inputs:
      • svg_name: svg name
      • prefix?: prefix

QuickStart

Installing via Smithery

To install Pickapicon MCP for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @Leee62/pickapicon-mcp --client claude

this is MCP Server Config

  "mcpServers": {
    "pickapicon-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "pickapicon-mcp@latest"
      ],
      "env": {
        "PREFIX": "<LIKE ant-design>"
      }
    }
  }

Case

  • Quickly get svgs about COMPONENT / PAGE case2
  • get svg with Modern Design Color case1

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.