Document Page Bottom Left icon
Used to represent page number placement in files. Contains placement variants. The Document Page Bottom Left 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 Left 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 { DocumentPageBottomLeft24Regular, DocumentPageBottomLeft24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentPageBottomLeft24Regular aria-label="Document Page Bottom Left" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_page_bottom_left_24_regular.svg" width="24" height="24" alt="Document Page Bottom Left"> 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.49609ZM11.0182 19.9018C10.6091 19.8371 10.33 19.4529 10.3948 19.0438L10.4994 18.3829H9.01808L8.8763 19.2784C8.81152 19.6875 8.42735 19.9666 8.01824 19.9018C7.60912 19.8371 7.32998 19.4529 7.39476 19.0438L7.49939 18.3829H6.74939C6.33518 18.3829 5.99939 18.0472 5.99939 17.6329C5.99939 17.2187 6.33518 16.8829 6.74939 16.8829H7.73689L7.9744 15.3829H7.24939C6.83518 15.3829 6.49939 15.0472 6.49939 14.6329C6.49939 14.2187 6.83518 13.8829 7.24939 13.8829H8.2119L8.41127 12.6238C8.47605 12.2146 8.86022 11.9355 9.26934 12.0003C9.67845 12.0651 9.9576 12.4492 9.89282 12.8583L9.73059 13.8829H11.2119L11.4113 12.6238C11.4761 12.2146 11.8602 11.9355 12.2693 12.0003C12.6785 12.0651 12.9576 12.4492 12.8928 12.8583L12.7306 13.8829H13.2494C13.6636 13.8829 13.9994 14.2187 13.9994 14.6329C13.9994 15.0472 13.6636 15.3829 13.2494 15.3829H12.4931L12.2556 16.8829H12.7494C13.1636 16.8829 13.4994 17.2187 13.4994 17.6329C13.4994 18.0472 13.1636 18.3829 12.7494 18.3829H12.0181L11.8763 19.2784C11.8115 19.6875 11.4274 19.9666 11.0182 19.9018ZM9.49308 15.3829L9.25558 16.8829H10.7369L10.9744 15.3829H9.49308Z" 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_left_24_regular.svg";Details
| Name | Document Page Bottom Left |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_page_bottom_left_24_regular.svg |
| Filled file | ic_fluent_document_page_bottom_left_24_filled.svg |
| React components | DocumentPageBottomLeft24Regular, DocumentPageBottomLeft24Filled |
| License | MIT (© Microsoft Corporation) |