Gentleface › Layout & interface › picture-in-picture

picture-in-picture icon

Picture in picture: picture in picture, pip, mini player, floating window. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8C14.359 8 14.241 7.952 14.144 7.856C14.048 7.759 14 7.641 14 7.5L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L6.5 13C6.641 13 6.759 13.048 6.856 13.144C6.952 13.241 7 13.359 7 13.5C7 13.641 6.952 13.759 6.856 13.856C6.759 13.952 6.641 14 6.5 14L3 14C2.746 14 2.5 13.953 2.264 13.86ZM14.707 13.707C14.512 13.902 14.276 14 14 14L9 14C8.724 14 8.488 13.902 8.293 13.707C8.098 13.512 8 13.276 8 13L8 10C8 9.724 8.098 9.488 8.293 9.293C8.488 9.098 8.724 9 9 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 13C15 13.276 14.902 13.512 14.707 13.707ZM14 13L14 10L9 10L9 13L14 13Z"/></svg>

React

// Gentleface "picture-in-picture" (line-round), MIT. https://gentleface.com/icons/picture-in-picture
import type { SVGProps } from 'react';

export function PictureInPictureIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8C14.359 8 14.241 7.952 14.144 7.856C14.048 7.759 14 7.641 14 7.5L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L6.5 13C6.641 13 6.759 13.048 6.856 13.144C6.952 13.241 7 13.359 7 13.5C7 13.641 6.952 13.759 6.856 13.856C6.759 13.952 6.641 14 6.5 14L3 14C2.746 14 2.5 13.953 2.264 13.86ZM14.707 13.707C14.512 13.902 14.276 14 14 14L9 14C8.724 14 8.488 13.902 8.293 13.707C8.098 13.512 8 13.276 8 13L8 10C8 9.724 8.098 9.488 8.293 9.293C8.488 9.098 8.724 9 9 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 13C15 13.276 14.902 13.512 14.707 13.707ZM14 13L14 10L9 10L9 13L14 13Z" />
    </svg>
  );
}

Vue

Vue: see /icons/picture-in-picture.md

Svelte

Svelte: see /icons/picture-in-picture.md

HTML img

HTML img: see /icons/picture-in-picture.md

CSS

CSS: see /icons/picture-in-picture.md

Data URL

Data URL: see /icons/picture-in-picture.md

Sprite

Sprite: see /icons/picture-in-picture.md

SwiftUI

SwiftUI: see /icons/picture-in-picture.md

Compose

Compose: see /icons/picture-in-picture.md

Android XML

Android XML: see /icons/picture-in-picture.md

Flutter

Flutter: see /icons/picture-in-picture.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

picture in picture, pip, mini player, floating window, pop out, floating video

Alternatives

picture-in-picture-exit: leave picture-in-picture (exit-picture-in-picture)

Also fits

exit picture in picture: enter picture-in-picture or open the mini player (pip)

Tags

picture-in-picture, pip, video, overlay, floating, window, mini-player

Category

Layout & interface

Component name

PictureInPictureIcon

History

2026-10-14 added

Family 32

browser cards columns columns-gear kanban layout layout-dashboard layout-dashboard-gear layout-dashboard-pencil layout-dashboard-plus layout-dashboard-sparkle maximize

More layout & interface icons

apps checkbox checkbox-indeterminate checkbox-off cursor cursor-text cursor-user drag-drop grid grip-horizontal grip-vertical hand hand-grab hand-off hand-pointer input-search · all layout & interface icons

For agents

Metadata: /icons/picture-in-picture.json · Markdown: /icons/picture-in-picture.md · SVG: https://gentleface.com/svg/{style}/16/picture-in-picture.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/picture-in-picture.png

picture-in-picture icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp