Document Page Top Right icon
Used to represent page number placement in files. Contains placement variants. The Document Page Top Right 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 Document Page Top Right 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 { DocumentPageTopRight24Regular, DocumentPageTopRight24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentPageTopRight24Regular aria-label="Document Page Top Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_page_top_right_24_regular.svg" width="24" height="24" alt="Document Page Top Right"> 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.744 1.99609C18.9349 1.99609 19.9097 2.92126 19.9888 4.09205L19.994 4.24609V19.7442C19.994 20.935 19.0689 21.9098 17.8981 21.989L17.744 21.9942H6.24414C5.05328 21.9942 4.0785 21.069 3.99933 19.8982L3.99414 19.7442V4.24609C3.99414 3.05523 4.9193 2.08045 6.09009 2.00128L6.24414 1.99609H17.744ZM17.744 3.49609H6.24414C5.86444 3.49609 5.55065 3.77825 5.50099 4.14432L5.49414 4.24609V19.7442C5.49414 20.1239 5.77629 20.4377 6.14237 20.4873L6.24414 20.4942H17.744C18.1237 20.4942 18.4375 20.212 18.4872 19.8459L18.494 19.7442V4.24609C18.494 3.8664 18.2119 3.5526 17.8458 3.50294L17.744 3.49609ZM15.0182 12.0191C14.6091 11.9544 14.33 11.5702 14.3948 11.1611L14.4994 10.5002H13.0181L12.8763 11.3957C12.8115 11.8048 12.4274 12.0839 12.0182 12.0191C11.6091 11.9544 11.33 11.5702 11.3948 11.1611L11.4994 10.5002H10.7494C10.3352 10.5002 9.99939 10.1644 9.99939 9.75024C9.99939 9.33602 10.3352 9.00024 10.7494 9.00024H11.7369L11.9744 7.50024H11.2494C10.8352 7.50024 10.4994 7.16445 10.4994 6.75024C10.4994 6.33602 10.8352 6.00024 11.2494 6.00024H12.2119L12.4113 4.74105C12.476 4.33194 12.8602 4.05279 13.2693 4.11757C13.6784 4.18235 13.9576 4.56652 13.8928 4.97563L13.7306 6.00024H15.2119L15.4113 4.74105C15.476 4.33194 15.8602 4.05279 16.2693 4.11757C16.6785 4.18235 16.9576 4.56652 16.8928 4.97563L16.7306 6.00024H17.2494C17.6636 6.00024 17.9994 6.33602 17.9994 6.75024C17.9994 7.16445 17.6636 7.50024 17.2494 7.50024H16.4931L16.2556 9.00024H16.7494C17.1636 9.00024 17.4994 9.33602 17.4994 9.75024C17.4994 10.1644 17.1636 10.5002 16.7494 10.5002H16.0181L15.8763 11.3957C15.8115 11.8048 15.4274 12.0839 15.0182 12.0191ZM13.4931 7.50024L13.2556 9.00024H14.7369L14.9744 7.50024H13.4931Z" 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/document_page_top_right_24_regular.svg";Details
| Name | Document Page Top Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_page_top_right_24_regular.svg |
| Filled file | ic_fluent_document_page_top_right_24_filled.svg |
| React components | DocumentPageTopRight24Regular, DocumentPageTopRight24Filled |
| License | MIT (© Microsoft Corporation) |