Document Page Top Left icon

Use the Document Page Top 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 { DocumentPageTopLeft24Regular, DocumentPageTopLeft24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentPageTopLeft24Regular aria-label="Document Page Top Left" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_page_top_left_24_regular.svg" width="24" height="24" alt="Document Page Top 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 12.0192C10.6091 11.9544 10.3299 11.5702 10.3947 11.1611L10.4993 10.5003H9.01802L8.87624 11.3957C8.81146 11.8048 8.4273 12.0839 8.01818 12.0192C7.60906 11.9544 7.32992 11.5702 7.3947 11.1611L7.49933 10.5003H6.74933C6.33512 10.5003 5.99933 10.1645 5.99933 9.75026C5.99933 9.33605 6.33512 9.00026 6.74933 9.00026H7.73684L7.97434 7.50026H7.24933C6.83512 7.50026 6.49933 7.16448 6.49933 6.75026C6.49933 6.33605 6.83512 6.00026 7.24933 6.00026H8.21184L8.41122 4.74108C8.47599 4.33196 8.86016 4.05282 9.26928 4.1176C9.6784 4.18238 9.95754 4.56654 9.89276 4.97566L9.73053 6.00026H11.2118L11.4112 4.74108C11.476 4.33196 11.8602 4.05282 12.2693 4.1176C12.6784 4.18238 12.9575 4.56655 12.8928 4.97566L12.7305 6.00026H13.2493C13.6635 6.00026 13.9993 6.33605 13.9993 6.75026C13.9993 7.16448 13.6635 7.50026 13.2493 7.50026H12.493L12.2555 9.00026H12.7493C13.1635 9.00026 13.4993 9.33605 13.4993 9.75026C13.4993 10.1645 13.1635 10.5003 12.7493 10.5003H12.018L11.8762 11.3957C11.8115 11.8048 11.4273 12.0839 11.0182 12.0192ZM9.49302 7.50026L9.25552 9.00026H10.7368L10.9743 7.50026H9.49302Z" 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_left_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal