Document Page Bottom Right icon
Used to represent page number placement in files. Contains placement variants. The Document Page Bottom 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 Bottom 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 { DocumentPageBottomRight24Regular, DocumentPageBottomRight24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentPageBottomRight24Regular aria-label="Document Page Bottom Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_page_bottom_right_24_regular.svg" width="24" height="24" alt="Document Page Bottom 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 19.9018C14.6091 19.8371 14.33 19.4529 14.3948 19.0438L14.4994 18.3829H13.0181L12.8763 19.2784C12.8115 19.6875 12.4274 19.9666 12.0182 19.9018C11.6091 19.8371 11.33 19.4529 11.3948 19.0438L11.4994 18.3829H10.7494C10.3352 18.3829 9.99939 18.0472 9.99939 17.6329C9.99939 17.2187 10.3352 16.8829 10.7494 16.8829H11.7369L11.9744 15.3829H11.2494C10.8352 15.3829 10.4994 15.0472 10.4994 14.6329C10.4994 14.2187 10.8352 13.8829 11.2494 13.8829H12.2119L12.4113 12.6238C12.476 12.2146 12.8602 11.9355 13.2693 12.0003C13.6784 12.0651 13.9576 12.4492 13.8928 12.8583L13.7306 13.8829H15.2119L15.4113 12.6238C15.476 12.2146 15.8602 11.9355 16.2693 12.0003C16.6785 12.0651 16.9576 12.4492 16.8928 12.8583L16.7306 13.8829H17.2494C17.6636 13.8829 17.9994 14.2187 17.9994 14.6329C17.9994 15.0472 17.6636 15.3829 17.2494 15.3829H16.4931L16.2556 16.8829H16.7494C17.1636 16.8829 17.4994 17.2187 17.4994 17.6329C17.4994 18.0472 17.1636 18.3829 16.7494 18.3829H16.0181L15.8763 19.2784C15.8115 19.6875 15.4274 19.9666 15.0182 19.9018ZM13.4931 15.3829L13.2556 16.8829H14.7369L14.9744 15.3829H13.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_right_24_regular.svg";Details
| Name | Document Page Bottom Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_page_bottom_right_24_regular.svg |
| Filled file | ic_fluent_document_page_bottom_right_24_filled.svg |
| React components | DocumentPageBottomRight24Regular, DocumentPageBottomRight24Filled |
| License | MIT (© Microsoft Corporation) |