Dual Screen Desktop icon

Use the Dual Screen Desktop 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 { DualScreenDesktop24Regular, DualScreenDesktop24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.25 9.99985C13.1682 9.99985 13.9212 10.707 13.9942 11.6063L14 11.7498V20.25C14 21.1682 13.2929 21.9212 12.3935 21.9942L12.25 22H3.75C2.83183 22 2.07881 21.2929 2.0058 20.3935L2 20.25V11.7498C2 10.8317 2.70711 10.0787 3.60647 10.0056L3.75 9.99985H12.25ZM7.5 11.499L3.75 11.4998C3.63165 11.4998 3.53251 11.5821 3.5066 11.6925L3.5 11.7498V20.25C3.5 20.3683 3.58223 20.4675 3.69268 20.4934L3.75 20.5L7.5 20.499V11.499ZM12.25 11.4998L8.5 11.499V20.499L12.25 20.5C12.3683 20.5 12.4675 20.4178 12.4934 20.3073L12.5 20.25V11.7498C12.5 11.6315 12.4178 11.5324 12.3073 11.5064L12.25 11.4998ZM10.625 18C11.0392 18 11.375 18.3358 11.375 18.75C11.375 19.1297 11.0928 19.4435 10.7268 19.4932L10.625 19.5H10.125C9.71079 19.5 9.375 19.1642 9.375 18.75C9.375 18.3703 9.65715 18.0565 10.0232 18.0068L10.125 18H10.625ZM5.875 18C6.28921 18 6.625 18.3358 6.625 18.75C6.625 19.1297 6.34285 19.4435 5.97677 19.4932L5.875 19.5H5.375C4.96079 19.5 4.625 19.1642 4.625 18.75C4.625 18.3703 4.90715 18.0565 5.27323 18.0068L5.375 18H5.875ZM19.75 2C20.9409 2 21.9156 2.92516 21.9948 4.09595L22 4.25V13.25C22 14.4409 21.0748 15.4156 19.904 15.4948L19.75 15.5H17.004V17.5H18.25C18.6642 17.5 19 17.8358 19 18.25C19 18.6297 18.7178 18.9435 18.3518 18.9932L18.25 19H15V17.5H15.504V15.5H15V14H19.75C20.1297 14 20.4435 13.7178 20.4932 13.3518L20.5 13.25V4.25C20.5 3.83579 20.1642 3.5 19.75 3.5H6.25C5.8703 3.5 5.55651 3.78215 5.50685 4.14823L5.5 4.25V9H4V4.25C4 3.05914 4.92516 2.08436 6.09595 2.00519L6.25 2H19.75Z" 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_desktop_24_regular.svg";

Details

Keywords

duoopendoublescreenfoldable