Better Icons Studio

Search 200,000+ icons from 150+ collections, get real SVG code and sync it into any project, fast.

Better Icons Studio — search 200,000+ icons from 150+ collections, get real SVG code and sync it into any project, fast.

How to use Better Icons Studio

  1. Search the embedded catalogue of 783 real icons by name, for example home, arrow or settings
  2. Filter by collection, such as lucide, mdi or heroicons, and by solid or outline style
  3. Click any icon to preview it at sizes from 16 to 64 pixels and pick a colour
  4. Copy the icon as raw SVG, React JSX or an Iconify component, or download the .svg file
  5. Add icons to a batch and generate a ready-made icons file for React, Vue, Svelte, Solid or raw SVG
  6. Copy the MCP server config for Cursor, Claude Code, OpenCode, Windsurf, VS Code or Antigravity

Features

  • 783 real Iconify icons embedded from the 8 popular collections, with real SVG path data
  • The repo's real search, alias resolution, SVG builder and style-preference sorting, ported from src/icon-utils.ts
  • All 11 MCP tools from src/server.ts documented, with copy-ready setup for 6 agents
  • Find similar icons across collections, get recommendations for a use case, and track recent icons
  • Project sync code generator from src/project-sync.ts for React, Vue, Svelte, Solid and SVG
  • Learned collection preferences that prioritise the sets you use most, stored locally in your browser

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.