Components
Animated State Icons
12 icons that continuously morph between two meaningful states — loading→checkmark, hamburger→X, play→pause, lock→unlock, copy→copied, bell→notification, heart fill/unfill, download→done, send→fly, toggle switch, eye→hidden, volume→mute. Each cycles on its own timer with spring physics and smooth transitions. Import individually and control the toggle programmatically.
import { Component } from "@/components/ui/animated-state-icons";
export default function Demo() {
return (
<div className="flex min-h-screen items-center justify-center bg-background">
<Component />
</div>
);
}