Arrow Up Down Icon

An animated up/down arrow icon that plays a subtle bounce animation on hover or via an imperative ref, useful for sort toggles and expandable list indicators.

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

import { ArrowUpDownIcon } from "@/components/ui/arrow-up-down-icon";

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