Folder Zip icon
Used to represent collections of files. The Folder Zip 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 Zip 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 { FolderZip24Regular, FolderZip24Filled } from "@fluentui/react-icons";
export function Example() {
return <FolderZip24Regular aria-label="Folder Zip" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_folder_zip_24_regular.svg" width="24" height="24" alt="Folder Zip"> 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="M8.12891 3C8.72556 3.00006 9.29782 3.23728 9.71973 3.65918L11.5605 5.5H18.75C20.5449 5.5 22 6.95507 22 8.75V17.75C22 19.4608 20.6781 20.8616 19 20.9893V22.3848L18.9873 22.5088C18.9381 22.749 18.749 22.9381 18.5088 22.9873L18.3848 23H13.6152C13.318 22.9999 13.0701 22.7891 13.0127 22.5088L13 22.3848V21H5.25C3.45507 21 2 19.5449 2 17.75V6.25C2 4.45507 3.45507 3 5.25 3H8.12891ZM16 16.5C15.1716 16.5 14.5 17.1716 14.5 18V21.5H17.5V18C17.5 17.1716 16.8284 16.5 16 16.5ZM9.71973 8.84082C9.29782 9.26272 8.72556 9.49994 8.12891 9.5H3.5V17.75C3.5 18.7165 4.2835 19.5 5.25 19.5H13V18C13 16.956 13.5338 16.0374 14.3428 15.5H13.75C13.3358 15.5 13 15.1642 13 14.75C13 14.3358 13.3358 14 13.75 14H16V15C17.6569 15 19 16.3431 19 18V19.4795C19.8479 19.358 20.5 18.6315 20.5 17.75V8.75C20.5 7.7835 19.7165 7 18.75 7H11.5605L9.71973 8.84082ZM18.25 12.5C18.6642 12.5 19 12.8358 19 13.25C19 13.6642 18.6642 14 18.25 14H16V12.5H18.25ZM16 12.5H13.75C13.3358 12.5 13 12.1642 13 11.75C13 11.3358 13.3358 11 13.75 11H16V12.5ZM18.25 9.5C18.6642 9.5 19 9.83579 19 10.25C19 10.6642 18.6642 11 18.25 11H16V9.5H18.25ZM16 9.5H13.75C13.3358 9.5 13 9.16421 13 8.75C13 8.33579 13.3358 8 13.75 8H16V9.5ZM5.25 4.5C4.2835 4.5 3.5 5.2835 3.5 6.25V8H8.12891C8.32774 7.99994 8.51858 7.92087 8.65918 7.78027L10.1895 6.25L8.65918 4.71973C8.51858 4.57913 8.32774 4.50006 8.12891 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_zip_24_regular.svg";Details
| Name | Folder Zip |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_folder_zip_24_regular.svg |
| Filled file | ic_fluent_folder_zip_24_filled.svg |
| React components | FolderZip24Regular, FolderZip24Filled |
| License | MIT (© Microsoft Corporation) |