Document Page Bottom Center icon
Used to represent page number placement in files. Contains placement variants. The Document Page Bottom 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 Bottom 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 { DocumentPageBottomCenter24Regular, DocumentPageBottomCenter24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentPageBottomCenter24Regular aria-label="Document Page Bottom Center" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_page_bottom_center_24_regular.svg" width="24" height="24" alt="Document Page Bottom 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 19.9019C12.6091 19.8371 12.33 19.4529 12.3948 19.0438L12.4994 18.383H11.0181L10.8763 19.2784C10.8115 19.6875 10.4274 19.9666 10.0182 19.9019C9.60912 19.8371 9.32997 19.4529 9.39475 19.0438L9.49939 18.383H8.74939C8.33517 18.383 7.99939 18.0472 7.99939 17.633C7.99939 17.2188 8.33517 16.883 8.74939 16.883H9.73689L9.97439 15.383H9.24939C8.83517 15.383 8.49939 15.0472 8.49939 14.633C8.49939 14.2188 8.83517 13.883 9.24939 13.883H10.2119L10.4113 12.6238C10.476 12.2147 10.8602 11.9355 11.2693 12.0003C11.6784 12.0651 11.9576 12.4493 11.8928 12.8584L11.7306 13.883H13.2119L13.4113 12.6238C13.476 12.2147 13.8602 11.9355 14.2693 12.0003C14.6785 12.0651 14.9576 12.4493 14.8928 12.8584L14.7306 13.883H15.2494C15.6636 13.883 15.9994 14.2188 15.9994 14.633C15.9994 15.0472 15.6636 15.383 15.2494 15.383H14.4931L14.2556 16.883H14.7494C15.1636 16.883 15.4994 17.2188 15.4994 17.633C15.4994 18.0472 15.1636 18.383 14.7494 18.383H14.0181L13.8763 19.2784C13.8115 19.6875 13.4274 19.9666 13.0182 19.9019ZM11.4931 15.383L11.2556 16.883H12.7369L12.9744 15.383H11.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_bottom_center_24_regular.svg";Details
| Name | Document Page Bottom Center |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_page_bottom_center_24_regular.svg |
| Filled file | ic_fluent_document_page_bottom_center_24_filled.svg |
| React components | DocumentPageBottomCenter24Regular, DocumentPageBottomCenter24Filled |
| License | MIT (© Microsoft Corporation) |