withicons

734 icons x 34 styles = 24,956 icons. Every one animated. Plus 50 live icons in every style: over 25,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

New in v0.4.0: 14 new styles (34 in all): soft 3D (clay, soft3d), clear and metal (liquid, chrome), product looks (bento, suite, dock, brutal) and six holiday styles (utsav, rangoli, halloween, christmas, lunar, valentine); a redrawn glass and a duo accent; 234 new icons (734 in all), among them 39 avatars with six skin tones and 95 festival icons. 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.

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.

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

The 34 styles

style	group	subpath	look
line	Essentials	(default)	A precise 1.75px outline with round caps and joins. The default for any interface.
solid	Essentials	/solid	The filled companion to Line: bold mass and crisp knockouts.
duo	Essentials	/duo	The line drawing over a soft tonal fill with one small accent detail. Recolour them with --with-duo and --with-duo-accent.
suite	Essentials	/suite	Polished full-colour icons, like the ones in an office or cloud suite.
bento	Product & brand	/bento	Each icon sits in its own soft tinted tile, like a bento-grid feature card.
dock	Product & brand	/dock	Glossy rounded app tiles, like the icons in a desktop dock.
brutal	Product & brand	/brutal	Thick black outlines, loud flat colour and a hard offset shadow.
bauhaus	Product & brand	/bauhaus	Bauhaus posters in miniature: pure circles, squares and bars in red, yellow and blue, overprinted where they meet.
clay	3D & glass	/clay	Soft, rounded 3D objects that look sculpted from matte clay.
glass	3D & glass	/glass	Soft, luxurious frosted glass with gentle light and depth, drawn with soft gradients.
liquid	3D & glass	/liquid	Clear liquid glass that bends the light, with bright rims and soft reflections.
chrome	3D & glass	/chrome	Polished liquid chrome with mirror highlights. Y2K and futuristic.
soft3d	3D & glass	/soft3d	Soft, studio-lit 3D objects with real depth. Physical things sit at a gentle angle; people look like friendly 3D avatars.
luxe	3D & glass	/luxe	Premium multi-layered 3D: sapphire enamel slabs with an extruded wall, polished gold, a jewel, lit chamfers and a crisp highlight.
skeuo	3D & glass	/skeuo	Skeuomorphic: each icon a small object in a real material (paper, leather, metal, brass, glass), lit from above.
kawaii	Playful	/kawaii	Chubby pastel shapes with a soft thick outline and a tiny blushing face.
plush	Playful	/plush	Stuffed toys sewn from felt for kids: puffy panels, dark piping, running stitches, buttons and embroidery.
sticker	Playful	/sticker	Y2K die-cut vinyl stickers: candy colours, a puffy white border, a glossy shine and sparkles.
gloss	Playful	/gloss	Inflated, glossy and pillowy, with carved specular highlights, in one flat colour.
pastel	Playful	/pastel	Soft pastel colour fields in lavender, peach, mint, baby blue, butter and blush, with gentle tonal depth.
pixel	Playful	/pixel	Hand-tuned 16-bit pixel art, sharp at 16, 32 and 48px.
retro	Playful	/retro	Warm 70s patches: chunky outlines, sunset-striped fills and a hard offset shadow.
sketch	Artistic	/sketch	Loose marker strokes drawn twice, with crossing corners and a light hachure.
engrave	Artistic	/engrave	Banknote intaglio: a swelling contour and burin hatching that models light and shade.
blueprint	Artistic	/blueprint	A drafting-table drawing: hairline keylines, centre lines and open control nodes.
anime	Artistic	/anime	Anime cel style: crisp tapered ink line art, flat cel colour with one hard shadow, a bright specular shine and the odd sparkle.
gothic	Artistic	/gothic	Cathedral craft: carved limestone, stained glass in ruby, sapphire, gold and emerald set in dark lead, pointed arches and tracery.
coquette	Artistic	/coquette	Ballet-pink romance: blush satin objects tied with ribbon-red bows, pearls, lace and delicate gold.
utsav	Holidays	/utsav	Warm marigold and saffron shapes with a plum outline, a fine gold inner line and rangoli dot-work.
rangoli	Holidays	/rangoli	Clean objects in a warm festive glow, each with one Indian festival motif: petals, a lotus, a toran or a diya.
halloween	Holidays	/halloween	Spooky-cute pumpkin, witch-purple and midnight shapes with candle-lit carvings, slime drips and a tiny bat.
christmas	Holidays	/christmas	Cosy cranberry, pine and gold shapes with a snow cap on every top edge, candy-cane stripes and a sprig of holly.
lunar	Holidays	/lunar	Lucky red lacquer with a gold-foil rim, jade details, paper-cut cloud scrolls, silk tassels and plum blossoms.
valentine	Holidays	/valentine	Cute pink-to-red cartoon shapes with a warm berry outline, polka dots, tiny blushing faces and floating hearts.

