Fluent Icons

App Folder icon

Used for content around app ui. The App Folder icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and light styles in 6 sizes from 16 to 48 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_app_folder_24_regular.svg

App Folder icon in React

npm install @fluentui/react-icons

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

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

App Folder icon in SVG

npm install @fluentui/svg-icons

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

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

App Folder icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

App Folder icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.app_folder_24_regular)

App Folder 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="&#xF123;" FontSize="24" />

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

App Folder 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_app_folder_24_regular"></i>

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

App Folder icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_app_folder_24_regular

App Folder icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .appFolder24Regular)

App Folder 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 App Folder 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 { AppFolder24Regular, AppFolder24Filled } from "@fluentui/react-icons";

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

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_app_folder_24_regular.svg" width="24" height="24" alt="App Folder">

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.5022 14.25C11.5022 13.2835 10.7187 12.5 9.75224 12.5H7.75224C6.78574 12.5 6.00224 13.2835 6.00224 14.25V16.25C6.00224 17.2165 6.78574 18 7.75224 18H9.75224C10.7187 18 11.5022 17.2165 11.5022 16.25V14.25ZM7.75224 14H9.75224C9.89031 14 10.0022 14.1119 10.0022 14.25V16.25C10.0022 16.3881 9.89031 16.5 9.75224 16.5H7.75224C7.61417 16.5 7.50224 16.3881 7.50224 16.25V14.25C7.50224 14.1119 7.61417 14 7.75224 14ZM17.9997 14.25C17.9997 13.2835 17.2162 12.5 16.2497 12.5H14.2497C13.2832 12.5 12.4997 13.2835 12.4997 14.25V16.25C12.4997 17.2165 13.2832 18 14.2497 18H16.2497C17.2162 18 17.9997 17.2165 17.9997 16.25V14.25ZM14.2497 14H16.2497C16.3878 14 16.4997 14.1119 16.4997 14.25V16.25C16.4997 16.3881 16.3878 16.5 16.2497 16.5H14.2497C14.1116 16.5 13.9997 16.3881 13.9997 16.25V14.25C13.9997 14.1119 14.1116 14 14.2497 14ZM11.501 7.75C11.501 6.7835 10.7175 6 9.75098 6H7.75098C6.78448 6 6.00098 6.7835 6.00098 7.75V9.75C6.00098 10.7165 6.78448 11.5 7.75098 11.5H9.75098C10.7175 11.5 11.501 10.7165 11.501 9.75V7.75ZM7.75098 7.5H9.75098C9.88905 7.5 10.001 7.61193 10.001 7.75V9.75C10.001 9.88807 9.88905 10 9.75098 10H7.75098C7.61291 10 7.50098 9.88807 7.50098 9.75V7.75C7.50098 7.61193 7.61291 7.5 7.75098 7.5ZM17.9984 7.75C17.9984 6.7835 17.2149 6 16.2484 6H14.2484C13.2819 6 12.4984 6.7835 12.4984 7.75V9.75C12.4984 10.7165 13.2819 11.5 14.2484 11.5H16.2484C17.2149 11.5 17.9984 10.7165 17.9984 9.75V7.75ZM14.2484 7.5H16.2484C16.3865 7.5 16.4984 7.61193 16.4984 7.75V9.75C16.4984 9.88807 16.3865 10 16.2484 10H14.2484C14.1104 10 13.9984 9.88807 13.9984 9.75V7.75C13.9984 7.61193 14.1104 7.5 14.2484 7.5ZM6.25 3C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM4.5 6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V17.75C19.5 18.7165 18.7165 19.5 17.75 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V6.25Z" fill="currentColor"/></svg>

Details

NameApp Folder
StylesRegular (outlined), Filled, Light
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_app_folder_24_regular.svg
Filled fileic_fluent_app_folder_24_filled.svg
React (Regular)AppFolder16Regular, AppFolder20Regular, AppFolder24Regular, AppFolder28Regular, AppFolder32Regular, AppFolder48Regular
React (Filled)AppFolder16Filled, AppFolder20Filled, AppFolder24Filled, AppFolder28Filled, AppFolder32Filled, AppFolder48Filled
React (Light)AppFolder32Light
LicenseMIT (© Microsoft Corporation)

Keywords

collectionui

Related icons

App GenericApp RecentApp StoreApp TitleDocument FolderFolderFolder AddFolder Arrow LeftFolder Arrow RightFolder Arrow UpFolder BriefcaseFolder Document