---
title: "Split view animated icon"
description: "Split view animated icon (Everyday controls). The window splits in two. Light: the divider vanishes and cuts down through the window from top to bottom, the grip pops in at its middle as the cut passes, overshoots and settles, and the left pane's tint fills in. Strong: the cut runs down faster and lands with a hit, and the grip drops down the divider from the top edge, lands on the middle with a hit and bounces twice before it settles. The frame never moves."
canonical: https://generativeicons.lottiefiles.com/icons/split-view/
---

# Split view animated icon

The window splits in two. Light: the divider vanishes and cuts down through the window from top to bottom, the grip pops in at its middle as the cut passes, overshoots and settles, and the left pane's tint fills in. Strong: the cut runs down faster and lands with a hit, and the grip drops down the divider from the top edge, lands on the middle with a hit and bounces twice before it settles. The frame never moves.

- Id: `split-view`
- Category: Everyday controls
- Search terms: split screen, side by side, two panes, dual pane, panes, multitasking, two columns, split window, tile windows, resize panes, dual view
- 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.lottiefiles.com/assets/split-view.lottie (dotLottie, 3610 bytes, sha256 f3b65a97e19580f85a21104e4fcca339bcefcabaf7581d94d83a517d91708d22)
- License: MIT

## Install

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

## React

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

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