About
An animated open-padlock icon that plays a shackle-swing and body-bounce animation on hover, for unlocked/unsecured states in toolbars and menus.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Lock Open Icon to your project and fits it to your theme.
Code
How Lock Open Icon is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { LockOpenIcon } from "@/components/ui/lu-lock-open";
export default function LockOpenIconDemo() {
return (
<div className="flex items-center justify-center h-full w-full">
<LockOpenIcon size={48} />
</div>
);
}







