Dual Screen Settings icon
Used in foldable screen scenarios. The Dual Screen Settings 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 Settings 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 { DualScreenSettings24Regular, DualScreenSettings24Filled } from "@fluentui/react-icons";
export function Example() {
return <DualScreenSettings24Regular aria-label="Dual Screen Settings" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_settings_24_regular.svg" width="24" height="24" alt="Dual Screen Settings"> 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="M13.2805 2.97586C13.5953 4.06611 12.9408 5.19955 11.839 5.47208L11.2547 5.61661C11.2098 5.90431 11.1864 6.19949 11.1864 6.5003C11.1864 6.81498 11.212 7.12349 11.261 7.42373L11.8006 7.55364C12.9133 7.82155 13.5748 8.96656 13.2509 10.0641L13.0646 10.6954C13.5038 11.081 14.0043 11.3942 14.549 11.6169L15.0424 11.0982C15.8311 10.269 17.1536 10.2692 17.9421 11.0987L18.4409 11.6235C18.9846 11.4032 19.4846 11.093 19.924 10.7106L19.7259 10.0247C19.4111 8.93441 20.0656 7.80098 21.1674 7.52845L21.7512 7.38404C21.7962 7.09632 21.8195 6.80113 21.8195 6.5003C21.8195 6.18555 21.7939 5.87698 21.7449 5.57668L21.2058 5.44689C20.0931 5.17898 19.4316 4.03397 19.7555 2.93644L19.9417 2.30555C19.5025 1.91982 19.0019 1.6066 18.4572 1.38377L17.964 1.90232C17.1753 2.73156 15.8528 2.73134 15.0643 1.90183L14.5654 1.37695C14.0218 1.59716 13.5217 1.9073 13.0823 2.28969L13.2805 2.97586ZM16.503 8.0003C15.7022 8.0003 15.053 7.32873 15.053 6.5003C15.053 5.67187 15.7022 5.0003 16.503 5.0003C17.3038 5.0003 17.9529 5.67187 17.9529 6.5003C17.9529 7.32873 17.3038 8.0003 16.503 8.0003ZM10.0016 6.50025C10.0016 6.33253 10.008 6.16629 10.0204 6.00177L3.75035 6.00146C2.78366 6.00146 2 6.78497 2 7.75146V20.2466C2 21.2131 2.78366 21.9966 3.75035 21.9966L11.2489 21.9965L11.2494 21.999H20.2488C21.2155 21.999 21.9992 21.2155 21.9992 20.249L22 9.97232C21.5983 10.6068 21.0897 11.1669 20.4996 11.6273L20.4989 20.249C20.4989 20.3871 20.3869 20.499 20.2488 20.499H12.7497L12.7496 11.8083C12.1727 11.3998 11.6653 10.8996 11.2487 10.329L11.2494 20.4966H3.75035C3.61225 20.4966 3.5003 20.3847 3.5003 20.2466V7.75146C3.5003 7.61339 3.61225 7.50146 3.75035 7.50146L10.0784 7.50216C10.0278 7.17558 10.0016 6.84097 10.0016 6.50025ZM16.9918 18.2502C16.9918 17.836 16.6559 17.5002 16.2416 17.5002H14.7413L14.6395 17.5071C14.2734 17.5568 13.9911 17.8706 13.9911 18.2502C13.9911 18.6645 14.327 19.0002 14.7413 19.0002H16.2416L16.3434 18.9934C16.7095 18.9437 16.9918 18.6299 16.9918 18.2502ZM9.99451 18.2502C9.99451 17.836 9.65865 17.5002 9.24435 17.5002H7.74236L7.64056 17.5071C7.27442 17.5568 6.9922 17.8706 6.9922 18.2502C6.9922 18.6645 7.32806 19.0002 7.74236 19.0002H9.24435L9.34614 18.9934C9.71229 18.9437 9.99451 18.6299 9.99451 18.2502Z" 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_settings_24_regular.svg";Details
| Name | Dual Screen Settings |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dual_screen_settings_24_regular.svg |
| Filled file | ic_fluent_dual_screen_settings_24_filled.svg |
| React components | DualScreenSettings24Regular, DualScreenSettings24Filled |
| License | MIT (© Microsoft Corporation) |