Dual Screen Group icon

Use the Dual Screen Group 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 { DualScreenGroup24Regular, DualScreenGroup24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.7554 4.00195L12.7548 4.00395L20.253 4.00439C21.2195 4.00439 22.003 4.78789 22.003 5.75439V18.2495C22.003 19.216 21.2195 19.9995 20.253 19.9995H11.2554L11.2548 19.997L3.75781 19.9971C2.79131 19.9971 2.00781 19.2136 2.00781 18.2471V5.75195C2.00781 4.78545 2.79131 4.00195 3.75781 4.00195H12.7554ZM20.253 5.50439H12.7554V18.4995H20.253C20.391 18.4995 20.503 18.3876 20.503 18.2495V5.75439C20.503 5.61632 20.391 5.50439 20.253 5.50439ZM11.2554 5.50195H3.75781C3.61974 5.50195 3.50781 5.61388 3.50781 5.75195V18.2471C3.50781 18.3851 3.61974 18.4971 3.75781 18.4971H11.2554V5.50195Z" 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_group_24_regular.svg";

Details

Keywords

duoopendoublescreenfoldable