Icons › For AI agents

The icon library for AI agents

When Claude, ChatGPT, Codex or Cursor builds a UI, it should use real icons, not guessed names or hand-drawn SVGs. Connect your agent to HubToolify Icons and it searches 3,777 original icons, installs the right package and writes import code that works the first time.

MCP server: https://hubtoolify.com/mcp · free · no API key

Connect your AI agent in one step

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

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

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

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

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

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

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

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

https://hubtoolify.com/mcp

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

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

How your agent uses HubToolify

1. 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.
2. 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.
3. Write code that compiles. Every import is checked against the version npm installs (3,777 icons on the site, the package at 1.0.1). An icon newer than the release comes back as inline SVG, never as an import that fails.

Tools on the MCP server

• 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, solid or duotone) 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.

Why AI agents design with HubToolify

• No invented names. Every name comes from the live catalogue, so imports never fail on install.
• No hand-drawn SVGs. The agent uses icons drawn for interfaces, not paths it made up.
• One consistent style. One 24 px grid and one stroke across the UI, in 16 styles.
• 3,777 icons to search. Enough coverage to find a real match instead of settling.
• Free by default. Line, Solid and Duotone, for personal and commercial work. Pro styles only when you ask.
• No API key. Point the agent at the server and start. Nothing to sign up for.

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.

HubToolify Icons for AI agents: FAQ

What is HubToolify Icons for AI agents?

A hosted MCP server, an Agent Skill and a Cursor rule that let AI coding agents use the HubToolify icon library correctly. The server searches all 3,777 icons and returns exact import code; the skill and rule tell an agent when and how to use it.

Which AI agents and editors does it work with?

Claude Code, the Claude app, ChatGPT, Codex CLI, Cursor, VS Code with Copilot, Windsurf and any other client that connects to a remote MCP server over Streamable HTTP. Agents that read skills can use the SKILL.md even without MCP.

Do I need an API key or an account?

No. The server is public and read-only; each address can make 300 requests a minute. Free styles need no account. Pro styles are installed with your Pro account (npx @hubtoolify/icons login).

Is it free?

Yes. The server, the skill and the Line, Solid and Duotone styles are free for personal and commercial use. The 13 Pro styles need a HubToolify Pro plan.

Why not let the AI write icon SVGs itself?

Paths an agent makes up are uneven, off the grid and inconsistent from one screen to the next. Real icons share one grid, stroke and style, and are accessible by default.

Will the agent replace the icon library I already use?

Only if you ask. The skill and rule tell the agent to keep whichever HubToolify package a project already has, and the server only answers what the agent asks for.

What is the difference between the MCP server, the skill and the Cursor rule?

The MCP server is where the icons are searched and the code is checked. The skill (SKILL.md) and the Cursor rule are instructions that make an agent use it at the right moment and paste its answers as given. The skill can also call the server over plain HTTPS where MCP is not set up.

Which frameworks are supported?

React and Next.js (@hubtoolify/icons-react), Vue, Svelte and Angular (@hubtoolify/icons-svg), plain HTML and Laravel (the CSS kit), WordPress (the plugin), and raw inline SVG anywhere. There is no React Native or Flutter package yet.

What happens with an icon that is newer than the npm package?

The server knows which icons the published npm version contains. For a newer icon it returns the inline SVG (or the site's kit, which always has every icon) instead of an import that would fail.

Does the server see my code?

No. It only receives what the agent sends it: search words, icon names, a framework and a style. Queries are not stored; the only thing kept is a one-minute request count per address for the rate limit.