Document Arrow Down Off icon

Use the Document Arrow Down Off 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 { DocumentArrowDownOff24Regular, DocumentArrowDownOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentArrowDownOff24Regular aria-label="Document Arrow Down Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_arrow_down_off_24_regular.svg" width="24" height="24" alt="Document Arrow Down Off">

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.5 12C9.53757 12 12 14.4624 12 17.5C12 20.5376 9.53757 23 6.5 23C3.46243 23 1 20.5376 1 17.5C1 14.4624 3.46243 12 6.5 12ZM2.21973 2.21973C2.51262 1.92684 2.98738 1.92684 3.28027 2.21973L21.7803 20.7197C22.073 21.0126 22.0729 21.4874 21.7803 21.7803C21.4874 22.0731 21.0126 22.073 20.7197 21.7803L19.8008 20.8613C19.4789 21.5339 18.7956 22 18 22H11.1904C11.6167 21.5558 11.9804 21.051 12.2676 20.5H18C18.2761 20.5 18.5 20.2761 18.5 20V19.5605L5.5 6.56055V11.0762C4.9768 11.157 4.47416 11.3003 4 11.498V5.06055L2.21973 3.28027C1.92684 2.98738 1.92684 2.51262 2.21973 2.21973ZM6.5 14C6.22386 14 6 14.2239 6 14.5V19.293L4.35352 17.6465C4.15825 17.4512 3.84175 17.4512 3.64648 17.6465C3.45122 17.8417 3.45122 18.1583 3.64648 18.3535L6.14648 20.8535C6.34175 21.0488 6.65825 21.0488 6.85352 20.8535L9.35352 18.3535C9.54878 18.1583 9.54878 17.8417 9.35352 17.6465C9.15825 17.4512 8.84175 17.4512 8.64648 17.6465L7 19.293V14.5C7 14.2239 6.77614 14 6.5 14ZM12.1719 2C12.7023 2 13.2118 2.21087 13.5869 2.58594L19.4141 8.41309C19.7891 8.78816 20 9.29769 20 9.82812V16.8184L18.5 15.3184V10H14C12.8954 10 12 9.10457 12 8V3.5H6.68164L5.30664 2.125C5.5228 2.04504 5.75605 2 6 2H12.1719ZM13.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_arrow_down_off_24_regular.svg";

Details