withicons

<div align="center">

<a href="https://withicons.com"><img src="https://withicons.com/media/github/banner.png?v=0.4.0" alt="with icons: 734 icons, 34 styles, all animated. Over 25,000 free, open-source icons." width="100%"></a>

<h3>Free, open-source icons that can’t sit still.</h3>

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.<br> For slides, Canva, Figma, websites, apps and AI agents.

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

<br> <img src="https://withicons.com/media/github/styles-morph.gif" alt="The cat icon turning into each of the 34 styles in turn: line, solid, duo, gloss, engrave, blueprint, sketch, glass, kawaii, sticker, pixel, retro, luxe, bauhaus, skeuo, anime, gothic, pastel, coquette, plush, clay, bento, suite, dock, liquid, chrome, soft3d, brutal, utsav, rangoli, halloween, christmas, lunar and valentine." width="100%"> </div>

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.

<picture> <source media="(prefers-color-scheme: dark)" srcset="https://withicons.com/media/github/styles-dark.png?v=0.4.0"> <img src="https://withicons.com/media/github/styles-light.png?v=0.4.0" alt="The rocket icon in all 34 styles, in six groups: Essentials (line, solid, duo, suite), Product and brand (bento, dock, brutal, bauhaus), 3D and glass (clay, glass, liquid, chrome, soft 3D, luxe, skeuo), Playful (kawaii, plush, sticker, gloss, pastel, pixel, retro), Artistic (sketch, engrave, blueprint, anime, gothic, coquette) and Holidays (utsav, rangoli, halloween, christmas, lunar, valentine)." width="100%"> </picture>

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.

<details open> <summary><b>React</b></summary>

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

</details> <details> <summary><b>Vue</b></summary>

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>

</details> <details> <summary><b>Svelte</b></summary>

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

</details> <details> <summary><b>Angular, Solid</b></summary>

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

</details> <details> <summary><b>HTML, no build step (CDN)</b></summary>

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

</details> <details> <summary><b>CSS classes (Font Awesome style)</b></summary>

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

</details> <details> <summary><b>Command line</b></summary>

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…

</details>

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