---
title: "Detach file animated icon"
description: "Detach file animated icon (Files & transfers). The clip is pulled off the sheet. Light: the clip tugs and the sheet comes up with it, stretching from the top; then the clip snaps free, springs up past its mark and settles above the sheet, where it stays, while the sheet drops back, overshoots and settles. Strong: the clip sticks and tugs twice before it snaps free, springs higher and settles in two beats, and the sheet drops back harder. The preview reset fades it back to the prepared clip."
canonical: https://generativeicons.com/icons/detach-file/
---

# Detach file animated icon

The clip is pulled off the sheet. Light: the clip tugs and the sheet comes up with it, stretching from the top; then the clip snaps free, springs up past its mark and settles above the sheet, where it stays, while the sheet drops back, overshoots and settles. Strong: the clip sticks and tugs twice before it snaps free, springs higher and settles in two beats, and the sheet drops back harder. The preview reset fades it back to the prepared clip.

- Id: `detach-file`
- Category: Files & transfers
- Search terms: remove attachment, delete attachment, unattach, unclip, remove paperclip, clear attachment, drop attachment, take off clip
- 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/detach-file.lottie (dotLottie, 6239 bytes, sha256 50ddc6bd5222dd11fe214b92f913231d7a1ee67fdcc6dbe2b525ca3aebeda2a9)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add detach-file
```

## React

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

export function DetachFileIcon() {
  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/detach-file.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/detach-file/ · https://generativeicons.com/api/icons/detach-file