Document Page Top Center icon
Used to represent page number placement in files. Contains placement variants. The Document Page Top Center 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 Center 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 { DocumentPageTopCenter24Regular, DocumentPageTopCenter24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentPageTopCenter24Regular aria-label="Document Page Top Center" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_page_top_center_24_regular.svg" width="24" height="24" alt="Document Page Top Center"> 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.49609ZM13.0182 12.0003C12.6091 11.9355 12.33 11.5513 12.3948 11.1422L12.4994 10.4814H11.0181L10.8763 11.3768C10.8115 11.7859 10.4274 12.0651 10.0182 12.0003C9.60912 11.9355 9.32998 11.5513 9.39476 11.1422L9.49939 10.4814H8.74939C8.33518 10.4814 7.99939 10.1456 7.99939 9.73137C7.99939 9.31716 8.33518 8.98137 8.74939 8.98137H9.73689L9.9744 7.48137H9.24939C8.83518 7.48137 8.49939 7.14559 8.49939 6.73137C8.49939 6.31716 8.83518 5.98137 9.24939 5.98137H10.2119L10.4113 4.72219C10.4761 4.31307 10.8602 4.03393 11.2693 4.09871C11.6785 4.16349 11.9576 4.54765 11.8928 4.95677L11.7306 5.98137H13.2119L13.4113 4.72219C13.4761 4.31307 13.8602 4.03393 14.2693 4.09871C14.6785 4.16349 14.9576 4.54765 14.8928 4.95677L14.7306 5.98137H15.2494C15.6636 5.98137 15.9994 6.31716 15.9994 6.73137C15.9994 7.14559 15.6636 7.48137 15.2494 7.48137H14.4931L14.2556 8.98137H14.7494C15.1636 8.98137 15.4994 9.31716 15.4994 9.73137C15.4994 10.1456 15.1636 10.4814 14.7494 10.4814H14.0181L13.8763 11.3768C13.8115 11.7859 13.4274 12.0651 13.0182 12.0003ZM11.4931 7.48137L11.2556 8.98137H12.7369L12.9744 7.48137H11.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_center_24_regular.svg";Details
| Name | Document Page Top Center |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_page_top_center_24_regular.svg |
| Filled file | ic_fluent_document_page_top_center_24_filled.svg |
| React components | DocumentPageTopCenter24Regular, DocumentPageTopCenter24Filled |
| License | MIT (© Microsoft Corporation) |