---
title: "Split file animated icon"
description: "Split file animated icon (Files & transfers). One file is split into two. Light: the sheet parts along its seam and the two halves pull apart, each growing into a whole sheet of its own; the left one gains its folded corner as it lands, and both rebound once and settle. Strong: the halves crack open from the top first, then snap apart harder and settle in two beats. The preview reset slides the two sheets back together into the single sheet."
canonical: https://generativeicons.com/icons/split-file/
---

# Split file animated icon

One file is split into two. Light: the sheet parts along its seam and the two halves pull apart, each growing into a whole sheet of its own; the left one gains its folded corner as it lands, and both rebound once and settle. Strong: the halves crack open from the top first, then snap apart harder and settle in two beats. The preview reset slides the two sheets back together into the single sheet.

- Id: `split-file`
- Category: Files & transfers
- Search terms: split pdf, split document, separate pages, extract pages, divide document, separate file, break apart, unmerge, divide in two
- 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/split-file.lottie (dotLottie, 7801 bytes, sha256 cf62341cfee41f498bda2fe7130926508faaccd8de9e74eb87a2c6e0482f401a)
- License: MIT

## Install

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

## React

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

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