Dual Screen Vertical Scroll icon
Used in foldable screen scenarios. The Dual Screen Vertical Scroll 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 Vertical Scroll 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 { DualScreenVerticalScroll24Regular, DualScreenVerticalScroll24Filled } from "@fluentui/react-icons";
export function Example() {
return <DualScreenVerticalScroll24Regular aria-label="Dual Screen Vertical Scroll" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_vertical_scroll_24_regular.svg" width="24" height="24" alt="Dual Screen Vertical Scroll"> 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.50195ZM14.7019 13.402L14.7853 13.4754L16.5026 15.2254L18.2173 13.4758C18.5072 13.1799 18.9821 13.1752 19.2779 13.4651C19.5468 13.7287 19.5752 14.1451 19.3604 14.4408L19.2886 14.5257L17.0386 16.8215C16.7714 17.0941 16.348 17.1191 16.0523 16.8961L15.9676 16.8218L13.7147 14.526C13.4246 14.2304 13.429 13.7556 13.7247 13.4654C13.9935 13.2017 14.4103 13.1814 14.7019 13.402ZM17.0386 7.22577L19.2886 9.52156C19.5785 9.81739 19.5737 10.2922 19.2779 10.5822C18.9821 10.8721 18.5072 10.8673 18.2173 10.5715L16.5026 8.82188L14.7853 10.5718C14.4952 10.8675 14.0203 10.8719 13.7247 10.5818C13.429 10.2917 13.4246 9.81685 13.7147 9.52121L15.9676 7.22542C16.2618 6.9257 16.7447 6.92586 17.0386 7.22577Z" 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_vertical_scroll_24_regular.svg";Details
| Name | Dual Screen Vertical Scroll |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dual_screen_vertical_scroll_24_regular.svg |
| Filled file | ic_fluent_dual_screen_vertical_scroll_24_filled.svg |
| React components | DualScreenVerticalScroll24Regular, DualScreenVerticalScroll24Filled |
| License | MIT (© Microsoft Corporation) |