Document One Page Link icon

Use the Document One Page Link 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 { DocumentOnePageLink24Regular, DocumentOnePageLink24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentOnePageLink24Regular aria-label="Document One Page Link" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_one_page_link_24_regular.svg" width="24" height="24" alt="Document One Page Link">

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="M4 4.25C4 3.00736 5.00736 2 6.25 2H17.75C18.9926 2 20 3.00736 20 4.25V13.8328C19.5319 13.6472 19.0273 13.5338 18.5 13.5065V4.25C18.5 3.83579 18.1642 3.5 17.75 3.5H6.25C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H10.5657C10.8805 21.0843 11.3141 21.595 11.8342 22H6.25C5.00736 22 4 20.9926 4 19.75V4.25ZM7.75 6.5C7.33579 6.5 7 6.83579 7 7.25C7 7.66421 7.33579 8 7.75 8H16.25C16.6642 8 17 7.66421 17 7.25C17 6.83579 16.6642 6.5 16.25 6.5H7.75ZM7 11.75C7 11.3358 7.33579 11 7.75 11H16.25C16.6642 11 17 11.3358 17 11.75C17 12.1642 16.6642 12.5 16.25 12.5H7.75C7.33579 12.5 7 12.1642 7 11.75ZM22 18.25C22 16.1789 20.3211 14.5 18.25 14.5L18.1482 14.5068C17.7822 14.5565 17.5 14.8703 17.5 15.25C17.5 15.6642 17.8358 16 18.25 16L18.404 16.0052C19.5748 16.0844 20.5 17.0591 20.5 18.25C20.5 19.4926 19.4926 20.5 18.25 20.5L18.2466 20.5046L18.1448 20.5119C17.779 20.5633 17.4983 20.8783 17.5 21.258C17.5019 21.6722 17.8392 22.0065 18.2534 22.0046V22L18.4523 21.9948C20.4276 21.8913 22 20.2543 22 18.25ZM15.5 15.25C15.5 14.8358 15.1642 14.5 14.75 14.5L14.5508 14.5052C12.5724 14.6087 11 16.2457 11 18.25C11 20.3211 12.6789 22 14.75 22L14.8518 21.9932C15.2178 21.9435 15.5 21.6297 15.5 21.25C15.5 20.8358 15.1642 20.5 14.75 20.5L14.596 20.4948C13.4252 20.4156 12.5 19.4409 12.5 18.25C12.5 17.0074 13.5074 16 14.75 16L14.8518 15.9932C15.2178 15.9435 15.5 15.6297 15.5 15.25ZM19 18.25C19 17.8358 18.6642 17.5 18.25 17.5H14.75L14.6482 17.5068C14.2822 17.5565 14 17.8703 14 18.25C14 18.6642 14.3358 19 14.75 19H18.25L18.3518 18.9932C18.7178 18.9435 19 18.6297 19 18.25Z" 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_one_page_link_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal