withicons MCP server

1,000 icons x 34 styles = 34,000 icons. Every one animated. Plus 50 live icons in every style: over 35,000 free icons. MIT, no sign-up. For slides, Canva, Figma, websites, apps and AI agents.

Browse icons · Live icons · Guides · Developers · For AI · About

Now on Iconify: with icons is on Iconify as 11 icon sets, so it works in every Iconify tool (<iconify-icon>, unplugin-icons, UnoCSS, Tailwind, Figma). How to use them.

New in v0.6.0: 250 new icons (1,000 in all), 50 animated loaders in every style (@withicons/loaders), and about 3,300 hand-drawn touch-ups where a generated drawing read badly. Full changelog

Why with icons

• One family, thirty-four looks. Every icon is drawn once by hand on a 24x24 grid. Thirty-four deterministic renderers turn that drawing into thirty-four styles, from clean line to clay and soft3d 3D, liquid glass, chrome, anime, kawaii, felt plush and six holiday styles. Switch styles and nothing moves.
• Every icon moves. Each one has its own tuned loop and hover animation, plus icon-to-icon swaps. Pure CSS, off for reduced motion.
• Live icons. A calendar with your date, a clock with your time, a bell with your count, in every style.
• Built for people and AI agents. Copy into Slides, Canva or Figma, install a package, or let your agent search by meaning through MCP.
• Free means free. MIT. Commercial use, no credit needed.

The 34 styles, one poster each

Every style has its own poster: the style's hero icon and twelve more, all moving with their real animation. Each is a still PNG and a looping GIF in site/media/github/posters/, free to share.

See it in action

Click any recording for a full-size screenshot.

Quick start

Not a developer? Open withicons.com, find an icon, copy it or download it (PNG, SVG, PDF, PowerPoint, GIF, Lottie and more). The guides show every app step by step.

npm i @withicons/react

import { Home, Search } from '@withicons/react'          // line (the default style)
import { Home as HomeSolid } from '@withicons/react/solid' // any style is a subpath

<Home />
<Search size={20} strokeWidth={1.5} />
<HomeSolid size={32} color="#e11d48" title="Home" />

npm i @withicons/vue

<script setup>
import { Home, Search } from '@withicons/vue'
import { Home as HomeSolid } from '@withicons/vue/solid'
</script>

<template>
  <Home />
  <Search :size="20" :stroke-width="1.5" />
  <HomeSolid :size="32" color="#e11d48" title="Home" />
</template>

npm i @withicons/svelte

<script>
  import { Home, Search } from '@withicons/svelte'
  import { Home as HomeSolid } from '@withicons/svelte/solid'
</script>

<Home />
<Search size={20} strokeWidth={1.5} />
<HomeSolid size={32} color="#e11d48" title="Home" />

npm i @withicons/angular   # import { WithIconComponent, Home } from '@withicons/angular'
npm i @withicons/solid     # import { Home } from '@withicons/solid'

<script type="module" src="https://cdn.jsdelivr.net/npm/@withicons/web@latest/dist/cdn.js"></script>
<with-icon name="home" variant="solid"></with-icon>

cdn.js is about 7 KB gzipped, then each icon is its own small file (a line icon is about 150 bytes gzipped).

<script src="https://cdn.jsdelivr.net/npm/@withicons/classes@latest/dist/with-loader.js" defer></script>
<i class="with with-home"></i> <i class="with with-heart with-solid"></i>

The loader (about 6 KB gzipped) links just the CSS of the icons on the page. Zero JavaScript: link one stylesheet per style, such as with-line.css.

with icons is on Iconify as 11 icon sets, 15,000 icons in all. withicons holds six styles as suffixes (rocket, rocket-solid, rocket-duo, rocket-blueprint, rocket-sketch, rocket-engrave); each of the other ten sets is one style: withicons-suite, withicons-skeuo, withicons-sticker, withicons-pastel, withicons-plush, withicons-anime, withicons-gothic, withicons-bauhaus, withicons-halloween and withicons-christmas.

<script src="https://code.iconify.design/iconify-icon/2.3.0/iconify-icon.min.js"></script>
<iconify-icon icon="withicons:rocket"></iconify-icon>
<iconify-icon icon="withicons:rocket-solid"></iconify-icon>
<iconify-icon icon="withicons-anime:rocket"></iconify-icon>

With unplugin-icons, import Rocket from '~icons/withicons-anime/rocket'; with UnoCSS or Tailwind (@iconify/tailwind4), class="i-withicons-rocket" or class="icon-[withicons--rocket]". All 34 styles and the animations are in the @withicons/* packages above.

npx withicons search "throw away"                         # find icons by meaning
npx withicons get trash --style solid --format react      # paste-ready code
npx withicons export bell --style anime --format gif      # files: svg, png, pdf, pptx, gif, lottie…

For AI agents

One command adds the with icons agent skill and MCP server to Claude Code, Codex, Cursor, VS Code, Windsurf, opencode and more:

npx withicons init

• MCP server: remote at https://withicons.com/mcp, or local with npx -y @withicons/mcp. Tools to search by meaning, get paste-ready code, animate and export icons. Details: withicons.com/ai.html.
• Agent skill: skills/with-icons/SKILL.md (also npx withicons skill).
• llms.txt: withicons.com/llms.txt and llms-full.txt, plus a JSON catalogue at icons.json.

Then just ask: “Add a settings icon in the duo style to the sidebar” or “Make the bell ring when a notification arrives.”

Reference