The seven mono styles (line, solid, duo, gloss, engrave, blueprint, sketch) paint in currentColor, so they follow your text colour on light and dark backgrounds (duo's tone and accent and blueprint's accent can take more colour through --with-duo, --with-duo-accent and --with-accent). The other 27 ship a default palette that reads on white and on near-black; every colour is a CSS variable (--with-<style>-<role>, for example --with-luxe-c1, --with-clay-shine, --with-anime-shadow) and the ink still follows currentColor. The rich styles (glass, clay, bento, suite, dock, liquid, chrome, soft3d and the holiday styles) also draw gradients whose stops are those same variables, so one line of CSS re-themes them:

.hero { --with-kawaii-fill-1: #c4b5fd; --with-retro-1: #fde047; --with-luxe-c1: #0f766e; --with-coquette-c3: #be123c; }

The styles come in six groups, as on the site: Essentials (line, solid, duo, suite) is for interfaces; Product & brand, 3D & glass, Playful and Artistic are for marketing, slides, illustration and empty states; Holidays is for festivals and seasonal campaigns.

Colour palettes

Every icon ships 20-30 colour palettes picked for that icon (pizza: Margherita, Pepperoni, Pesto verde…), 17,303 in all. A palette sets ten colour roles (ink, c1-c4, tint, accent, shadow, shine, edge) and every multi-colour style (duo, blueprint and the 27 colour styles, from glass and kawaii to clay, soft3d and the holiday styles) maps them onto its own variables, so one palette changes every colour of an icon in any of those styles:

import pizza from '@withicons/core/palettes/pizza.json' with { type: 'json' }
import { applyPalette, bakePalette } from '@withicons/core/palettes/palette-map.js'
import retro from '@withicons/core/nodes/retro'
import { toSvg } from '@withicons/core'

const svg = toSvg(retro.pizza, 'retro')
applyPalette(svg, pizza.palettes[1].colors)  // { vars: { '--with-retro-1': '#F7C64B', … }, color: '#3A1408' }: set as inline CSS
bakePalette(svg, pizza.palettes[1].colors)   // the same SVG with the hex colours written in, for files and design tools

The MCP server (list_palettes, and get_icon with palette / colors) and the CLI (npx withicons palettes pizza, npx withicons get pizza --style retro --palette pepperoni) return the same palettes as ready code.

Animation

Optional and separate: @withicons/motion animates the element that holds any icon, in any style or package, with pure CSS. Every icon has a tuned continuous loop and hover effect, plus icon-to-icon swaps.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion@latest/dist/motion.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion@latest/dist/icons/bell.css">  <!-- one file per animated icon -->

<span class="wm wm-loop" data-wm="bell">…bell icon…</span>                                     <!-- continuous -->
<button class="wm-trigger"><span class="wm wm-hover" data-wm="bell">…</span> Alerts</button>   <!-- on hover -->
<span class="wm-swap wm-fx-morph"><svg class="wm-a">…play…</svg><svg class="wm-b">…pause…</svg></span>

motion.css (the presets) is about 10 KB gzipped and each icon's own moves are a 0.3 KB file; in a bundled app, import '@withicons/motion/icons.css' has all 734. With <with-icon motion="loop"> the element links each icon's file for you. prefers-reduced-motion switches everything off. Agents get exact code from the MCP tool animate_icon or npx withicons animate bell --trigger hover --format react. Spec: forge/MOTION.md.

Live icons

A separate set of up to 50 icons whose content you set: a calendar with a date, a clock with a time, a bell with a count, a battery at a level, a weather icon with a temperature, a tag with a short word. Each is a small generator (forge/dynamic/<name>.mjs) that builds an ordinary skeleton, so it renders in every style.

import { render } from '@withicons/dynamic'
render('calendar-date', { day: 17, month: 'MAR' }, 'luxe', { size: 48 })   // -> SVG string

<script src="https://cdn.jsdelivr.net/npm/@withicons/dynamic@latest/dist/cdn/lite.js"></script>  <!-- ~35 KB gzipped; each icon and style loads on first use -->
<with-live-icon name="calendar-date" day="17" month="MAR" variant="bauhaus"></with-live-icon>

Try them at withicons.com/live.html. Spec: forge/DYNAMIC.md.

Packages

package	install	canonical import
@withicons/react	npm i @withicons/react	import { Home } from '@withicons/react'
@withicons/vue	npm i @withicons/vue	import { Home } from '@withicons/vue'
@withicons/svelte	npm i @withicons/svelte	import { Home } from '@withicons/svelte'
@withicons/angular	npm i @withicons/angular	import { WithIconComponent, Home } from '@withicons/angular'
@withicons/solid	npm i @withicons/solid	import { Home } from '@withicons/solid'
@withicons/web	npm i @withicons/web	import '@withicons/web' then <with-icon name="home">
@withicons/classes	npm i @withicons/classes	import '@withicons/classes/with-line.css' then <i class="with with-home">
@withicons/static	npm i @withicons/static	<svg><use href="sprite-line.svg#with-home"/></svg>
@withicons/web-plus, classes-plus, static-plus	npm i @withicons/web-plus	the newer styles for web, classes and static (jsDelivr serves at most 150 MB per package)
@withicons/core	npm i @withicons/core	import { resolve, search } from '@withicons/core'
@withicons/core-plus	npm i @withicons/core-plus	SVGs and node data of clay, bento, suite, dock, liquid, chrome and brutal (same paths as core)
@withicons/soft3d	npm i @withicons/soft3d	the soft3d style's SVGs, node data and CSS classes
@withicons/holiday	npm i @withicons/holiday	the six holiday styles' SVGs, node data and CSS classes
@withicons/motion	npm i @withicons/motion	import '@withicons/motion/motion.css' (animations, optional)
@withicons/dynamic	npm i @withicons/dynamic	import { render } from '@withicons/dynamic' (live icons)
@withicons/search	npm i @withicons/search	import { create } from '@withicons/search'
@withicons/mcp	npx -y @withicons/mcp	MCP server for AI assistants (search, code, animation)
withicons	npx withicons search "throw away"	CLI: search, code, init for AI coding tools

No build step, straight from a CDN. The page downloads only the icons it shows:

<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 7 KB gzipped, then each icon is its own small file (a line icon about 150 bytes gzipped). Prefer Font Awesome-style <i> tags? with-loader.js (6 KB gzipped) links just the CSS of the icons on the page, in any style:

<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>

Zero JavaScript: link one stylesheet per style (with-line.css, 26 KB gzipped). with-all.css imports every style (about 20 MB gzipped) and is for prototypes only. Details: @withicons/classes.

The same API everywhere

• Default path = line. Other styles: <pkg>/solid, <pkg>/duo, <pkg>/gloss, <pkg>/engrave, <pkg>/blueprint, <pkg>/sketch, <pkg>/glass, <pkg>/kawaii, <pkg>/sticker, <pkg>/pixel, <pkg>/retro, <pkg>/luxe, <pkg>/bauhaus, <pkg>/skeuo, <pkg>/anime, <pkg>/gothic, <pkg>/pastel, <pkg>/coquette, <pkg>/plush, <pkg>/clay, <pkg>/bento, <pkg>/suite, <pkg>/dock, <pkg>/liquid, <pkg>/chrome, <pkg>/soft3d, <pkg>/brutal, <pkg>/utsav, <pkg>/rangoli, <pkg>/halloween, <pkg>/christmas, <pkg>/lunar, <pkg>/valentine. The framework packages hold every style.
• Names: PascalCase of the kebab-case icon name, exported twice: ArrowRight and ArrowRightIcon.
• Deep imports: <pkg>/icons/home (line) and <pkg>/solid/icons/home.
• Props: size (24), color (currentColor), strokeWidth (styles with live strokes), absoluteStrokeWidth, title or aria-label (sets role="img", otherwise aria-hidden), className / class; everything else goes to the <svg>. <with-icon> takes the same as attributes (stroke-width, absolute-stroke-width, label), plus name and variant.
• Dynamic names: <Icon name="home" variant="solid" />. It pulls in every icon, so prefer named imports.
• Aliases: names you might guess resolve to the real icon (bin -> trash, house -> home). resolve() in @withicons/core throws on ambiguous aliases (listing the candidates) and on unknown names (suggesting the 3 nearest).

Website

The zero-build site in site/ (open site/index.html) lets you browse and search all icons in every style, copy the SVG or its import line, and read site/llms.txt, a guide for AI agents. Every icon page has a Customize studio: pick a style, change every colour of a multi-colour icon (one picker per colour, or one of the icon's palettes), try its animations and swaps, and download it as PNG, SVG, PDF, GIF, video, Lottie, PowerPoint, Word, favicons or framework code.

Repository

forge/icons/<name>.json    one skeleton per icon (the only hand-drawn input)
forge/styles/<style>.mjs   the 34 style renderers
forge/dynamic/<name>.mjs   live icon generators (forge/DYNAMIC.md)
forge/motion/<name>.json   one animation spec per icon (forge/MOTION.md)
forge/palettes/<name>.json 20-30 colour palettes per icon (forge/PALETTES.md)
forge/lib/emit-*.mjs       package emitters
packages/*                 the npm packages (dist/ is generated)
site/                      the website

node forge/build.mjs                  # render every icon x style, emit every package + site data
node forge/build.mjs react vue        # only some emitters
node forge/tools/check.mjs home lock  # lint skeletons and render them through every style
node forge/tools/check-motion.mjs     # validate the animation specs
node forge/tools/check-palettes.mjs   # validate the colour palettes

Contributing

Ideas, icon requests and drawings are very welcome.

• Missing an icon? Request it (search the library first: many icons answer to several names).
• Found a bug? Open an issue. Questions and ideas go to Discussions.
• Drawing an icon or a style? Read CONTRIBUTING.md, forge/CONTRACT.md and forge/PARTS.md. Agents working on this repo: AGENTS.md.
• Security: please report privately, see SECURITY.md.

License

MIT. Use the icons for anything, including commercial work, with no credit needed. If you pass on the icon files or code themselves, keep the licence text with them. Every icon is original work drawn on the with icons grid. The licence does not cover the with icons and Evergrow names and logos. Plain-English answers: withicons.com/license.html.

withicons.com

Powered by Evergrow