Document Folder icon
Used to represent an open folder of documents. The Document Folder icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Document 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 { DocumentFolder24Regular, DocumentFolder24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentFolder24Regular aria-label="Document Folder" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_folder_24_regular.svg" width="24" height="24" alt="Document 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="M18.4972 4.62704L18.5 6.75V15H17.5V4.25C17.5 3.00736 16.4926 2 15.25 2H6.25C5.00736 2 4 3.00736 4 4.25V8.37889C3.39701 8.78252 3 9.4699 3 10.25V18.75C3 20.5449 4.45507 22 6.25 22H8.61682C8.66272 22.0028 8.70899 22.0042 8.75559 22.0042H15.25C15.3176 22.0042 15.3849 22.0028 15.4518 22H17.75C19.5449 22 21 20.5449 21 18.75V17.25C21 16.4699 20.603 15.7825 20 15.3789V6.75C20 5.76929 19.3726 4.93512 18.4972 4.62704ZM5.5 8V4.25C5.5 3.83579 5.83579 3.5 6.25 3.5H15.25C15.6642 3.5 16 3.83579 16 4.25V15H15.9041C15.6956 15 15.4964 14.9132 15.3545 14.7603L9.74468 8.71899C9.31895 8.26051 8.72155 8 8.0959 8H5.5ZM4.5 10.25C4.5 9.83579 4.83579 9.5 5.25 9.5H8.0959C8.30445 9.5 8.50358 9.58684 8.64549 9.73966L14.2553 15.781C14.681 16.2395 15.2785 16.5 15.9041 16.5H18.75C19.1642 16.5 19.5 16.8358 19.5 17.25V18.75C19.5 19.7165 18.7165 20.5 17.75 20.5H6.25C5.2835 20.5 4.5 19.7165 4.5 18.75V10.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/document_folder_24_regular.svg";Details
| Name | Document Folder |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_folder_24_regular.svg |
| Filled file | ic_fluent_document_folder_24_filled.svg |
| React components | DocumentFolder24Regular, DocumentFolder24Filled |
| License | MIT (© Microsoft Corporation) |