Document PDF icon

Use the Document PDF 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 { DocumentPdf24Regular, DocumentPdf24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M3.75 15C5.13071 15 6.25 16.1193 6.25 17.5C6.25 18.8807 5.13071 20 3.75 20H2.5V21.25C2.5 21.6642 2.16421 22 1.75 22C1.33579 22 1 21.6642 1 21.25V15.75C1 15.3358 1.33579 15 1.75 15H3.75ZM2.5 18.5H3.75C4.30228 18.5 4.75 18.0523 4.75 17.5C4.75 16.9477 4.30228 16.5 3.75 16.5H2.5V18.5ZM9.25 15C10.7688 15 12 16.2312 12 17.75V19.25C12 20.7688 10.7688 22 9.25 22H7.75C7.33579 22 7 21.6642 7 21.25V15.75C7 15.3358 7.33579 15 7.75 15H9.25ZM8.5 20.5H9.25C9.94036 20.5 10.5 19.9404 10.5 19.25V17.75C10.5 17.0596 9.94036 16.5 9.25 16.5H8.5V20.5ZM16.75 15C17.1642 15 17.5 15.3358 17.5 15.75C17.5 16.1642 17.1642 16.5 16.75 16.5H14.5V18H16.25C16.6642 18 17 18.3358 17 18.75C17 19.1642 16.6642 19.5 16.25 19.5H14.5V21.25C14.5 21.6642 14.1642 22 13.75 22C13.3358 22 13 21.6642 13 21.25V15.75C13 15.3358 13.3358 15 13.75 15H16.75ZM12.1289 2C12.7256 2.00006 13.2978 2.23728 13.7197 2.65918L19.3408 8.28027C19.7627 8.70218 19.9999 9.27444 20 9.87109V19.5C20 20.8807 18.8807 22 17.5 22H15.3291C15.4374 21.7724 15.5 21.5188 15.5 21.25V20.5H17.5C18.0523 20.5 18.5 20.0523 18.5 19.5V10H14C12.8954 10 12 9.10457 12 8V3.5H6.5C5.94772 3.5 5.5 3.94772 5.5 4.5V14H4V4.5C4 3.11929 5.11929 2 6.5 2H12.1289ZM13.5 8C13.5 8.27614 13.7239 8.5 14 8.5H17.4395L13.5 4.56055V8Z" 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_pdf_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontalportabledocumentformat