I built an MCP server so Claude Code stops hallucinating SVG icons

#mcp #css #opensource #ai

Every time I ask Claude, Cursor, or Windsurf to add icons to my UI, I get hallucinated SVGs — paths that look almost right but are slightly off. Misaligned strokes, weird proportions, icons that don't match any real design system.

So I built Animotion — an open-source MCP server that gives AI coding tools access to:

745 CSS3 animations (entrance, exit, attention, loaders, 3D transforms, and 15 more categories)
9,000+ real SVG icons from Lucide, Heroicons, Tabler, and Bootstrap
10 MCP tools including search_animations, get_icon, suggest_animation, and more

Zero-clone setup

{
  "mcpServers": {
    "animotion": {
      "command": "npx",
      "args": ["-y", "animotion-mcp"]
    }
  }
}

Paste that into your Claude Code / Cursor / Windsurf MCP config. That's it. No repo clone, no npm install, no paths.

Your AI agent can now:

search_icons("shopping cart") and get a real Lucide/Heroicons SVG
search_animations("fade in") and get production-ready CSS
suggest_animation("modal appearing with bounce") and get the best match

Also works as a traditional CSS library

Don't use AI tools? The animations work as plain CSS classes too:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/animotion-mcp/animotion-mcp.github.io@v1.0.0/css/animotion.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/animotion-mcp/animotion-mcp.github.io@v1.0.0/css/keyframes.css">

<div class="animotion-fade-in">Hello World</div>

DEV Community

I built an MCP server so Claude Code stops hallucinating SVG icons

Zero-clone setup

Also works as a traditional CSS library

Links

Top comments (0)