Document Header icon

Use the Document Header 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 { DocumentHeader24Regular, DocumentHeader24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentHeader24Regular aria-label="Document Header" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_header_24_regular.svg" width="24" height="24" alt="Document Header">

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="M8.50516 5.00447C7.67673 5.00447 7.00515 5.67611 7.00515 6.50462C7.00515 7.33312 7.67673 8.00476 8.50516 8.00476H15.5052C16.3337 8.00476 17.0052 7.33312 17.0052 6.50462C17.0052 5.67611 16.3337 5.00447 15.5052 5.00447H8.50516ZM19.9948 4.09615C19.9156 2.92525 18.9409 2 17.75 2H6.25002L6.09597 2.00519C4.92517 2.08436 4 3.05924 4 4.25022V19.7498L4.00519 19.9038C4.08436 21.0747 5.05914 22 6.25002 22H17.75L17.904 21.9948C19.0748 21.9156 20 20.9408 20 19.7498V4.25022L19.9948 4.09615ZM6.25002 3.50015H17.75L17.8518 3.50699C18.2178 3.55666 18.5 3.87048 18.5 4.25022V19.7498L18.4931 19.8516C18.4435 20.2177 18.1297 20.4999 17.75 20.4999H6.25002L6.14825 20.493C5.78217 20.4433 5.50001 20.1295 5.50001 19.7498V4.25022L5.50686 4.14844C5.55652 3.78233 5.87032 3.50015 6.25002 3.50015Z" 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_header_24_regular.svg";

Details

Keywords

paperworkfileanalogeditimagecontentvertical