Document Page Number icon
Used to represent page number placement in files. Contains placement variants. The Document Page Number 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 Number 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 { DocumentPageNumber24Regular, DocumentPageNumber24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentPageNumber24Regular aria-label="Document Page Number" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_page_number_24_regular.svg" width="24" height="24" alt="Document Page Number"> 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 16.0192C12.6091 15.9544 12.3299 15.5702 12.3947 15.1611L12.4993 14.5003H11.018L10.8762 15.3957C10.8115 15.8048 10.4273 16.0839 10.0182 16.0192C9.60906 15.9544 9.32992 15.5702 9.3947 15.1611L9.49933 14.5003H8.74933C8.33512 14.5003 7.99933 14.1645 7.99933 13.7503C7.99933 13.3361 8.33512 13.0003 8.74933 13.0003H9.73684L9.97434 11.5003H9.24933C8.83512 11.5003 8.49933 11.1645 8.49933 10.7503C8.49933 10.3361 8.83512 10.0003 9.24933 10.0003H10.2118L10.4112 8.74108C10.476 8.33196 10.8602 8.05282 11.2693 8.1176C11.6784 8.18238 11.9575 8.56654 11.8928 8.97566L11.7305 10.0003H13.2118L13.4112 8.74108C13.476 8.33196 13.8602 8.05282 14.2693 8.1176C14.6784 8.18238 14.9575 8.56655 14.8928 8.97566L14.7305 10.0003H15.2493C15.6635 10.0003 15.9993 10.3361 15.9993 10.7503C15.9993 11.1645 15.6635 11.5003 15.2493 11.5003H14.493L14.2555 13.0003H14.7493C15.1635 13.0003 15.4993 13.3361 15.4993 13.7503C15.4993 14.1645 15.1635 14.5003 14.7493 14.5003H14.018L13.8762 15.3957C13.8115 15.8048 13.4273 16.0839 13.0182 16.0192ZM11.493 11.5003L11.2555 13.0003H12.7368L12.9743 11.5003H11.493Z" 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_number_24_regular.svg";Details
| Name | Document Page Number |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_page_number_24_regular.svg |
| Filled file | ic_fluent_document_page_number_24_filled.svg |
| React components | DocumentPageNumber24Regular, DocumentPageNumber24Filled |
| License | MIT (© Microsoft Corporation) |