Folder Multiple icon
Used to represent a group of folders. The Folder Multiple 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 Folder Multiple 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 { FolderMultiple24Regular, FolderMultiple24Filled } from "@fluentui/react-icons";
export function Example() {
return <FolderMultiple24Regular aria-label="Folder Multiple" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_folder_multiple_24_regular.svg" width="24" height="24" alt="Folder Multiple"> 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="M20.4932 8.50781C21.3991 9.0846 22.001 10.0964 22.001 11.25V15.25C22.001 18.4256 19.4266 21 16.251 21H7.75098C6.59723 21 5.58455 20.3984 5.00781 19.4922C5.08831 19.4967 5.16935 19.5 5.25098 19.5H16.251C18.5982 19.5 20.501 17.5972 20.501 15.25V8.75C20.501 8.6687 20.4977 8.58799 20.4932 8.50781ZM7.40625 3C7.97766 3.00012 8.5316 3.21748 8.94922 3.61816C9.4267 4.0763 10.2218 4.85447 10.8252 5.5H16.251C18.0463 5.5 19.5 6.9555 19.5 8.75V15.25C19.5 17.0449 18.0449 18.5 16.25 18.5H5.25C3.45507 18.5 2 17.0449 2 15.25V6.25C2 4.45507 3.45507 3 5.25 3H7.40625ZM10.8252 7C10.2218 7.64553 9.4267 8.4237 8.94922 8.88184C8.5316 9.28252 7.97766 9.49988 7.40625 9.5H3.5V15.25C3.5 16.2165 4.2835 17 5.25 17H16.25C17.2165 17 18 16.2165 18 15.25V8.75C18 7.78307 17.217 7 16.251 7H10.8252ZM5.25 4.5C4.2835 4.5 3.5 5.2835 3.5 6.25V8H7.40625C7.5978 7.99988 7.77714 7.92729 7.91016 7.7998C8.32148 7.40515 8.94598 6.79809 9.47363 6.25C8.94598 5.70191 8.32148 5.09485 7.91016 4.7002C7.77714 4.57271 7.5978 4.50012 7.40625 4.5H5.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/folder_multiple_24_regular.svg";Details
| Name | Folder Multiple |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_folder_multiple_24_regular.svg |
| Filled file | ic_fluent_folder_multiple_24_filled.svg |
| React components | FolderMultiple24Regular, FolderMultiple24Filled |
| License | MIT (© Microsoft Corporation) |