Folder Open Down icon

Use the Folder Open Down 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 { FolderOpenDown24Regular, FolderOpenDown24Filled } from "@fluentui/react-icons";

export function Example() {
  return <FolderOpenDown24Regular aria-label="Folder Open Down" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_folder_open_down_24_regular.svg" width="24" height="24" alt="Folder Open Down">

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="M3.50014 17.75C3.50014 18.7165 4.28364 19.5 5.25014 19.5H8.12882C8.32773 19.5 8.5185 19.421 8.65915 19.2803L10.7198 17.2197C10.8605 17.079 11.0512 17 11.2501 17H16.7501C17.7166 17 18.5001 16.2165 18.5001 15.25C18.5001 15.164 18.5146 15.0813 18.5413 15.0044L8.71867 15.0044C7.37893 15.0044 6.14095 14.2896 5.47108 13.1294L3.50014 9.71564V17.75ZM2.00036 6.2117C2.02089 4.43442 3.468 3 5.25014 3H11.0001C11.0292 3 11.058 3.00166 11.0862 3.00488H16.2812C17.6209 3.00488 18.8589 3.71963 19.5288 4.87988L22.5596 10.1294C23.7748 12.2343 22.3337 14.8504 19.9567 14.9979C19.9848 15.0767 20.0001 15.1615 20.0001 15.25C20.0001 17.0449 18.5451 18.5 16.7501 18.5H11.5608L9.71981 20.341C9.29786 20.7629 8.72556 21 8.12882 21H5.25014C3.45522 21 2.00014 19.5449 2.00014 17.75V6.28996C1.9999 6.26384 1.99997 6.23775 2.00036 6.2117ZM8.71867 13.5044L19.745 13.5044C21.0921 13.5044 21.9341 12.0461 21.2605 10.8794L18.2297 5.62988C17.8278 4.93373 17.085 4.50488 16.2812 4.50488H5.25485C3.9077 4.50488 3.06573 5.96321 3.7393 7.12988L6.77011 12.3794C7.17204 13.0755 7.91482 13.5044 8.71867 13.5044Z" 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/folder_open_down_24_regular.svg";

Details