Drawer Arrow Download icon

Use the Drawer Arrow Download 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 { DrawerArrowDownload24Regular, DrawerArrowDownload24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DrawerArrowDownload24Regular aria-label="Drawer Arrow Download" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_drawer_arrow_download_24_regular.svg" width="24" height="24" alt="Drawer Arrow Download">

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="M11 6.50102C11 3.63199 13.1967 1.27605 16 1.02344V6.79387L14.3536 5.14742C14.1583 4.95216 13.8417 4.95216 13.6464 5.14742C13.4512 5.34269 13.4512 5.65927 13.6464 5.85453L16.1464 8.35453C16.3417 8.54979 16.6583 8.54979 16.8536 8.35453L19.3536 5.85453C19.5488 5.65927 19.5488 5.34269 19.3536 5.14742C19.1583 4.95216 18.8417 4.95216 18.6464 5.14742L17 6.79387V1.02344C19.8032 1.27605 22 3.63199 22 6.50102C22 9.53858 19.5376 12.001 16.5 12.001C13.4624 12.001 11 9.53858 11 6.50102ZM19.5 9.50098C19.5 9.22483 19.2761 9.00098 19 9.00098H14C13.7239 9.00098 13.5 9.22483 13.5 9.50098C13.5 9.77712 13.7239 10.001 14 10.001H19C19.2761 10.001 19.5 9.77712 19.5 9.50098ZM21 11.1914C20.5557 11.6177 20.051 11.9816 19.5 12.2688V14.001H14.9423C14.56 14.001 14.25 14.3109 14.25 14.6933V14.751C14.25 15.9936 13.2426 17.001 12 17.001C10.7574 17.001 9.75 15.9936 9.75 14.751V14.6933C9.75 14.3109 9.44004 14.001 9.05769 14.001H4.5V9.50098H10.7322C10.4876 9.03166 10.2986 8.52875 10.1739 8.00098H4.5V7.25098C4.5 6.28448 5.2835 5.50098 6.25 5.50098H10.0764C10.1572 4.97776 10.3004 4.47515 10.4982 4.00098H6.25C4.45507 4.00098 3 5.45605 3 7.25098V18.751C3 20.5459 4.45508 22.001 6.25 22.001H17.75C19.5449 22.001 21 20.5459 21 18.751V11.1914ZM19.5 15.501V18.751C19.5 19.7175 18.7165 20.501 17.75 20.501H6.25C5.2835 20.501 4.5 19.7175 4.5 18.751V15.501H8.32501C8.67247 17.2127 10.1858 18.501 12 18.501C13.8142 18.501 15.3275 17.2127 15.675 15.501H19.5Z" 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/drawer_arrow_download_24_regular.svg";

Details

Keywords

collectionanalog