Pencil Icon

An animated pencil icon that wiggles like it's writing when hovered, for use in edit buttons and toolbars.

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

import { PencilIcon } from "@/components/ui/lu-pencil";

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