Document Header Footer icon
Used to represent file type content styles and scenarios. The Document Header Footer 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 Header Footer 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 { DocumentHeaderFooter24Regular, DocumentHeaderFooter24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentHeaderFooter24Regular aria-label="Document Header Footer" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_header_footer_24_regular.svg" width="24" height="24" alt="Document Header Footer"> 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.00515 6.50459C7.00515 5.67608 7.67673 5.00444 8.50516 5.00444H15.5052C16.3337 5.00444 17.0052 5.67608 17.0052 6.50459C17.0052 7.33309 16.3337 8.00473 15.5052 8.00473H8.50516C7.67673 8.00473 7.00515 7.33309 7.00515 6.50459ZM7.00515 17.5056C7.00515 16.6771 7.67673 16.0055 8.50516 16.0055H15.5052C16.3337 16.0055 17.0052 16.6771 17.0052 17.5056C17.0052 18.3342 16.3337 19.0058 15.5052 19.0058H8.50516C7.67673 19.0058 7.00515 18.3342 7.00515 17.5056ZM19.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_footer_24_regular.svg";Details
| Name | Document Header Footer |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_header_footer_24_regular.svg |
| Filled file | ic_fluent_document_header_footer_24_filled.svg |
| React components | DocumentHeaderFooter24Regular, DocumentHeaderFooter24Filled |
| License | MIT (© Microsoft Corporation) |