Document Print icon
Used to represent general file types and actions. The Document Print 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 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 { DocumentPrint24Regular, DocumentPrint24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentPrint24Regular aria-label="Document Print" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_print_24_regular.svg" width="24" height="24" alt="Document 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="M18.5 20C18.5 20.275 18.276 20.5 18 20.5H12.7324C12.3866 21.0978 11.7403 21.5 11 21.5H10.9888C10.9733 21.6717 10.9421 21.8389 10.8965 22H18C19.104 22 20 21.104 20 20V9.828C20 9.298 19.789 8.789 19.414 8.414L13.585 2.586C13.2194 2.22035 12.6865 2 12.172 2H6C4.896 2 4 2.896 4 4V11.1035C4.23842 11.0361 4.48999 11 4.75 11H5.5V4C5.5 3.725 5.724 3.5 6 3.5H12V8C12 9.104 12.896 10 14 10H18.5V20ZM13.5 4.621L17.378 8.5H14C13.724 8.5 13.5 8.275 13.5 8V4.621ZM3 13.75C3 12.7835 3.7835 12 4.75 12H8.25C9.2165 12 10 12.7835 10 13.75V14.5H10.5C11.3284 14.5 12 15.1716 12 16V19.5C12 20.0523 11.5523 20.5 11 20.5H10V21.25C10 22.2165 9.2165 23 8.25 23H4.75C3.7835 23 3 22.2165 3 21.25V20.5H2C1.44771 20.5 1 20.0523 1 19.5V16C1 15.1716 1.67157 14.5 2.5 14.5H3V13.75ZM8.5 13.75C8.5 13.6119 8.38807 13.5 8.25 13.5H4.75C4.61193 13.5 4.5 13.6119 4.5 13.75V14.5H8.5V13.75ZM4.5 19.25V21.25C4.5 21.3881 4.61193 21.5 4.75 21.5H8.25C8.38807 21.5 8.5 21.3881 8.5 21.25V19.25C8.5 19.1119 8.38807 19 8.25 19H4.75C4.61193 19 4.5 19.1119 4.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_print_24_regular.svg";Details
| Name | Document Print |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_print_24_regular.svg |
| Filled file | ic_fluent_document_print_24_filled.svg |
| React components | DocumentPrint24Regular, DocumentPrint24Filled |
| License | MIT (© Microsoft Corporation) |