01 / Animated icon library for React
Make every
icon move.
542 open-source SVG icons that animate at the path level, driven by hover, focus, or your own code. One motion system, two libraries.
Specimen001/006bell-ringpendulum swing
02 / The set
542 icons. All animated at the path level.
The set542 specimenslucide + hugein motion
bell-ring
heart
rocket
compass
sparkles
sun-medium
cloud-rain
map
download
search
star
alarm-clock
rainbow
zap
bell-ring
heart
rocket
compass
sparkles
sun-medium
cloud-rain
map
download
search
star
alarm-clock
rainbow
zap
03 / Playground
Tune it. Copy it.
Previewhouse112px1.0s
#f45b48
112px
1.0s
04 / Two systems
Two libraries. One motion system.
Lucide509 iconslucideone motion system
Huge33 iconshugeone motion system
05 / Install
One import. The whole system.
Every icon animates at the path level and ships in one tree-shakeable package. See what makes it move, then grab it in a line.
Specimenalarm-clockpath-animatedmotion/react
$ npm i @animateicons/reactimport { BellRingIcon } from "@animateicons/react/lucide"
export function Bell() {
return <BellRingIcon size={28} />
}What you get
- Animated at the path level, never a flat transform
- Tree-shakeable, sideEffects false
- RSC-ready with typed, imperative handles
- Reduced-motion aware out of the box
542 icons · 509 lucide · 33 huge