Dual Screen icon
Used in foldable screen scenarios. The Dual Screen icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Dual 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 { DualScreen24Regular, DualScreen24Filled } from "@fluentui/react-icons";
export function Example() {
return <DualScreen24Regular aria-label="Dual Screen" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_24_regular.svg" width="24" height="24" alt="Dual 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="M12.7476 4L12.747 4.002L20.2451 4.00244C21.2116 4.00244 21.9951 4.78594 21.9951 5.75244V18.2476C21.9951 19.2141 21.2116 19.9976 20.2451 19.9976H11.2476L11.247 19.995L3.75 19.9951C2.7835 19.9951 2 19.2116 2 18.2451V5.75C2 4.7835 2.7835 4 3.75 4H12.7476ZM20.2451 5.50244H12.7476V18.4976H20.2451C20.3832 18.4976 20.4951 18.3856 20.4951 18.2476V5.75244C20.4951 5.61437 20.3832 5.50244 20.2451 5.50244ZM11.2476 5.5H3.75C3.61193 5.5 3.5 5.61193 3.5 5.75V18.2451C3.5 18.3832 3.61193 18.4951 3.75 18.4951H11.2476V5.5ZM14.7387 15.4988H16.2387C16.6529 15.4988 16.9887 15.8346 16.9887 16.2488C16.9887 16.6285 16.7066 16.9423 16.3405 16.9919L16.2387 16.9988H14.7387C14.3245 16.9988 13.9887 16.663 13.9887 16.2488C13.9887 15.8691 14.2709 15.5553 14.637 15.5056L14.7387 15.4988H16.2387H14.7387ZM7.7412 15.4988H9.24289C9.6571 15.4988 9.99289 15.8346 9.99289 16.2488C9.99289 16.6285 9.71074 16.9423 9.34466 16.9919L9.24289 16.9988H7.7412C7.32698 16.9988 6.9912 16.663 6.9912 16.2488C6.9912 15.8691 7.27335 15.5553 7.63943 15.5056L7.7412 15.4988H9.24289H7.7412Z" 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_24_regular.svg";Details
| Name | Dual Screen |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dual_screen_24_regular.svg |
| Filled file | ic_fluent_dual_screen_24_filled.svg |
| React components | DualScreen24Regular, DualScreen24Filled |
| License | MIT (© Microsoft Corporation) |