The Tabler folder icon visually represents a directory or container for organizing files and documents within a user interface.
Common uses
- Representing a directory in a file explorer.
- Grouping related settings or options.
- Indicating a save location for files.
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconFolder } from '@tabler/icons-react';
<IconFolder size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconFolder size={24} stroke={2} />filled
<IconFolderFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Document
- Keywords
- cancelnodirectorydirfoldercollectioncontainergroupfilepaperdocument
FAQ
- What does the folder icon typically represent?
- It usually signifies a directory, a collection of files, or a grouping of related items.
- How do I use the folder icon in React?
- Import it using `import { IconFolder } from '@tabler/icons-react';` and then render it as `<IconFolder />`.
- What is the license for the Tabler folder icon?
- The Tabler icon library, including the folder icon, is distributed under the MIT license.
Related icons
The same idea in other libraries, and near matches in Tabler.
Looking for something else? Search Tabler and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →