Dual Screen Header icon

Use the Dual Screen Header 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 { DualScreenHeader24Regular, DualScreenHeader24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DualScreenHeader24Regular aria-label="Dual Screen Header" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_header_24_regular.svg" width="24" height="24" alt="Dual Screen Header">

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="M12.7476 4.00195L12.747 4.00395L20.2451 4.00439C21.2116 4.00439 21.9951 4.78789 21.9951 5.75439V18.2495C21.9951 19.216 21.2116 19.9995 20.2451 19.9995H11.2476L11.247 19.997L3.75 19.9971C2.7835 19.9971 2 19.2136 2 18.2471V5.75195C2 4.78545 2.7835 4.00195 3.75 4.00195H12.7476ZM20.495 6.99995H12.747L12.7476 18.4995H20.2451C20.3832 18.4995 20.4951 18.3876 20.4951 18.2495L20.495 6.99995ZM11.247 6.99995H3.5V18.2471C3.5 18.3851 3.61193 18.4971 3.75 18.4971H11.2476L11.247 6.99995Z" 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/dual_screen_header_24_regular.svg";

Details

Keywords

duoopendoublescreenfoldable