App Folder icon

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" />;
}

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>

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/app_folder_24_regular.svg";

Details

Keywords

collectionui