Dual Screen Span icon
Used in foldable screen scenarios. The Dual Screen Span 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 Span 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 { DualScreenSpan24Regular, DualScreenSpan24Filled } from "@fluentui/react-icons";
export function Example() {
return <DualScreenSpan24Regular aria-label="Dual Screen Span" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_span_24_regular.svg" width="24" height="24" alt="Dual Screen Span"> 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="M8.31129 10.249C8.58648 9.93943 8.55859 9.46537 8.24901 9.19018C7.93942 8.91499 7.46536 8.94288 7.19018 9.25247L5.19018 11.5025C4.93758 11.7866 4.93758 12.2148 5.19018 12.499L7.19018 14.749C7.46536 15.0586 7.93942 15.0865 8.24901 14.8113C8.55859 14.5361 8.58648 14.0621 8.31129 13.7525L7.42086 12.7507H16.5806L15.6902 13.7525C15.415 14.0621 15.4429 14.5361 15.7525 14.8113C16.0621 15.0865 16.5361 15.0586 16.8113 14.749L18.8113 12.499L18.8219 12.4869C18.9271 12.3633 18.993 12.2053 19.0001 12.032C19.0009 12.0119 19.001 11.9918 19.0002 11.9716C18.9933 11.7907 18.9223 11.6261 18.8092 11.5001L16.8113 9.25247C16.5361 8.94288 16.0621 8.91499 15.7525 9.19018C15.4429 9.46537 15.415 9.93943 15.6902 10.249L16.5806 11.2507H7.42087L8.31129 10.249ZM12.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.7554V10.5007H11.2554V5.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.2554V13.5007L12.7554 13.5007V18.4995H20.253C20.391 18.4995 20.503 18.3876 20.503 18.2495V5.75439C20.503 5.61632 20.391 5.50439 20.253 5.50439Z" 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_span_24_regular.svg";Details
| Name | Dual Screen Span |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dual_screen_span_24_regular.svg |
| Filled file | ic_fluent_dual_screen_span_24_filled.svg |
| React components | DualScreenSpan24Regular, DualScreenSpan24Filled |
| License | MIT (© Microsoft Corporation) |