One icon set.
Every framework.

Animations @withicons/motion

Install

npm i @withicons/motion

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion/dist/motion.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion/dist/icons/bell.css">

CSS only: add two classes

No JavaScript needed. Wrap the icon (or put the classes on <with-icon> / <i>) and choose when it moves.

<!-- its own motion, forever -->
<span class="wm wm-loop" data-wm="bell"><svg …bell…></svg></span>

<!-- plays when the button is hovered or focused -->
<button class="wm-trigger">
  <span class="wm wm-hover" data-wm="bell"><svg …></svg></span> Notifications
</button>

<!-- choose the preset, tune it with CSS variables -->
<span class="wm wm-loop wm-p-spin" style="--wm-dur: 2s"><svg …settings…></svg></span>
<i class="with with-star wm wm-hover wm-p-twinkle"></i>

Parts: each piece moves its own way

Spinning a whole drawing makes its backdrop square, its sparkles and its shadow spin too, and the icon looks broken. So every style tags what it draws, and the motion moves the parts: a sun turns while its backdrop only breathes, a heart beats while its sparkles twinkle on their own, a rocket lifts while its shadow stays on the ground, and a bell’s clapper rings a beat behind the bell.

You don’t add anything. It happens whenever an inline SVG sits directly inside a wm wrapper, or in <with-icon>. Icons in <img> and <i class="with …"> tags, swaps and the draw preset still move as one piece.

• bell · Line The bell plays ring and its moving part plays ring a beat behind.
• moon · Bauhaus The moon plays breathe and its decorations twinkle on their own loop.
• cloud · Luxe The cloud plays float and its shadow stays on the ground and shrinks as it lifts.
• heart · Sticker The heart plays beat, its decorations drift gently on their own loop and its shadow moves with it.
• moon · --wm-deco: none The same icon with its decorations kept still: only the object moves.

<!-- the icon's own moves, part by part (needs icons.css) -->
<span class="wm wm-loop" data-wm="sun"><svg …sun, bauhaus…></svg></span>

<!-- keep the decorations still: only the object moves -->
<span class="wm wm-loop" data-wm="sun" style="--wm-deco: none"><svg …></svg></span>

<!-- or choose their loop: wm-deco-breathe | wm-deco-float | wm-deco-twinkle -->
<span class="wm wm-loop wm-p-spin" style="--wm-deco: wm-deco-float"><svg …></svg></span>

import { motion } from '@withicons/motion'

motion(el, 'sun')                       // the sun turns, its backdrop breathes
motion(el, 'sun', { deco: 'still' })    // 'breathe' | 'float' | 'twinkle' | 'still'

The tags are plain classes (class="wm-deco"): harmless without the motion CSS and kept by every package. A preset you pick (wm-p-spin) moves the object and its parts together, while decorations and shadows keep their own behaviour. Animated SVG, GIF, video and Lottie downloads move part by part too, and record until the decoration loop comes back round.

The 32 presets

Each preset is one CSS animation that works on every icon. Click a card to copy its classes.

• spin Turns round and round 1.2 sloaders, refresh, settings
• spin-once One smooth turn, then rests 0.8 srefresh or rotate on hover
• tick Turns in small steps, like a clock 1 sclocks, timers, step loaders
• pulse Swells a little and back 1.4 srecord, live, notification dots
• beat A heartbeat: double thump 1.2 shearts, likes, health
• breathe A slow, calm swell 3 smoon, leaf, calm things
• float Bobs gently up and down 2.6 sclouds, balloons, planes, bots
• bounce Drops and squashes 1 sballs, packages, pins
• sway Leans slowly side to side 2.8 splants, flags, trees
• ring Swings like a ringing bell 1.4 sbells, alarm clocks
• wiggle A quick little jiggle 0.8 spencils, brushes, bugs
• shake Shakes its head: no 0.6 serrors, denied, ban
• nod Nods: yes 0.8 scheck, thumbs up
• nudge Points the way and comes back 1.2 sarrows, send, external links
• pass Slides out and back in from the other side 1.4 sarrows, upload, download
• rise Floats up and fades, then returns 1.6 supload, rockets, steam
• drop Falls down and fades, then returns 1.6 sdownload, droplets, rain
• blink Blinks like an eye 3.5 seyes, smiles, bots
• flicker Flickers like a flame 1.6 sflames, lightning, bulbs
• twinkle Sparkles and glints 1.8 sstars, sparkles, gems
• pop Pops in with a tiny overshoot 0.5 sadd, gifts, badges, likes
• tada A celebration wiggle 1 strophies, awards, parties
• jelly Wobbles like jelly 0.9 stoggles, buttons, smiles
• flip Flips over like a coin 1.2 scoins, cards, swaps
• rock Rocks slowly like a boat 2.4 sboats, anchors, hourglasses
• tilt Leans in and holds 1.6 ssearch, magnets, cursors
• zoom Zooms in and back 1.2 szoom, maximize, focus
• orbit Drifts in a small circle 2.4 splanets, satellites, compasses
• glow A soft halo pulses around it 1.8 sbulbs, suns, power
• draw Draws its own lines (outline styles) 1.6 ssignatures, routes, checks
• type Tiny jitters, like keystrokes 0.9 skeyboards, terminals, chat
• fill Fills up, like charging 1.6 sbattery, signal, wifi, volume

Presets marked as one-shots (pop, tada, shake…) are made for hover and taps; the rest loop seamlessly. draw traces the strokes of outline styles and falls back to pop on filled ones.

Swap: turn one icon into another

Stack two icons in a wm-swap wrapper. The second one shows when the wrapper (or a wm-trigger around it) is hovered, or when it has .is-on or aria-pressed="true": perfect for play/pause, show/hide password, menu/close and like buttons.

<button aria-pressed="false" aria-label="Play">
  <span class="wm-swap wm-fx-flip">
    <svg class="wm-a" …play…></svg>
    <svg class="wm-b" …pause…></svg>
  </span>
</button>
<script>
  button.onclick = () => button.setAttribute('aria-pressed', button.getAttribute('aria-pressed') !== 'true')
</script>

Effects (add wm-fx- in front): fade, scale, rotate, flip, slide-up, slide-down, slide-left, slide-right, blur, spin, morph, draw. Draw needs an outline style and falls back to fade. Add wm-loop to a swap to alternate forever.

In your framework

The classes are the whole API, so they work in any framework. Import the CSS once, then wrap icons.

import '@withicons/motion/motion.css'
import '@withicons/motion/icons.css'          // each icon's own animation
import { useState } from 'react'
import { Bell, Play, Pause } from '@withicons/react'

export function Toolbar() {
  const [playing, setPlaying] = useState(false)
  return (
    <>
      {/* rings on hover or keyboard focus of the button */}
      <button className="wm-trigger">
        <span className="wm wm-hover" data-wm="bell"><Bell /></span> Notifications
      </button>

      {/* play turns into pause with a flip */}
      <button aria-label={playing ? 'Pause' : 'Play'} onClick={() => setPlaying(p => !p)}>
        <span className={'wm-swap wm-fx-flip' + (playing ? ' is-on' : '')}>
          <Play className="wm-a" /><Pause className="wm-b" />
        </span>
      </button>
    </>
  )
}

import { useEffect, useRef } from 'react'
import { motion } from '@withicons/motion'

// imperative: start / stop from code (e.g. while a request is pending)
export function useMotion(name, options) {
  const ref = useRef(null)
  useEffect(() => {
    const m = motion(ref.current, name, options)
    return () => m.destroy()
  }, [name])
  return ref   // <span ref={useMotion('loader', { trigger: 'loop' })}><Loader /></span>
}

<script setup>
import '@withicons/motion/motion.css'
import '@withicons/motion/icons.css'
import { ref } from 'vue'
import { Bell, Play, Pause } from '@withicons/vue'
const playing = ref(false)
</script>

<template>
  <button class="wm-trigger">
    <span class="wm wm-hover" data-wm="bell"><Bell /></span> Notifications
  </button>

  <button :aria-label="playing ? 'Pause' : 'Play'" @click="playing = !playing">
    <span class="wm-swap wm-fx-flip" :class="{ 'is-on': playing }">
      <Play class="wm-a" /><Pause class="wm-b" />
    </span>
  </button>
