Diff Icon

An animated diff/compare icon that morphs a plus into a minus-style bar on hover, for use in buttons or toolbars representing comparison or change actions.

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

import { DiffIcon } from "@/components/ui/lu-diff";

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