---
title: "Cloud sync animated icon"
description: "Cloud sync animated icon (Feedback & status). Data goes up and comes back down. Light: the upload arrow rises away into the cloud and fades while a fresh one slides up into its place; 120 ms later the download arrow answers, dropping away and fading while a fresh one drops into place. Strong: the upload arrow dips before it launches, the cloud swells as it takes the upload, and each fresh arrow overshoots its place and settles. The cloud never moves in Light."
canonical: https://generativeicons.com/icons/cloud-sync/
---

# Cloud sync animated icon

Data goes up and comes back down. Light: the upload arrow rises away into the cloud and fades while a fresh one slides up into its place; 120 ms later the download arrow answers, dropping away and fading while a fresh one drops into place. Strong: the upload arrow dips before it launches, the cloud swells as it takes the upload, and each fresh arrow overshoots its place and settles. The cloud never moves in Light.

- Id: `cloud-sync`
- Category: Feedback & status
- Search terms: synchronize, synchronization, syncing, two-way sync, data sync, cloud storage, online storage, keep in sync, up to date
- One action, back to rest
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/cloud-sync.lottie (dotLottie, 3873 bytes, sha256 0135dbd533542b356d4978e9438fcf4139bd3d47ccd13c14623f35d98767e6fe)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add cloud-sync
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/cloud-sync.mjs';

export function CloudSyncIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/cloud-sync.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/cloud-sync/ · https://generativeicons.com/api/icons/cloud-sync