Better Icons

Install

npx skillfoxx add mcp/better-icons

claude mcp add --transport stdio better-icons -- npx -y better-icons

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": [
        "-y",
        "better-icons"
      ]
    }
  }
}

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": [
        "-y",
        "better-icons"
      ]
    }
  }
}

code --add-mcp '{"name":"better-icons","type":"stdio","command":"npx","args":["-y","better-icons"]}'

{
  "servers": {
    "better-icons": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "better-icons"
      ]
    }
  }
}

codex mcp add better-icons -- npx -y better-icons

[mcp_servers.better-icons]
command = "npx"
args = ["-y", "better-icons"]

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": [
        "-y",
        "better-icons"
      ]
    }
  }
}

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": [
        "-y",
        "better-icons"
      ]
    }
  }
}

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": [
        "-y",
        "better-icons"
      ]
    }
  }
}

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": [
        "-y",
        "better-icons"
      ]
    }
  }
}

{
  "mcp": {
    "better-icons": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "better-icons"
      ]
    }
  }
}

{
  "context_servers": {
    "better-icons": {
      "command": "npx",
      "args": [
        "-y",
        "better-icons"
      ]
    }
  }
}

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": [
        "-y",
        "better-icons"
      ]
    }
  }
}

npx skills add better-auth/better-icons

This is third-party code. Review the repository files before installing.

What it does

The tool gives the agent access to the Iconify catalog: search across 150+ collections, fetch SVG by an id like prefix:name, list collections and recommend an icon for a use case. Icons can be written straight into the project's icon file in tsx, ts or js formats instead of pasting SVG into chat, which saves tokens. There is batch retrieval, discovery of similar icons across collections and memory of the ones you already used. It works three ways: as an MCP server for agents, as a CLI in the terminal and as a skill with a SKILL.md file. No key or account is needed, and export covers React, Vue, Svelte, Solid and raw SVG.

Who it is for. For frontend developers and designers who need project icons without hunting on icon sites.

Example request

Find a cart icon in the lucide collection and add it to my icons file

Limitations

The tool relies on Iconify data, so network access is required. Icons follow the licenses of their source collections, which you should check before shipping. It does not draw custom icons, it only returns what the catalog already has.

How to disable. Remove the better-icons entry from the MCP config, uninstall the global package with npm uninstall -g better-icons, or delete the skill folder.

MCP

Transport

stdio

Authentication

not required

Security check

• Writes icon files into the project and reaches the network for Iconify data

README in short

The README describes a tool for searching and fetching over 200,000 icons from 150+ Iconify collections that works as an MCP server, CLI and skill. The quick start offers adding the skill via npx skills add, configuring MCP with npx better-icons setup, or installing the CLI globally. It lists the MCP tools: search_icons, get_icon, list_collections, recommend_icons and preference viewing. It also covers writing icons straight into a project file, batch retrieval, similar-icon search and memory of used collections. It gives manual setup snippets for Cursor, Claude Code and other clients, MIT licensed.

Related