Ninety-four animated icons with a heartbeat.
No Lottie bloat. No canvas overhead. Just hand-crafted SVG paths under 3KB. Each icon moves through three living stages: it sketches itself in on scroll, breathes in a quiet idle loop, and accelerates with surprise details the moment you hover.
Choreographed Kinetics
Not just static glyphs. Three living states.
Most icon libraries either sit frozen like dead stamps or loop erratically until they cause eye strain. Every icon here lives through three deliberate stages that adapt to viewport presence and user intent.
The Draw-in
Strokes sketch on scroll
When entering view, paths use SVG pathLength="1" and staggeredstroke-dashoffset delays. The icon feels hand-penned on the spot.
The Ambient Loop
Gentle, non-distracting pulse
three stars twinkle one after another Pauses automatically when scrolled off-screen, maintaining 0% idle CPU footprint.
Acceleration & Extras
Speed ramps smoothly + secret layers
the stars fill amber and tiny blue sparks pop around themLoops use playbackRate ramping instead of resetting.
- Design & AI
Agent
a task travels through a little bot that bobs and blinks. Hover: the sparkles grow and turn amber, the pulse turns amber.
- UI Controls
Arrow
nudges forward like it wants to go. Hover: it nudges faster, moves ahead and leaves motion lines behind. Good for buttons and links.
- Time & Data
Audio
equaliser bars bounce to a beat. Hover: the beat picks up, the middle bar turns amber and music notes float out.
- Developer Tools
Battery
the charge level keeps filling up. Hover: it charges faster and a lightning bolt appears.
- Communication
Bell
rings every few seconds. Hover: sound waves pulse with each ring and a badge pops up.
- UI Controls
Bookmark
the ribbon dips down and springs back now and then. Hover: it fills blue and an amber star appears on it.
- Design & AI
Brain
signals travel out along the folds and light up the nodes, one after another. Hover: the signals and nodes turn amber and idea sparks pop above.
- Developer Tools
Branch
a commit dot travels down the branch and merges into the main line. Hover: the branch turns blue, its head turns amber and a ring pulses at the merge.
- Developer Tools
Bug
its legs scuttle and it creeps forward, then back. Hover: a target ring circles it, amber spots appear and the antennae spread.
- Everyday
Bulb
the rays pulse one after another and the glass glows softly. Hover: the bulb lights up amber and the rays reach further.
- Time & Data
Calendar
a highlight hops from day to day. Hover: the header fills in and an event dot pops up.
- Time & Data
Camera
the shutter snaps shut and the flash fires every few seconds. Hover: the lens tints blue and flash rays burst out.
- Commerce
Card
a shine sweeps across the card and the chip glints. Hover: the card tilts and tap-to-pay waves pulse.
- Commerce
Cart
an item drops in and the cart bounces. Hover: the cart leans forward with speed lines behind it.
- Time & Data
Chart
bars grow in and keep rising and settling. Hover: an amber trend line draws across with a dot at the peak.
- Communication
Chat
typing dots bounce inside a speech bubble. Hover: the dots turn blue and a reply badge pops up.
- UI Controls
Check
a ring pulses out from the done mark. Hover: the circle fills blue and confetti pops out from it.
- Time & Data
Clock
both hands keep turning. Hover: time runs faster, the hour marks appear and the minute hand turns blue.
- Developer Tools
Cloud
drifts slowly from side to side. Hover: it fills with a blue tint, the puff line turns amber and wind lines stream past below.
- Design & AI
Code
brackets breathe while lines of code type themselves. Hover: brackets spread, the slash tilts, the middle line turns amber.
- Everyday
Coffee
steam curls up from the cup. Hover: the steam picks up, the coffee fills in amber and a heart rises from it.
- Commerce
Coin
the coin hops up, flips twice and lands. Hover: its face turns amber and sparkles twinkle around it.
- Time & Data
Compass
the needle swings and settles back on north. Hover: the needle turns amber and a ring of dots circles the dial.
- Design & AI
Crop
the two crop corners breathe in and out around the frame. Hover: a blue thirds grid appears inside and the corners turn amber.
- Design & AI
Cursor
a mouse pointer drifts in and clicks, sending a ripple out from its tip. Hover: the pointer fills blue and amber click rays pop with each click.
- Developer Tools
Database
the rows light up one after another as data is read. Hover: the lights turn amber and rings float up off the top.
- Developer Tools
Download
an arrow drops into the tray, which dips as it lands. Hover: a progress bar fills inside the tray.
- Everyday
Drop
the drop dips and sends a ripple across the water. Hover: the drop fills blue and splashes jump out.
- UI Controls
Eye
looks left and right and blinks. Hover: the pupil widens, the iris turns blue and a glint shows.
- Developer Tools
Filter
drops fall into the funnel and run down to the spout. Hover: the drops turn amber, the funnel tints blue and a stream runs out the bottom.
- UI Controls
Flag
a soft wave keeps running along the cloth. Hover: the cloth turns blue and amber wind lines blow past.
- Everyday
Flame
the flame flickers and dances. Hover: the core glows amber and sparks float up.
- UI Controls
Folder
the front flap opens and a page peeks out. Hover: the page rises higher and a second, blue page joins it.
- Developer Tools
Gear
turns slowly. Hover: it speeds up and a small gear joins in, turning the other way.
- Commerce
Gift
the lid hops up and the box squashes as it lands. Hover: the lid lifts, the ribbon turns amber and sparks fly out.
- Time & Data
Globe
land lines drift across the globe as it turns. Hover: it spins faster and an orbit ring wraps around it.
- UI Controls
Grid
the four app tiles pop one after another. Hover: the tiles spread apart and fill blue, with one in amber.
- UI Controls
Heart
beats with a double pulse. Hover: it fills with colour and small hearts float up.
- UI Controls
Help
the question mark tilts its head now and then. Hover: the bubble fills blue and amber lines spark from its corner.
- UI Controls
Home
smoke puffs from the chimney. Hover: the window lights up amber and the door swings open.
- Time & Data
Hourglass
the sand runs down, then the glass flips over. Hover: the sand turns amber and turn arrows show at the sides.
- Time & Data
Image
the sun rises and sets behind the hills. Hover: the sun turns amber, the frame zooms in a little and a bird flies past.
- Communication
Inbox
a letter drops into the tray and the tray dips as it lands. Hover: the letter turns amber and a new-mail badge pops up.
- UI Controls
Info
the dot of the i bounces and the stem gives a little on landing. Hover: the circle fills blue and a ring of amber dots turns around it.
- Developer Tools
Key
turns over in the lock and back again. Hover: the head fills amber, the teeth turn blue and sparks flash at the tip as it turns.
- UI Controls
Layers
the stack lifts apart and settles back. Hover: the layers spread wider and the top one fills blue.
- Design & AI
Layout
a cursor clicks between two parts of a screen. Hover: selection handles appear on the panel.
- Everyday
Leaf
the leaf sways gently on its stem. Hover: wind streaks blow past and the leaf turns amber.
- Communication
Like
the thumb pumps up now and then. Hover: the hand fills blue and amber sparks burst around the thumb.
- Communication
Link
the two chain links pull apart and click back together with a small flash. Hover: the links turn blue and amber sparks fly from the join.
- Developer Tools
Lock
the shackle clicks up and down as if being tested. Hover: it lifts open and the keyhole glows amber.
- Design & AI
Magnet
pulls a small dot up toward its poles, then lets it drop back. Hover: the poles turn amber and blue and two more filings get pulled in.
- Communication
Mail
a letter peeks out of the envelope and slips back. Hover: it rises higher and a new-mail dot pops up.
- Communication
Megaphone
it kicks back as sound arcs travel out of the horn. Hover: it tilts up, the arcs turn amber and a third arc joins in.
- UI Controls
Menu
the three lines breathe at different lengths. Hover: they line up in a stagger and the middle one turns blue.
- Communication
Mic
a level meter inside the mic bounces like a voice. Hover: the level turns amber and sound waves pulse out on both sides.
- Time & Data
Mobile
notifications slide onto the phone screen. Hover: the phone buzzes with lines on both sides.
- Everyday
Moon
the crescent rocks gently while stars twinkle. Hover: the moon fills in and more stars come out.
- Design & AI
Palette
the paint dots pop one after another. Hover: each dot fills with a colour and the brush dips in.
- Design & AI
Pen
a bezier curve keeps redrawing between two anchor points. Hover: the control handles swing out and the curve turns blue.
- Communication
Phone
the handset shakes with a ring-ring and the call waves light up. Hover: it tilts, the waves turn amber and buzz marks appear.
- Time & Data
Pin
the map pin hops and its shadow shrinks under it. Hover: rings ripple out on the ground and the centre turns amber.
- Time & Data
Play
a ring pulses out of the button and the triangle nudges forward. Hover: the triangle fills amber and a progress arc runs around the edge.
- UI Controls
Plus
the cross turns a quarter turn every few seconds. Hover: the circle fills blue and amber dots pop out around it.
- Developer Tools
Puzzle
the piece lifts out of its slot and clicks back in. Hover: the piece fills blue and amber sparks flash when it clicks.
- Everyday
Rain
rain streaks fall from the cloud. Hover: the rain gets heavier, turns blue and the cloud darkens.
- Commerce
Receipt
the slip tears off and a new one prints out of the slot. Hover: the total turns amber and a paid check pops up.
- Developer Tools
Refresh
the arrows sweep round, pause, and sweep again. Hover: the sync speeds up and a blue dot sits in the middle.
- Everyday
Rocket
hovers with a flickering flame. Hover: the flame grows, the window lights up and speed lines rush past.
- Design & AI
Scissors
the blades snip shut twice, then rest open. Hover: a blue cut line feeds into the blades and the pivot turns amber.
- UI Controls
Search
the magnifier scans in a small loop. Hover: it zooms in, a ring pings inside the lens and the glint turns amber.
- Communication
Send
the paper plane floats on the air. Hover: it pushes forward and a dashed trail streams behind it.
- Developer Tools
Server
the status lights blink from the top rack to the bottom. Hover: the lights turn amber and busy lights flicker next to them.
- Communication
Share
a pulse leaves the first dot and runs down both lines to the others. Hover: the dots fill blue, the pulse turns amber and rings ripple out.
- Developer Tools
Shield
the check mark redraws itself now and then. Hover: the shield tints and sends out a protective pulse.
- UI Controls
Sliders
the three knobs slide up and down out of step. Hover: the tracks fill blue up to each knob and the knobs turn amber.
- Design & AI
Sparkles
three stars twinkle one after another. Hover: the stars fill amber and tiny blue sparks pop around them.
- UI Controls
Star
sways and breathes. Hover: it fills amber and sparks burst out from the corners.
- Commerce
Store
the shop door swings open and shut for a customer. Hover: the awning stripes turn amber and the window lights up.
- Everyday
Sun
the rays turn slowly around a breathing core. Hover: the core fills amber and the rays stretch out.
- Commerce
Tag
a price tag sways on its string. Hover: the price turns amber, a sale line strikes through and sparkles appear.
- Design & AI
Target
an arrow flies back in and thunks into the bullseye, then wobbles. Hover: the bullseye fills amber and a blue ring pulses out on each hit.
- Design & AI
Terminal
a command types itself after the prompt, then clears. Hover: the prompt turns blue and an amber output line prints below.
- UI Controls
Toggle
the knob slides off and back on every few seconds. Hover: the track turns blue when it's on and the on/off marks show.
- UI Controls
Trash
the lid pops open now and then. Hover: it opens more often and a crumpled paper drops in.
- Everyday
Trophy
a glint of light sweeps across the cup. Hover: the cup turns gold, a star appears on it and sparkles pop around.
- Commerce
Truck
the wheels turn, the road scrolls by and the truck bumps along. Hover: it leans forward with speed lines and the stripe turns amber.
- Design & AI
Type
a text caret blinks next to a big letter T on its baseline. Hover: a blue selection box with handles wraps the T and the caret turns amber.
- Developer Tools
Upload
an arrow keeps lifting into the cloud. Hover: the arrow turns blue and small bits rise alongside it.
- UI Controls
User
the head gives a small nod and an online dot pings. Hover: a plus badge spins in, ready to add someone.
- Communication
Video
the film reels turn and the record light blinks. Hover: the light turns amber with a pulsing ring and the lens lights up.
- Commerce
Wallet
bills peek out of the top and tuck back in. Hover: the bills turn amber and a coin pops up.
- Design & AI
Wand
waves gently while sparkles twinkle at its tip. Hover: the sparkles turn amber and extra ones burst out.
- Developer Tools
Wifi
the signal arcs light up from the dot outward. Hover: the signal turns blue and the dot pings.
Quick Start & Architecture
Drop into any project in two minutes.
No npm dependencies to install. No WebAssembly. No 500KB Lottie bundles. Pure, standards-compliant SVG and modern Web Animations API that work in every major browser.
Plain HTML / Static Sites
Ideal for Astro, Hugo, 11ty, Webflow, Shopify, WordPress, or vanilla HTML pages.
Copy the core CSS & JS
Grab animated-icons.css and animated-icons.js from the repo or public directory.
Paste SVG inline
Add data-ani-trigger on the parent card or button so the whole element triggers the hover acceleration.
Call initAnimatedIcons()
Initializes IntersectionObservers for off-screen pausing and hover rate easing.
<!-- 1. Include core styles in <head> -->
<link rel="stylesheet" href="/animated-icons/core/animated-icons.css" />
<!-- 2. Paste the SVG inline inside any clickable card or button -->
<a class="card" href="/contact" data-ani-trigger>
<!-- Paste your chosen icon SVG here (e.g. mail.svg) -->
<svg class="ani" data-icon="mail" viewBox="0 0 64 64">
<!-- ...paths and scoped <style>... -->
</svg>
<span>Get in touch</span>
</a>
<!-- 3. Start the runtime script -->
<script type="module">
import { initAnimatedIcons } from "/animated-icons/core/animated-icons.js";
initAnimatedIcons();
</script>React, Next.js & Modern Frameworks
Works seamlessly with Next.js App Router, Vite, Remix, SvelteKit, and Vue.
Import CSS once
Import animated-icons.css in your root layout or entry CSS file.
Mount the runtime hook
A one-line useEffect(() => initAnimatedIcons(), []) handles all icons on the page.
Drop in clean components
Click “Copy JSX” on any icon in this library to get a typed, copy-paste-ready React component.
// 1. In your global CSS (or Root Layout), import the shared stylesheet:
import "@/components/v2/icons/animated-icons.css";
// 2. Start the runtime observer once on mount:
"use client";
import { useEffect } from "react";
import { initAnimatedIcons } from "@/components/v2/icons/runtime";
export function AnimatedIconsProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
const cleanup = initAnimatedIcons();
return cleanup;
}, []);
return <>{children}</>;
}
// 3. Paste or import the icon component anywhere in your app:
<button type="button" data-ani-trigger className="btn">
<SparklesIcon />
<span>Launch Agent</span>
</button>Theme Variables & Zero-Specificity Tokens
Override these CSS variables on any parent container or directly on .ani to adapt the palette to your brand.
| Variable | Default | Purpose & Behavior |
|---|---|---|
| --ani-accent | #2b3bff | Primary highlight ink used for pulses, signals, and active node glows. |
| --ani-accent-2 | #ffb547 | Secondary warm amber accent that springs into view during the hover stage. |
| --ani-bg | #f3efe7 | Background surface color. Used by .ani-knock shapes to mask lines behind them. |
| --ani-start | 1100ms | Delay before idle loops begin, ensuring the intro draw-in finishes cleanly first. |
| --ani-step | 110ms | Stagger delay between sequential drawing strokes (governed by --d). |
| data-ani-rate | 2.4 | Attribute on the SVG defining hover acceleration multiplier (e.g. data-ani-rate="3"). |
Built for software that refuses to be boring.
Every stroke in this library was drawn, measured, and timed to make interfaces feel alive. Need custom icons, bespoke product design, or tailored software that fits your business?