Cloud Sync Icon

An animated cloud icon with syncing arrows that rotate on hover, used to indicate data syncing or backup status.

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

import { CloudSyncIcon } from "@/components/ui/lu-cloud-sync";

export default function CloudSyncIconDemo() {
  return (
    <div className="flex items-center justify-center w-full h-screen">
      <CloudSyncIcon size={48} />
    </div>
  );
}