Pause Icon

An animated pause icon with two bars that squeeze on hover or via an imperative handle, built with Framer Motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pause Icon to your project and fits it to your theme.

import { PauseIcon } from "@/components/ui/hu-pause";

export default function PauseIconDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <PauseIcon size={32} />
    </div>
  );
}