Tailwind CSS Animated Icon Components

Dev Design Library indexes 37 Tailwind CSS animated icon components from 12 open-source UI libraries, with the most coming from Amicro Micro Transitions, SpaceUI, UI Lab, Spectrum UI and Cojeev UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Animated icon components belong to the Media group.

• 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…
• 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.
• 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.
• 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
• 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.
• Face Id ScanAmicro Micro Transitions · ReactFace Id Scan loading animation.
• 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 Tailwind CSS animated icon components

• Amicro Micro Transitions
• SpaceUI
• UI Lab
• Spectrum UI
• Cojeev UI

Related categories

• Animated Icon Components
• React Animated Icon Components
• Tailwind CSS Media Components
• Tailwind CSS Image Components
• Tailwind CSS Icon Components
• Tailwind CSS Gallery Components
• Tailwind CSS Illustration Components
• Tailwind CSS Mockup Components
• Tailwind CSS Audio Visualizer Components
• Tailwind CSS Logo Components
• Tailwind CSS Scene 3D Components
• Tailwind CSS Video Player Components
• Tailwind CSS QR Code Components
• Tailwind CSS Icon Set Components
• Tailwind CSS Image Compare Components