Percent Icon

An animated percent-sign icon that plays a slash-and-dots animation on hover or via an imperative ref, for use in finance, discount, or stats UI.

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

import { PercentIcon } from "@/components/ui/percent-icon";

export default function PercentIconDemo() {
  return (
    <div className="flex items-center justify-center w-full h-screen">
      <PercentIcon size={64} duration={1} />
    </div>
  );
}