Document Word icon

Use the Document Word 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 { DocumentWord24Regular, DocumentWord24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M10 11C11.1046 11 12 11.8954 12 13V20C12 21.1046 11.1046 22 10 22H3C1.89543 22 1 21.1046 1 20V13C1 11.8954 1.89543 11 3 11H10ZM12.1719 2C12.7023 2 13.2118 2.21086 13.5869 2.58594L19.4141 8.41309C19.7891 8.78816 20 9.29769 20 9.82812V20C20 21.1046 19.1046 22 18 22H12.2314C12.6023 21.5866 12.8621 21.0718 12.958 20.5H18C18.2761 20.5 18.5 20.2761 18.5 20V10H14C12.8954 10 12 9.10457 12 8V3.5H6C5.72386 3.5 5.5 3.72386 5.5 4V10H4V4C4 2.89543 4.89543 2 6 2H12.1719ZM8.80762 13.501L8.05957 17.46L7.2627 13.501H5.70117L4.94043 17.46L4.17383 13.501H2.90039L4.1416 19.5H5.70117L6.5 15.9004L7.2627 19.5L8.80762 19.499L10.0996 13.5L8.80762 13.501ZM13.5 8C13.5 8.27614 13.7239 8.5 14 8.5H17.3789L13.5 4.62109V8Z" 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_word_24_regular.svg";

Details