Trash Icon

Component

About

An animated trash/delete icon whose lid flips open and the bin bounces on hover, for use on delete buttons and toolbars.

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

Code

How Trash Icon is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TrashIcon } from "@/components/ui/lu-trash";

export default function TrashIconDemo() {
  return (
    <div className="flex items-center justify-center w-full h-screen">
      <button
        type="button"
        aria-label="Delete"
        className="inline-flex items-center justify-center rounded-md border p-3 text-foreground hover:bg-muted transition-colors"
      >
        <TrashIcon size={28} />
      </button>
    </div>
  );
}