---
title: "Picture-in-picture animated icon"
description: "Picture-in-picture animated icon (Media & playback). The video pops out and docks. Light: the small window lifts off the screen (it grows), glides down to its dock at the lower right, passes it a little and sets down there with a hit, shrinking under its own weight, and settles at v1's docked position. Strong: the window first draws back toward the corner it leaves and dips, then lifts higher, travels faster, overshoots the dock and sets down harder with two settling beats. The frame never moves; the window stays docked. The reverse plays the same pick-up and set-down back to the expanded position."
canonical: https://generativeicons.com/icons/picture-in-picture/
---

# Picture-in-picture animated icon

The video pops out and docks. Light: the small window lifts off the screen (it grows), glides down to its dock at the lower right, passes it a little and sets down there with a hit, shrinking under its own weight, and settles at v1's docked position. Strong: the window first draws back toward the corner it leaves and dips, then lifts higher, travels faster, overshoots the dock and sets down harder with two settling beats. The frame never moves; the window stays docked. The reverse plays the same pick-up and set-down back to the expanded position.

- Id: `picture-in-picture`
- Category: Media & playback
- Search terms: pip, mini player, miniplayer, floating video, floating window, pop out, pop-out video, video overlay, minimize video, docked player
- Two states: expanded to docked, 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/picture-in-picture.lottie (dotLottie, 7392 bytes, sha256 c2744c09f7b291fd4a52a130ae6a1641f3021d67ec405227ebc4cb880abb5816)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add picture-in-picture
```

## React

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

export function PictureInPictureIcon() {
  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/picture-in-picture.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/picture-in-picture/ · https://generativeicons.com/api/icons/picture-in-picture