Credit Card Icon

An animated credit card SVG icon that scales, tilts, and draws its stripe and dashes on hover or via an imperative ref, for use in buttons, nav items, or payment UI.

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

import { CreditCardIcon } from "@/components/ui/hu-credit-card";

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