Dual Screen Mirror icon
Used in foldable screen scenarios. The Dual Screen Mirror 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 Mirror 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 { DualScreenMirror24Regular, DualScreenMirror24Filled } from "@fluentui/react-icons";
export function Example() {
return <DualScreenMirror24Regular aria-label="Dual Screen Mirror" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_mirror_24_regular.svg" width="24" height="24" alt="Dual Screen Mirror"> 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="M17.1716 9.41532C17.0445 9.16123 16.7848 9.00073 16.5007 9.00073C16.2167 9.00073 15.957 9.16123 15.8299 9.41532L13.5799 13.9153C13.4637 14.1478 13.4761 14.4239 13.6127 14.645C13.7494 14.8661 13.9908 15.0007 14.2507 15.0007H18.7507C19.0107 15.0007 19.2521 14.8661 19.3887 14.645C19.5254 14.4239 19.5378 14.1478 19.4216 13.9153L17.1716 9.41532ZM15.4643 13.5007L16.5007 11.4278L17.5372 13.5007H15.4643ZM7.50073 9.00073C7.78481 9.00073 8.04451 9.16123 8.17155 9.41532L10.4216 13.9153C10.5378 14.1478 10.5254 14.4239 10.3887 14.645C10.2521 14.8661 10.0107 15.0007 9.75073 15.0007H5.25073C4.9908 15.0007 4.7494 14.8661 4.61275 14.645C4.47609 14.4239 4.46367 14.1478 4.57991 13.9153L6.82991 9.41532C6.95696 9.16123 7.21665 9.00073 7.50073 9.00073ZM7.50073 11.4278L6.46426 13.5007H8.53721L7.50073 11.4278ZM12.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_mirror_24_regular.svg";Details
| Name | Dual Screen Mirror |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dual_screen_mirror_24_regular.svg |
| Filled file | ic_fluent_dual_screen_mirror_24_filled.svg |
| React components | DualScreenMirror24Regular, DualScreenMirror24Filled |
| License | MIT (© Microsoft Corporation) |