Picture In Picture Exit icon

Use the Picture In Picture Exit icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { PictureInPictureExit24Regular, PictureInPictureExit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PictureInPictureExit24Regular aria-label="Picture In Picture Exit" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_picture_in_picture_exit_24_regular.svg" width="24" height="24" alt="Picture In Picture Exit">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11C11.1046 11 12 10.1046 12 9V4C12 2.89543 11.1046 2 10 2H3C1.89543 2 1 2.89543 1 4V9C1 9.75939 1.42323 10.4199 2.04668 10.7586C2.33007 10.9126 2.65482 11 3 11H10ZM18.75 6.5H13V5H18.75C20.5449 5 22 6.45508 22 8.25V17.75C22 19.5449 20.5449 21 18.75 21H5.25C3.45507 21 2 19.5449 2 17.75V11.8293C2.31278 11.9398 2.64936 12 3 12H3.5V17.75C3.5 18.7165 4.2835 19.5 5.25 19.5H18.75C19.7165 19.5 20.5 18.7165 20.5 17.75V8.25C20.5 7.2835 19.7165 6.5 18.75 6.5ZM15.9393 16H14.25C13.8358 16 13.5 16.3358 13.5 16.75C13.5 17.1642 13.8358 17.5 14.25 17.5H17.75C18.1642 17.5 18.5 17.1642 18.5 16.75V13.25C18.5 12.8358 18.1642 12.5 17.75 12.5C17.3358 12.5 17 12.8358 17 13.25V14.9393L14.2803 12.2197C13.9874 11.9268 13.5126 11.9268 13.2197 12.2197C12.9268 12.5126 12.9268 12.9874 13.2197 13.2803L15.9393 16Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/picture_in_picture_exit_24_regular.svg";

Details

Keywords

videoscreendeviceuimultiplemaximizescale