Dual Screen Pagination icon
Used in foldable screen scenarios. The Dual Screen Pagination 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 Pagination 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 { DualScreenPagination24Regular, DualScreenPagination24Filled } from "@fluentui/react-icons";
export function Example() {
return <DualScreenPagination24Regular aria-label="Dual Screen Pagination" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_pagination_24_regular.svg" width="24" height="24" alt="Dual Screen Pagination"> 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.6251 15.5007C17.0394 15.5007 17.3751 15.8365 17.3751 16.2507C17.3751 16.6649 17.0394 17.0007 16.6251 17.0007C16.2109 17.0007 15.8751 16.6649 15.8751 16.2507C15.8751 15.8365 16.2109 15.5007 16.6251 15.5007ZM19.1251 15.5007C19.5394 15.5007 19.8751 15.8365 19.8751 16.2507C19.8751 16.6649 19.5394 17.0007 19.1251 17.0007C18.7109 17.0007 18.3751 16.6649 18.3751 16.2507C18.3751 15.8365 18.7109 15.5007 19.1251 15.5007ZM14.1251 15.5007C14.5394 15.5007 14.8751 15.8365 14.8751 16.2507C14.8751 16.6649 14.5394 17.0007 14.1251 17.0007C13.7109 17.0007 13.3751 16.6649 13.3751 16.2507C13.3751 15.8365 13.7109 15.5007 14.1251 15.5007Z" 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_pagination_24_regular.svg";Details
| Name | Dual Screen Pagination |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dual_screen_pagination_24_regular.svg |
| Filled file | ic_fluent_dual_screen_pagination_24_filled.svg |
| React components | DualScreenPagination24Regular, DualScreenPagination24Filled |
| License | MIT (© Microsoft Corporation) |