Folder Open Vertical icon
Used to represent collections of files. The Folder Open Vertical icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Folder Open Vertical 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 { FolderOpenVertical24Regular, FolderOpenVertical24Filled } from "@fluentui/react-icons";
export function Example() {
return <FolderOpenVertical24Regular aria-label="Folder Open Vertical" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_folder_open_vertical_24_regular.svg" width="24" height="24" alt="Folder Open Vertical"> 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="M17.75 3.50014C18.7165 3.50014 19.5 4.28364 19.5 5.25014V8.12882C19.5 8.32773 19.421 8.5185 19.2803 8.65915L17.2197 10.7198C17.079 10.8605 17 11.0512 17 11.2501V16.7501C17 17.7166 16.2165 18.5001 15.25 18.5001C15.164 18.5001 15.0813 18.5146 15.0044 18.5413L15.0044 8.71867C15.0044 7.37893 14.2896 6.14095 13.1294 5.47108L9.71564 3.50014H17.75ZM6.2117 2.00036C4.43442 2.02089 3 3.468 3 5.25014V11.0001C3 11.0292 3.00166 11.058 3.00488 11.0862V16.2812C3.00488 17.6209 3.71963 18.8589 4.87988 19.5288L10.1294 22.5596C12.2343 23.7748 14.8504 22.3337 14.9979 19.9567C15.0767 19.9848 15.1615 20.0001 15.25 20.0001C17.0449 20.0001 18.5 18.5451 18.5 16.7501V11.5608L20.341 9.71981C20.7629 9.29786 21 8.72556 21 8.12882V5.25014C21 3.45522 19.5449 2.00014 17.75 2.00014H6.28996C6.26384 1.9999 6.23775 1.99997 6.2117 2.00036ZM13.5044 8.71867L13.5044 19.745C13.5044 21.0921 12.0461 21.9341 10.8794 21.2605L5.62988 18.2297C4.93373 17.8278 4.50488 17.085 4.50488 16.2812V5.25485C4.50488 3.9077 5.96321 3.06573 7.12988 3.7393L12.3794 6.77011C13.0755 7.17204 13.5044 7.91482 13.5044 8.71867Z" 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_vertical_24_regular.svg";Details
| Name | Folder Open Vertical |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_folder_open_vertical_24_regular.svg |
| Filled file | ic_fluent_folder_open_vertical_24_filled.svg |
| React components | FolderOpenVertical24Regular, FolderOpenVertical24Filled |
| License | MIT (© Microsoft Corporation) |