Dev Design LibraryOpen the library

Animated Icon Components

Dev Design Library indexes 48 animated icon components from 19 open-source UI libraries, with the most coming from Amicro Micro Transitions, React Bits, Kinetics, SpaceUI and UI Lab. Each one links to its page with the source code, a live preview where available, the library license and the install command. Animated icon components belong to the Media group.

Bell ToggleReact Bits · ReactPill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and…
SwapArk UI · ReactAnimate between two visual states with smooth transitions.
Icon Swaptransitions.dev · HTML/CSS
Morphiconsmorphicons · ReactUniversal morphing for stroke-based icons with spring physics — zero runtime dependencies
Apple Icon MorphAmicro Micro Transitions · ReactApple Icon Morph loading animation.
Folder ComponentRare UI · ReactAn animated folder whose cards fan out on hover and lift open on click, with a 3D-tilted flap. Supports color and size…
Face RatingSpectrum UI · ReactA five-level feedback rating where one large SVG face morphs its mouth, eyes and color between moods as you hover and…
Morphing IconUser Interface Wiki · React
Battery ChargeKinetics · HTML/CSSFill climbs as the bolt pulses
Rocket LaunchNexvyn UI · ReactA hand-drawn rocket illustration that ignites its engines and lifts off the pad on demand, with a reset back to rest.
Logo Burst23rd.dev · ReactHair-line tentacles explode from the center, then keep a slow inhale. Follows light and dark.
IconWatermelon UI · React
Bookmark ButtonUI Lab · ReactFills from the bottom up and lands with a small squash.
Animated iconCojeev UI · ReactReplayable micro-interactions for the full Cojeev icon library, with semantic motion families and optional visual…
Dynamic IconFLX UI · ReactA dynamic icon component with a name and size.
AnimojiSpaceUI · ReactRenders every Unicode emoji in a string as an animated image sized to the surrounding text.
Coin MorphZAYX · React NativeReact Native crypto coin list (CoinMorphList) with an animated counter and a coin detail modal.
Pixel SnailFibo · ReactA one-colour pixel snail that crawls on a loop while something loads.
Swapark-cn · ReactA shadcn-style swap component built with Ark UI primitives.
Peek RatingReact Bits · ReactStar rating you can try before you commit: sweeping the row lifts a trailing wave of stars up to the pointer while a…
Button CameraAmicro Micro Transitions · ReactCamera button whose video icon morphs into the video-off icon.
Notification BellSpectrum UI · ReactA bell icon button with a ring-shake swing, springy unread badge with rolling odometer count, and a pinging dot mode
Bookmark ToggleKinetics · HTML/CSSRibbon fills and drops in on save
Icon MorphUI Lab · ReactIcons reshape themselves between states instead of swapping.
Icon libraryCojeev UI · React1,722 icon names with Cojeev micro-interactions, outline, duotone and organic treatments, built on Lucide geometry.
Morph IconSpaceUI · ReactTransforms one vector icon smoothly into another with fluid shape morphing animations when state changes.
Status MarkReact Bits · ReactA 20px status glyph for agent task lists that morphs in place from a dashed idle ring to a spinning or real-progress…
Face Id ScanAmicro Micro Transitions · ReactFace Id Scan loading animation.
Icon Morph SwapKinetics · HTML/CSSOutgoing icon blurs and rotates out, incoming settles in
Notification BellUI Lab · ReactRings when something new arrives, and the badge rolls up with each one.
TextmojiSpaceUI · ReactRenders every Unicode emoji in a string as an image sized to the surrounding text.
Haptic RingAmicro Micro Transitions · ReactHaptic Ring loading animation.
HeartbeatAmicro Micro Transitions · ReactHeartbeat loading animation.
Pumping HeartAmicro Micro Transitions · ReactPumping Heart loading animation.
Dither BookAmicro Micro Transitions · React
Button DirectoryAmicro Micro Transitions · React
Button EditAmicro Micro Transitions · React
Button LockAmicro Micro Transitions · React
Button MicrophoneAmicro Micro Transitions · React
Button NetworkAmicro Micro Transitions · React
Button PowerAmicro Micro Transitions · React
Button PreviewAmicro Micro Transitions · React
Button ReloadAmicro Micro Transitions · React
Button SearchAmicro Micro Transitions · React
Button SettingsAmicro Micro Transitions · React
Button VisibilityAmicro Micro Transitions · React
Button VolumeAmicro Micro Transitions · React
Download IconsAmicro Micro Transitions · React

Libraries with animated icon components

Related categories