folder open icon

Common uses

• Displaying an expanded folder in a file tree.
• Indicating an active or selected directory.
• Representing a 'My Documents' or 'Downloads' section.

Use it in React

npm i @heroicons/react

import { FolderOpenIcon } from '@heroicons/react/24/outline';

<FolderOpenIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<FolderOpenIcon className="size-6" />

<FolderOpenIcon className="size-6" />

<FolderOpenIcon className="size-6" />

<FolderOpenIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

folderopendirectory openexpanded folderfile explorer openfolder view

FAQ

What is the folder open icon used for?

It visually signifies an open or expanded folder, useful for navigation elements like file trees or indicating active directories.

How do I use this icon in React?

Import it using `import { FolderOpenIcon } from '@heroicons/react/24/outline'` and then use it as a component: `<FolderOpenIcon className="h-6 w-6" />`.

What is the license for this icon?

The Heroicons library, including the folder open icon, is available under the MIT license.

Related icons

The same idea in other libraries, and near matches in Heroicons.