Dual Screen Update icon
Used in foldable screen scenarios. The Dual Screen Update 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 Update 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 { DualScreenUpdate24Regular, DualScreenUpdate24Filled } from "@fluentui/react-icons";
export function Example() {
return <DualScreenUpdate24Regular aria-label="Dual Screen Update" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_update_24_regular.svg" width="24" height="24" alt="Dual Screen Update"> 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 4.00195L12.747 4.00395L20.2451 4.00439C21.2116 4.00439 21.9951 4.78789 21.9951 5.75439V18.2495C21.9951 19.216 21.2116 19.9995 20.2451 19.9995H11.2476L11.247 19.997L3.75 19.9971C2.7835 19.9971 2 19.2136 2 18.2471V5.75195C2 4.78545 2.7835 4.00195 3.75 4.00195H12.7476ZM20.2451 5.50439H12.7476V18.4995H20.2451C20.3832 18.4995 20.4951 18.3876 20.4951 18.2495V5.75439C20.4951 5.61632 20.3832 5.50439 20.2451 5.50439ZM11.2476 5.50195H3.75C3.61193 5.50195 3.5 5.61388 3.5 5.75195V18.2471C3.5 18.3851 3.61193 18.4971 3.75 18.4971H11.2476V5.50195ZM16.5 7.00073C16.8808 7.00073 17.1954 7.28231 17.2452 7.64764L17.2521 7.7492L17.2514 14.4465L18.2161 13.4874C18.4831 13.2216 18.9009 13.1975 19.1954 13.4149L19.2797 13.4874C19.5467 13.7531 19.571 14.1689 19.3525 14.4619L19.2797 14.5459L17.0318 16.783L16.9935 16.8185L16.9308 16.8674L16.8641 16.9088L16.8034 16.9388L16.7024 16.9748L16.6397 16.9892L16.5469 17.0007H16.4531L16.3611 16.9894L16.2645 16.9648L16.1526 16.9178L16.0755 16.8717L15.9682 16.783L13.7203 14.5459C13.4266 14.2536 13.4266 13.7797 13.7203 13.4874C13.9873 13.2216 14.4051 13.1975 14.6995 13.4149L14.7839 13.4874L15.7472 14.4465L15.7479 7.7492C15.7479 7.40473 15.9817 7.11461 16.3001 7.02747L16.3979 7.00757L16.5 7.00073Z" 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_update_24_regular.svg";Details
| Name | Dual Screen Update |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dual_screen_update_24_regular.svg |
| Filled file | ic_fluent_dual_screen_update_24_filled.svg |
| React components | DualScreenUpdate24Regular, DualScreenUpdate24Filled |
| License | MIT (© Microsoft Corporation) |