</template>

<script>
  import '@withicons/motion/motion.css'
  import '@withicons/motion/icons.css'
  import { Bell, Play, Pause } from '@withicons/svelte'
  let playing = false
</script>

<button class="wm-trigger">
  <span class="wm wm-hover" data-wm="bell"><Bell /></span> Notifications
</button>

<button aria-label={playing ? 'Pause' : 'Play'} on:click={() => (playing = !playing)}>
  <span class="wm-swap wm-fx-flip" class:is-on={playing}>
    <Play class="wm-a" /><Pause class="wm-b" />
  </span>
</button>

// angular.json → "styles": ["node_modules/@withicons/motion/dist/motion.css",
//                           "node_modules/@withicons/motion/dist/icons.css", …]
import { Component, signal } from '@angular/core'
import { WithIconComponent, Bell, Play, Pause } from '@withicons/angular'

@Component({
  selector: 'app-toolbar',
  imports: [WithIconComponent],
  template: `
    <button class="wm-trigger">
      <span class="wm wm-hover" data-wm="bell"><with-icon [icon]="Bell" /></span> Notifications
    </button>
    <button [attr.aria-label]="playing() ? 'Pause' : 'Play'" (click)="playing.set(!playing())">
      <span class="wm-swap wm-fx-flip" [class.is-on]="playing()">
        <with-icon class="wm-a" [icon]="Play" /><with-icon class="wm-b" [icon]="Pause" />
      </span>
    </button>
  `,
})
export class ToolbarComponent { Bell = Bell; Play = Play; Pause = Pause; playing = signal(false) }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion/dist/motion.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@withicons/web/dist/cdn.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@withicons/motion/dist/element.js"></script>

<with-icon name="bell" motion="loop"></with-icon>                <!-- its own animation, forever -->
<with-icon name="heart" variant="solid" motion="hover"></with-icon> <!-- plays on hover / focus -->
<with-icon name="star" motion="once" preset="tada"></with-icon>  <!-- once, when it appears -->
<with-icon name="play" swap-to="pause" swap-effect="flip" swap-trigger="click"></with-icon>

import { motion, swap, motionFor, PRESETS, EFFECTS } from '@withicons/motion'

motionFor('bell')   // → { intent: 'rings like a notification just arrived', loop: {…}, hover: {…}, … }

const ring = motion(document.querySelector('#bell'), 'bell', { trigger: 'hover' })
ring.play(); ring.pause(); ring.destroy()

motion(el, 'loader', { trigger: 'loop', preset: 'tick', duration: 1 })  // override the preset

const toggle = swap(button, { from: playSvg, to: pauseSvg, effect: 'flip', trigger: 'click' })
toggle.toggle(true)   // force "on"

Every icon’s own motion

Each icon ships a small spec saying how it should move, in plain words and in numbers: its loop, its hover, how its parts move (parts.A for a moving part, parts.S for a badge, each with an optional delay), how its decorations move (deco), good alternatives and the icons it naturally turns into. motionFor(name) returns it.

{
  "name": "bell",
  "intent": "swings from its hook while the clapper rings a beat behind",
  "loop": {
    "preset": "ring",
    "origin": [
      12,
      4.5
    ],
    "amount": 0.6,
    "duration": 2.4
  },
  "hover": {
    "preset": "ring",
    "origin": [
      12,
      4.5
    ],
    "amount": 1.2,
    "duration": 0.9
  },
  "parts": {
    "A": {
      "preset": "ring",
      "origin": [
        12,
        4.5
      ],
      "amount": 1.1,
      "duration": 2.4,
      "delay": 0.08
    }
  },
  "deco": "twinkle",
  "alt": [
    {
      "preset": "shake",
      "amount": 0.6
    },
    {
      "preset": "pop"
    }
  ],
  "swap": [
    {
      "to": "bell-off",
      "effect": "flip"
    },
    {
      "to": "bell-ring",
      "effect": "fade"
    },
    {
      "to": "bell@solid",
      "effect": "scale"
    }
  ]
}

Reduced motion