---
title: "Cloud download animated icon"
description: "Cloud download animated icon (Files & transfers). The file comes down out of the cloud. Light: the arrow shoots down, its shaft stretching out of the cloud, stops dead past its mark, springs back and settles at full length, where it stays; the cloud lifts as it lets go and settles. Strong: the arrow draws up into the cloud first, then drops harder and settles in two beats, and the cloud recoils further and settles in two beats. The preview reset fades it back to the prepared arrow."
canonical: https://generativeicons.com/icons/cloud-download/
---

# Cloud download animated icon

The file comes down out of the cloud. Light: the arrow shoots down, its shaft stretching out of the cloud, stops dead past its mark, springs back and settles at full length, where it stays; the cloud lifts as it lets go and settles. Strong: the arrow draws up into the cloud first, then drops harder and settles in two beats, and the cloud recoils further and settles in two beats. The preview reset fades it back to the prepared arrow.

- Id: `cloud-download`
- Category: Files & transfers
- Search terms: download from cloud, pull from cloud, fetch from cloud, get from cloud, retrieve from cloud, online download, remote download, cloud fetch
- Two states: prepared to result, played forward and back
- 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-download.lottie (dotLottie, 5670 bytes, sha256 6b3426c8d9d5e42e49ff14a48f9c26196ee334aec10e96f85bb4eb2087e895b8)
- License: MIT

## Install

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

## React

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

export function CloudDownloadIcon() {
  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-download.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-download/ · https://generativeicons.com/api/icons/cloud-download