Dual Screen Lock icon
Used in foldable screen scenarios. The Dual Screen Lock 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 Lock 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 { DualScreenLock24Regular, DualScreenLock24Filled } from "@fluentui/react-icons";
export function Example() {
return <DualScreenLock24Regular aria-label="Dual Screen Lock" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_lock_24_regular.svg" width="24" height="24" alt="Dual Screen Lock"> 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 5V4C17 2.61929 18.1193 1.5 19.5 1.5C20.8807 1.5 22 2.61929 22 4V5H22.5C23.3284 5 24 5.67157 24 6.5V11.5C24 12.3284 23.3284 13 22.5 13H16.5C15.6716 13 15 12.3284 15 11.5V6.5C15 6.32584 15.0297 6.15862 15.0843 6.00311C15.2893 5.41889 15.8457 5 16.5 5H17ZM18.5 4V5H20.5V4C20.5 3.44772 20.0523 3 19.5 3C18.9477 3 18.5 3.44772 18.5 4ZM20.4955 8.90406C20.4472 8.39679 20.0199 8 19.5 8C18.9477 8 18.5 8.44772 18.5 9C18.5 9.55229 18.9477 10 19.5 10C20.0188 10 20.4454 9.60489 20.4951 9.09916C20.4951 9.09916 20.4951 9.09915 20.4951 9.09916C20.4984 9.06655 20.5 9.03346 20.5 9C20.5 8.96764 20.4985 8.93564 20.4955 8.90406ZM7.7412 17.4998H9.24289C9.6571 17.4998 9.99289 17.8355 9.99289 18.2498C9.99289 18.6295 9.71074 18.9432 9.34466 18.9929L9.24289 18.9998H7.7412C7.32698 18.9998 6.9912 18.664 6.9912 18.2498C6.9912 17.8701 7.27335 17.5563 7.63943 17.5066L7.7412 17.4998ZM12.747 6.00298L14.0494 6.00305C14.017 6.16366 14 6.32985 14 6.5V7.50341H12.7476V20.4985H20.2451C20.3832 20.4985 20.4951 20.3866 20.4951 20.2485V14H21.9951V20.2485C21.9951 21.215 21.2116 21.9985 20.2451 21.9985H11.2476L11.247 21.996L3.75 21.9961C2.7835 21.9961 2 21.2126 2 20.2461V7.75098C2 6.78448 2.7835 6.00098 3.75 6.00098H12.7476L12.747 6.00298ZM11.2476 7.50098H3.75C3.61193 7.50098 3.5 7.61291 3.5 7.75098V20.2461C3.5 20.3842 3.61193 20.4961 3.75 20.4961H11.2476V7.50098ZM14.7387 17.4998H16.2387C16.6529 17.4998 16.9887 17.8355 16.9887 18.2498C16.9887 18.6295 16.7066 18.9432 16.3405 18.9929L16.2387 18.9998H14.7387C14.3245 18.9998 13.9887 18.664 13.9887 18.2498C13.9887 17.8701 14.2709 17.5563 14.637 17.5066L14.7387 17.4998Z" 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_lock_24_regular.svg";Details
| Name | Dual Screen Lock |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dual_screen_lock_24_regular.svg |
| Filled file | ic_fluent_dual_screen_lock_24_filled.svg |
| React components | DualScreenLock24Regular, DualScreenLock24Filled |
| License | MIT (© Microsoft Corporation) |