Document Border Print icon

Use the Document Border Print 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 { DocumentBorderPrint24Regular, DocumentBorderPrint24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentBorderPrint24Regular aria-label="Document Border Print" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_border_print_24_regular.svg" width="24" height="24" alt="Document Border Print">

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="M7.25 2C5.45507 2 4 3.45507 4 5.25V18.75C4 20.5449 5.45507 22 7.25 22H13.1035C13.0579 21.8389 13.0267 21.6717 13.0112 21.5H13C12.2597 21.5 11.6134 21.0978 11.2676 20.5H7.25C6.2835 20.5 5.5 19.7165 5.5 18.75V5.25C5.5 4.2835 6.2835 3.5 7.25 3.5H16.75C17.7165 3.5 18.5 4.2835 18.5 5.25V11H19.25C19.51 11 19.7616 11.0361 20 11.1035V5.25C20 3.45507 18.5449 2 16.75 2H7.25ZM17 6V11H15.75C15.6657 11 15.5823 11.0038 15.5 11.0112V6.5H8.5V17.5H11V19H8C7.44772 19 7 18.5523 7 18V6C7 5.44771 7.44772 5 8 5H16C16.5523 5 17 5.44771 17 6ZM14 13.75C14 12.7835 14.7835 12 15.75 12H19.25C20.2165 12 21 12.7835 21 13.75V14.5H21.5C22.3284 14.5 23 15.1716 23 16V19.5C23 20.0523 22.5523 20.5 22 20.5H21V21.25C21 22.2165 20.2165 23 19.25 23H15.75C14.7835 23 14 22.2165 14 21.25V20.5H13C12.4477 20.5 12 20.0523 12 19.5V16C12 15.1716 12.6716 14.5 13.5 14.5H14V13.75ZM19.5 13.75C19.5 13.6119 19.3881 13.5 19.25 13.5H15.75C15.6119 13.5 15.5 13.6119 15.5 13.75V14.5H19.5V13.75ZM15.5 19.25V21.25C15.5 21.3881 15.6119 21.5 15.75 21.5H19.25C19.3881 21.5 19.5 21.3881 19.5 21.25V19.25C19.5 19.1119 19.3881 19 19.25 19H15.75C15.6119 19 15.5 19.1119 15.5 19.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_border_print_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontalprintprinterdecoration