@withicons/vue

@withicons/vue

1000 icons x 34 styles for Vue 3. Tree-shakable, typed, currentColor by default.

npm i @withicons/vue

<script setup>
import { Home, Search } from '@withicons/vue'          // line (default style)
import { Home as HomeSolid } from '@withicons/vue/solid'
</script>

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

• One rule: the root is the line style, every other style is a subpath (@withicons/vue/solid, @withicons/vue/duo, ...). Import the icons you use by name from the style you want. That is all.
• Fast everywhere: each style is a single module, so the root or a style subpath loads that one style (never all 34), quickly in Node, SSR, Jest and Vitest, and bundlers keep only the icons you import. No bundler config needed (no optimizePackageImports, no deep imports).
• Every icon is exported twice: Home and HomeIcon. Names are the PascalCase of the kebab-case icon name (arrow-right -> ArrowRight).
• Deep imports keep working: @withicons/vue/icons/home, @withicons/vue/solid/icons/home.
• No bundler (an ESM CDN in a <script type="module">)? Ask for the icons you use, so the CDN tree-shakes the style down to them: https://esm.sh/@withicons/vue@0.6.0?exports=Home,Search (line), https://esm.sh/@withicons/vue@0.6.0/solid?exports=Home. A bare style URL is every icon of that style (megabytes).

Props

Styles

Duo's tint can be recoloured with the CSS variable --with-duo.

Palette styles

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, valentine paint a default multi-colour palette. The main ink stays currentColor (so color still recolours the outline; sticker draws its bold outline with --with-sticker-ink instead, pixel draws its bold outline with --with-pixel-ink instead, luxe draws its bold outline with --with-luxe-ink instead, skeuo draws its bold outline with --with-skeuo-ink instead, anime draws its bold outline with --with-anime-ink instead, gothic draws its bold outline with --with-gothic-ink instead, pastel draws its bold outline with --with-pastel-ink instead, coquette draws its bold outline with --with-coquette-ink instead, plush draws its bold outline with --with-plush-ink instead, clay draws its bold outline with --with-clay-ink instead, bento draws its bold outline with --with-bento-ink instead, suite draws its bold outline with --with-suite-ink instead, dock draws its bold outline with --with-dock-ink instead, liquid draws its bold outline with --with-liquid-ink instead, chrome draws its bold outline with --with-chrome-ink instead, soft3d draws its bold outline with --with-soft3d-ink instead, brutal draws its bold outline with --with-brutal-ink instead, utsav draws its bold outline with --with-utsav-ink instead, rangoli draws its bold outline with --with-rangoli-ink instead, halloween draws its bold outline with --with-halloween-ink instead, christmas draws its bold outline with --with-christmas-ink instead, lunar draws its bold outline with --with-lunar-ink instead, valentine draws its bold outline with --with-valentine-ink instead) and every other colour is a CSS custom property with a built-in default, so you can re-theme a page, a section or one icon without touching the SVG:

.brand { --with-kawaii-c1: #c4b5fd; --with-retro-1: #fde047; }

Inline SVG (components, <with-icon>, sprites, IconNode data) keeps the variables. Standalone .svg files have them flattened to the defaults, because <img>, design tools and rasterizers cannot see CSS.

glass, clay, bento, suite, dock, liquid, chrome, soft3d, utsav, rangoli, halloween, christmas, lunar, valentine draw real SVG gradients: a <defs> of linearGradient / radialGradient whose stop colours are the same CSS variables, so palettes and --with-* overrides recolour them too. Every inline copy gets its own gradient ids (components, <with-icon>, with-icons.js), so one page can show the same icon many times in different colours. When you inline SVG strings yourself, pass idSuffix (toSvg in @withicons/core, svg / loadSvg in @withicons/web, render in @withicons/dynamic) with a different value per copy. Files and <img> need nothing.

Change every colour in Vue

The palette variables are inherited CSS custom properties, so a :style binding (or any CSS rule) re-themes one icon, and color sets the outline:

<script setup>
import { Pizza } from '@withicons/vue/retro'
</script>

<template>
  <Pizza :size="48" color="#3b1f12"
         :style="{ '--with-retro-1': '#f4b942', '--with-retro-2': '#d9412b', '--with-retro-3': '#2f8f4e' }" />
</template>

Every icon also has 20-30 colour palettes picked for it in @withicons/core (npm i @withicons/core). Every component carries its drawing as iconNode, and applyPalette maps a palette onto the variables that icon uses, in any style:

<script setup>
import { Pizza } from '@withicons/vue/retro'
import pizza from '@withicons/core/palettes/pizza.json'
import { applyPalette } from '@withicons/core/palettes/palette-map.js'

const looks = pizza.palettes.map(p => ({ id: p.id, name: p.name, ...applyPalette(JSON.stringify(Pizza.iconNode), p.colors) }))
</script>

<template>
  <Pizza v-for="p in looks" :key="p.id" :size="40" :style="p.vars" :color="p.color ?? undefined" :title="p.name" />
</template>

Animation (optional)

Animations ship separately in @withicons/motion, so icons never pay for them. They work with every style and every package because they animate the element that holds the icon:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion@latest/dist/motion.css">
<!-- each animated icon's own motion: one small file per icon (icons.css has all of them) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion@latest/dist/icons/bell.css">

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

prefers-reduced-motion turns every animation off. JS API: import { motion, swap, motionFor } from '@withicons/motion'.

Animation in Vue

Import the two stylesheets once (for example in main.js), then wrap the icon. motionAttrs builds the wrapper's attributes for you, and works in SSR (Nuxt) because it only returns classes and a style string:

<script setup>
import '@withicons/motion/motion.css'
import '@withicons/motion/icons.css'
import { motionAttrs } from '@withicons/motion'
import { Bell, Loader } from '@withicons/vue'
</script>

<template>
  <span class="wm wm-loop" data-wm="bell"><Bell /></span>
  <button class="wm-trigger"><span v-bind="motionAttrs('bell', { trigger: 'hover' })"><Bell /></span> Alerts</button>
  <span v-bind="motionAttrs(null, { preset: 'spin', duration: 1.2 })" class="wm-force"><Loader title="Loading" /></span>
</template>

For the JS-only triggers (inview, a hover that always finishes) call motion(el, name, options) from @withicons/motion in onMounted on a template ref, and destroy() the handle in onBeforeUnmount.

Right-to-left

Icons are drawn for left-to-right text. In Arabic, Hebrew, Persian or Urdu layouts, mirror the directional ones (arrows, chevrons, undo/redo, reply, send, log-in/out) with a class; symmetric icons and logos stay as they are:

[dir="rtl"] .with-rtl { transform: scaleX(-1); }   /* every browser */
.with-rtl:dir(rtl) { transform: scaleX(-1); }      /* also follows inherited direction (Chrome 120+, Safari 16.4+, Firefox) */

<ChevronRight class="with-rtl" />

<!-- animated: mirror the icon, and point nudge / pass the other way on the wrapper -->
<span class="wm wm-hover" data-wm="arrow-right" :style="{ '--wm-dx': isRtl ? -1 : 1 }">
  <ArrowRight class="with-rtl" />
</span>

Generic icon (dynamic names)

<script setup>
import { Icon } from '@withicons/vue'
</script>

<template>
  <Icon name="home" :size="20" />                     <!-- line: renders at once -->
  <Icon name="home" variant="solid" :size="20" />     <!-- solid: loaded on first use -->
</template>

name accepts canonical names and unambiguous aliases (bin -> trash); unknown names warn with the 3 nearest names and render nothing.

How Icon loads styles. The root Icon renders the line style at once (a dynamic name needs every line icon, so using Icon brings that style). Any other variant is loaded the first time it renders: one dynamic import per style (one chunk in a bundle, one file in Node), shared by every Icon of that style. Until a style has loaded, its Icon is an async component (defineAsyncComponent) that renders nothing, then the icon; Vue's renderToString and Nuxt SSR wait for it, so server HTML is complete. With require() (CommonJS) styles load synchronously.

To have other styles ready up front, await preloadStyles('solid', 'duo') (no argument = every style). Or import Icon from @withicons/vue/icon: it imports every icon of every style (1000 x 34, heavy) and always renders synchronously. Icon is tree-shaken away when unused; prefer named imports wherever the name is static.

Custom icons

createWithIcon(name, style, displayName, iconNode) builds a component from IconNode data ([tag, attrs][], 24x24 grid).

MIT licensed. Part of with icons: one skeleton per icon, 34 deterministic styles, 34,000 icons. GitHub · Powered by Evergrow.