Document Footer icon
Used to represent file type content styles and scenarios. The Document 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 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 { DocumentFooter24Regular, DocumentFooter24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentFooter24Regular aria-label="Document Footer" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_footer_24_regular.svg" width="24" height="24" alt="Document 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="M8.50122 16.0003C7.67279 16.0003 7.00122 16.6718 7.00122 17.5003C7.00122 18.3287 7.67279 19.0003 8.50122 19.0003H15.5012C16.3296 19.0003 17.0012 18.3287 17.0012 17.5003C17.0012 16.6718 16.3296 16.0003 15.5012 16.0003H8.50122ZM19.9908 4.09205C19.9116 2.92126 18.9368 1.99609 17.746 1.99609H6.24609L6.09204 2.00128C4.92126 2.08045 3.99609 3.05523 3.99609 4.24609V19.7442L4.00128 19.8982C4.08045 21.069 5.05523 21.9942 6.24609 21.9942H17.746L17.9 21.989C19.0708 21.9098 19.996 20.935 19.996 19.7442V4.24609L19.9908 4.09205ZM6.24609 3.49609H17.746L17.8477 3.50294C18.2138 3.5526 18.496 3.8664 18.496 4.24609V19.7442L18.4891 19.8459C18.4395 20.212 18.1257 20.4942 17.746 20.4942H6.24609L6.14432 20.4873C5.77825 20.4377 5.49609 20.1239 5.49609 19.7442V4.24609L5.50294 4.14432C5.5526 3.77825 5.8664 3.49609 6.24609 3.49609Z" 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_footer_24_regular.svg";Details
| Name | Document Footer |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_footer_24_regular.svg |
| Filled file | ic_fluent_document_footer_24_filled.svg |
| React components | DocumentFooter24Regular, DocumentFooter24Filled |
| License | MIT (© Microsoft Corporation) |