Animated Icon Components

Dev Design Library indexes 62 Animated icon components from 25 open-source UI libraries, with the most coming from Amicro Micro Transitions, Shadcn Space, React Bits, Kinetics and SpaceUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the icon components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. 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…
• Icon CloudMagic UI · ReactAn interactive 3D tag cloud component
• 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
• App Icon LoadAmicro Micro Transitions · ReactApp Icon Load loading animation.
• Text Icon CursorCursify · React
• 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
• Autocomplete-06 - With IconShadcn Space · ReactAutocomplete for selecting a project type with unique icons, selected icon shown in input, and spring-animated list…
• Battery ChargeKinetics · HTML/CSSFill climbs as the bolt pulses
• Icon CloudAnimations (Svelte) · SvelteAn interactive 3D tag cloud component that displays icons or images in a sphere formation with smooth rotation and…
• 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.
• Agent GlyphHalaska UI · React
• AnimojiSpaceUI · ReactRenders every Unicode emoji in a string as an animated image sized to the surrounding text.
• Arrow RightSora UI · ReactAnimated right arrow that nudges forward and redraws its stroke on hover using a pure CSS stroke-dash animation.
• 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.
• Glass IconsReact Bits · ReactIcon set styled with frosted glass blur.
• Apple Icon MorphAmicro Micro Transitions · ReactApple Icon Morph loading animation.
• Notification BellSpectrum UI · ReactA bell icon button with a ring-shake swing, springy unread badge with rolling odometer count, and a pinging dot mode
• Feature 02 - Three Columns Feature with IconsShadcn Space · ReactA clean three card feature grid with icons and concise copy, built for product or SaaS pages to communicate core…
• 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.
• ChevronsSora UI · ReactAnimated double up-chevron that cross-fades between the two carets on trigger.
• 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.
• Skeleton 03 - List with IconsShadcn Space · ReactAnimated list skeleton with a title bar, icon+text rows, and badge placeholders — staggered fade-up on scroll into view.
• 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.
• VolumeSora UI · ReactAnimated volume icon that morphs smoothly between sound waves and a mute slash with speaker shake effect.
• 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.
• Spinning Text-02 - With IconShadcn Space · ReactSpinning Text component with animated icon
• Haptic RingAmicro Micro Transitions · ReactHaptic Ring loading animation.
• Tabs-07 - Icon & DescriptionShadcn Space · ReactTabs with icon and description component
• 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

• Amicro Micro Transitions
• Shadcn Space
• React Bits
• Kinetics
• SpaceUI

Related categories

• Icon Components
• React Icon Components
• Tailwind CSS Icon Components
• Svelte Icon Components
• shadcn/ui Icon Components
• Animated Media Components
• Animated Gallery Components
• Animated Image Components
• Animated Illustration Components
• Animated Scene 3D Components
• Animated Audio Visualizer Components
• Animated Logo Components
• Animated Video Player Components
• Animated Mockup Components
• Animated Icon Set Components
• Animated Image Zoom Components
• Animated Audio Player Components