Document Edit icon

Use the Document Edit 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 { DocumentEdit24Regular, DocumentEdit24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M6.25 3.5C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H10.0293C9.92216 21.0483 10.0375 21.5732 10.3007 22H6.25C5.00736 22 4 20.9926 4 19.75V4.25C4 3.00736 5.00736 2 6.25 2H12.3358C12.7999 2 13.245 2.18437 13.5732 2.51256L19.4874 8.42678C19.8156 8.75497 20 9.20009 20 9.66421V10H14C12.8954 10 12 9.10457 12 8V3.5H6.25ZM13.5 4.56066V8C13.5 8.27614 13.7239 8.5 14 8.5H17.4393L13.5 4.56066ZM19.7133 11H19.7154C20.3 11.0003 20.8845 11.2234 21.3305 11.6695C22.2231 12.5621 22.2231 14.0093 21.3305 14.9019L15.4281 20.8043C15.084 21.1485 14.6528 21.3926 14.1806 21.5106L12.3499 21.9683C11.5538 22.1674 10.8326 21.4462 11.0317 20.6501L11.4894 18.8194C11.6074 18.3472 11.8515 17.916 12.1957 17.5719L18.0981 11.6695C18.5441 11.2234 19.1287 11.0003 19.7133 11Z" 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_edit_24_regular.svg";

Details

Keywords

paperworkfileanalogvertical