Fluent Icons

Folder Open icon

Used to represent collections of files. The Folder Open icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 4 sizes from 16 to 28 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_folder_open_24_regular.svg

Folder Open icon in React

npm install @fluentui/react-icons

import { FolderOpen24Regular } from "@fluentui/react-icons";

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

Folder Open icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/folder_open_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/folder_open_24_regular.svg" width="24" height="24" alt="Folder Open">

Folder Open icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.FolderOpen())" />

Folder Open icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.folder_open_24_regular)

Folder Open icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF42F;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF42F;" FontSize="24" />

Folder Open icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_folder_open_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f42f";
  font-size: 24px;
}

Folder Open icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_folder_open_24_regular" />

// Kotlin
R.drawable.ic_fluent_folder_open_24_regular

Folder Open icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .folderOpen24Regular)

Folder Open icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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

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

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

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

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 6.25C3.50014 5.2835 4.28364 4.5 5.25014 4.5H8.12882C8.32773 4.5 8.5185 4.57902 8.65915 4.71967L10.7198 6.78033C10.8605 6.92098 11.0512 7 11.2501 7H16.7501C17.7166 7 18.5001 7.7835 18.5001 8.75C18.5001 8.83602 18.5146 8.91866 18.5413 8.99561L8.71867 8.99561C7.37893 8.99561 6.14095 9.71035 5.47108 10.8706L3.50014 14.2844V6.25ZM2.00036 17.7883C2.02089 19.5656 3.468 21 5.25014 21H11.0001C11.0292 21 11.058 20.9983 11.0862 20.9951H16.2812C17.6209 20.9951 18.8589 20.2804 19.5288 19.1201L22.5596 13.8706C23.7748 11.7657 22.3337 9.14964 19.9567 9.00214C19.9848 8.92334 20.0001 8.83846 20.0001 8.75C20.0001 6.95507 18.5451 5.5 16.7501 5.5H11.5608L9.71981 3.65901C9.29786 3.23705 8.72556 3 8.12882 3H5.25014C3.45522 3 2.00014 4.45507 2.00014 6.25V17.71C1.9999 17.7362 1.99997 17.7623 2.00036 17.7883ZM8.71867 10.4956L19.745 10.4956C21.0921 10.4956 21.9341 11.9539 21.2605 13.1206L18.2297 18.3701C17.8278 19.0663 17.085 19.4951 16.2812 19.4951H5.25485C3.9077 19.4951 3.06573 18.0368 3.7393 16.8701L6.77011 11.6206C7.17204 10.9245 7.91482 10.4956 8.71867 10.4956Z" fill="currentColor"/></svg>

Details

NameFolder Open
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px
Regular (outlined) fileic_fluent_folder_open_24_regular.svg
Filled fileic_fluent_folder_open_24_filled.svg
React (Regular)FolderOpen16Regular, FolderOpen20Regular, FolderOpen24Regular, FolderOpen28Regular
React (Filled)FolderOpen16Filled, FolderOpen20Filled, FolderOpen24Filled, FolderOpen28Filled
LicenseMIT (© Microsoft Corporation)

Keywords

analogcollection

Related icons

Folder Open VerticalFolder Open DownOpen FolderFolderFolder AddFolder Arrow LeftFolder Arrow RightFolder Arrow UpFolder BriefcaseFolder DocumentFolder GlobeFolder Lightning