AI agents (MCP)

Connect Claude, ChatGPT, Cursor, Codex, VS Code or any MCP client to the icon library.

as Markdown, for notes or an AI chat

AI coding agents often guess icon names that do not exist or draw their own SVG paths. Connect yours to the HubToolify MCP server and it searches 4,811 real icons, picks the package your project uses and writes import code that compiles. The server is free and needs no API key.

Server URL (Streamable HTTP)

https://hubtoolify.com/mcp

Connect your agent#

Claude Code#

One command adds the server to Claude Code. Claude then searches the library and writes the imports itself.

This project

claude mcp add --transport http hubtoolify-icons https://hubtoolify.com/mcp

Every project

claude mcp add --transport http --scope user hubtoolify-icons https://hubtoolify.com/mcp

Shared with your team (.mcp.json)

{
  "mcpServers": {
    "hubtoolify-icons": { "type": "http", "url": "https://hubtoolify.com/mcp" }
  }
}

Claude app#

Add it once as a custom connector on claude.ai; the Claude desktop app uses the same connectors.

Customize → Connectors → + Add → Add custom connector.
Name: HubToolify Icons. URL: https://hubtoolify.com/mcp
Continue, choose "No sign in", then Add.

Free accounts can add one custom connector. On Team and Enterprise an owner adds it under Organization settings → Connectors.

ChatGPT#

ChatGPT connects to remote MCP servers as plugins.

Open chatgpt.com/plugins and choose Add → Add custom MCP server (not "Create plugin", which never connects the server).
Name: HubToolify Icons. URL: https://hubtoolify.com/mcp
Authentication: No authentication, confirm, then Create.

Whether custom MCP servers are available depends on your ChatGPT plan and, in a workspace, on your admin. Not coding? The HubToolify app for ChatGPT shows icons, stickers and tools with previews and your Pro downloads: hubtoolify.com/chatgpt

Codex CLI#

Add the server to Codex's config file.

~/.codex/config.toml

[mcp_servers.hubtoolify-icons]
url = "https://hubtoolify.com/mcp"

Cursor#

Add the server, then the rule file so Cursor uses it whenever it writes UI.

.cursor/mcp.json

{
  "mcpServers": {
    "hubtoolify-icons": { "url": "https://hubtoolify.com/mcp" }
  }
}

Project rule

curl -fsSL --create-dirs -o .cursor/rules/hubtoolify-icons.mdc https://hubtoolify.com/agents/cursor/hubtoolify-icons.mdc

VS Code#

Copilot's agent mode reads MCP servers from the workspace.

.vscode/mcp.json

{
  "servers": {
    "hubtoolify-icons": { "type": "http", "url": "https://hubtoolify.com/mcp" }
  }
}

Windsurf#

Add the server to Cascade's MCP config.

mcp_config.json

{
  "mcpServers": {
    "hubtoolify-icons": { "serverUrl": "https://hubtoolify.com/mcp" }
  }
}

Any MCP client#

Any other client that connects to remote MCP servers over Streamable HTTP: add the URL as a remote server.

Server URL

https://hubtoolify.com/mcp

No API key. Protocol versions 2026-07-28, 2025-11-25, 2025-06-18, 2025-03-26.

Agent Skill#

Instructions any skills-capable agent loads from your project: which package, which component, which props. It works even where MCP is not set up, by calling the same server over HTTPS.

Claude Code (this project)

curl -fsSL --create-dirs -o .claude/skills/hubtoolify-icons/SKILL.md https://hubtoolify.com/agents/hubtoolify-icons/SKILL.md

Claude Code (all projects)

curl -fsSL --create-dirs -o ~/.claude/skills/hubtoolify-icons/SKILL.md https://hubtoolify.com/agents/hubtoolify-icons/SKILL.md

Download the skill as a ZIP

How the agent uses it#

Search by meaning. The agent asks for everything the screen needs in one call: "settings, notifications, wallet, log out". It gets real names ranked the same way as the search on this site.
Pick the right package. It checks the project (React, Vue, Svelte, Angular, plain HTML, Laravel, WordPress) and asks for the exact install command, import and usage.
Write code that compiles. Every import is checked against the version npm installs (4,811 icons on the site, the package at 2.0.3). An icon newer than the release comes back as inline SVG, never as an import that fails.

Tools on the server#

Tool	What it does
`search_icons`	Find HubToolify icons by meaning, name or tag. Pass every concept the screen needs in one call with `queries` (e.g. ["settings", "notifications", "wallet", "log out"]); each gets its own ranked list. Returns exact icon names, React component names and CSS classes. Use only names this returns.
`get_icon_code`	Exact install command, import line and usage for the given icons in a framework and style. Checks each name against the live catalogue and against the version npm installs; an icon newer than the npm release comes back with its inline SVG instead of an import that would fail.
`list_icons`	Without a category: every category with its subcategories and icon counts. With a category: its icon names, a page at a time.
`get_icon_svg`	One free-style icon (line) as a complete inline SVG that uses currentColor. Works anywhere without a package.
`get_platform_usage`	A short setup guide for one platform: React, Next.js, Vue/Nuxt, Svelte, Angular, plain HTML, Laravel, WordPress, React Native or Flutter.

Prompts to try#

Build a settings page with a sidebar using HubToolify icons.
Design a fintech dashboard with icons for wallet, transfer, invoice and settings.
Add a notification bell with an unread badge to the header.
Replace the hand-drawn SVG icons in this app with HubToolify icons.
Set up HubToolify icons in this Vue app and use a home icon in the bottom nav.
Use HubToolify's CSS kit on a plain HTML page and add a heart icon next to Favorite.

Not coding?#

The HubToolify app for ChatGPT shows icons, stickers and tools with previews right in the chat, and your Pro downloads once you sign in.

Setup screenshots and the FAQ are on the AI agents page.