MCP server

#What it can do

Once connected, your agent gets five tools:

• search_icons: fuzzy-search the catalog by name, keyword, or category.
• get_icon: return an icon's component source plus a ready-to-paste import (read-only).
• add_icon: write an icon's component file into your project (default components/icons/).
• get_docs: read these docs, including the props, the ref handle, the useIconHover hook and the examples. Without a page it lists them.
• list_libraries: list the libraries and how many icons each has.

#Claude Code

Register the server in one command:

claude mcp add animateicons -- npx -y @animateicons/mcp

Then just ask, and the agent picks the right tool:

// Then just ask your agent in plain language:
//   "add a notification bell icon"
//
// → it calls search_icons, picks bell-ring, then add_icon
//   and writes components/icons/bell-ring.tsx for you.

#Cursor & other clients

Add the server to your MCP config (e.g. .cursor/mcp.json or .mcp.json):

{
	"mcpServers": {
		"animateicons": {
			"command": "npx",
			"args": ["-y", "@animateicons/mcp"]
		}
	}
}

#Requirements

Prefer the terminal? The CLI does the same thing with npx animateicons add.