Projection Screen icon

Use the Projection Screen 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 { ProjectionScreen24Regular, ProjectionScreen24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ProjectionScreen24Regular aria-label="Projection Screen" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_projection_screen_24_regular.svg" width="24" height="24" alt="Projection Screen">

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="M3.5 3C2.67157 3 2 3.67157 2 4.5C2 5.15311 2.4174 5.70873 3 5.91465V13.25C3 15.3211 4.67893 17 6.75 17H11.25V19.5H7.75C7.33579 19.5 7 19.8358 7 20.25C7 20.6642 7.33579 21 7.75 21H16.25C16.6642 21 17 20.6642 17 20.25C17 19.8358 16.6642 19.5 16.25 19.5H12.75V17H17.25C19.3211 17 21 15.3211 21 13.25V5.91465C21.5826 5.70873 22 5.15311 22 4.5C22 3.67157 21.3284 3 20.5 3H3.5ZM4.5 6H19.5V13.25C19.5 14.4926 18.4926 15.5 17.25 15.5H6.75C5.50736 15.5 4.5 14.4926 4.5 13.25V6Z" 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/projection_screen_24_regular.svg";

Details

Keywords

presentpresentationviewslidelectureanalog