Arrow Left Right Icon

An animated arrow-left-right icon that nudges its two arrowheads apart on hover, for swap, exchange, or transfer actions in toolbars and buttons.

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

import { ArrowLeftRightIcon } from "@/components/ui/lu-arrow-left-right";

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