Square Pen Icon

An animated square-pen (edit) icon that wiggles its pen tip on hover, for use in toolbars and edit buttons.

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

import { SquarePenIcon } from "@/components/ui/lu-square-pen";

export default function SquarePenIconDemo() {
  return (
    <div className="flex items-center justify-center w-full h-[200px]">
      <SquarePenIcon size={48} />
    </div>
  );
}