Document Signature icon

Use the Document Signature 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 { DocumentSignature24Regular, DocumentSignature24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M4 4C4 2.89543 4.89543 2 6 2H12.1722C12.7027 2 13.2114 2.21071 13.5864 2.58579L18.6956 7.69494C18.5909 7.77684 18.49 7.86598 18.3937 7.96235L16.356 10H14C12.8954 10 12 9.10457 12 8V3.5H6C5.72386 3.5 5.5 3.72386 5.5 4V20C5.5 20.2761 5.72386 20.5 6 20.5H18C18.2761 20.5 18.5 20.2761 18.5 20V17.1493L20 15.6493V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4ZM14 8.5H17.3793L13.5 4.62066V8C13.5 8.27614 13.7239 8.5 14 8.5ZM13.1974 14.5719L19.0999 8.66946C19.9925 7.77685 21.4397 7.77685 22.3323 8.66946C23.2249 9.56208 23.2249 11.0093 22.3323 11.9019L16.4299 17.8043C16.0857 18.1485 15.6545 18.3926 15.1824 18.5106L13.3517 18.9683C13.2382 18.9967 13.1262 19.0064 13.0182 18.9998C13.0122 18.9999 13.0061 19 13 19H7.75C7.33579 19 7 18.6642 7 18.25C7 17.8358 7.33579 17.5 7.75 17.5H12.071L12.4911 15.8194C12.6092 15.3472 12.8533 14.916 13.1974 14.5719Z" 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_signature_24_regular.svg";

Details