---
title: "Upload failed animated icon"
description: "Upload failed animated icon (Files & transfers). An upload into the cloud fails and falls back. Light: an arrowhead grows on the alert's stem, the arrow sinks to load and launches up into the cloud, hits its ceiling and stops dead while the cloud takes the knock; then it drops back, the arrowhead fades, and the stem lands on its spot as an exclamation mark again, knocking the dot down, which settles. Strong: two tries: the first falls short and drops back, the second launches harder, hits the ceiling, and the cloud shakes its refusal side to side while the arrow drops and the exclamation lands in two beats."
canonical: https://generativeicons.com/icons/upload-failed/
---

# Upload failed animated icon

An upload into the cloud fails and falls back. Light: an arrowhead grows on the alert's stem, the arrow sinks to load and launches up into the cloud, hits its ceiling and stops dead while the cloud takes the knock; then it drops back, the arrowhead fades, and the stem lands on its spot as an exclamation mark again, knocking the dot down, which settles. Strong: two tries: the first falls short and drops back, the second launches harder, hits the ceiling, and the cloud shakes its refusal side to side while the arrow drops and the exclamation lands in two beats.

- Id: `upload-failed`
- Category: Files & transfers
- Search terms: upload error, could not upload, retry upload, upload problem, cloud error, save failed, failed to upload, upload unsuccessful
- 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/upload-failed.lottie (dotLottie, 3768 bytes, sha256 f330fefd830e5df8008ae2a89fc8a93fe0976f6fb5c12b89c09850adc56fc121)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add upload-failed
```

## React

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

export function UploadFailedIcon() {
  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/upload-failed.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/upload-failed/ · https://generativeicons.com/api/icons/upload-failed