Open Folder icon
Used specifically for opening folder scenarios. The Open 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 Open 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 { OpenFolder24Regular, OpenFolder24Filled } from "@fluentui/react-icons";
export function Example() {
return <OpenFolder24Regular aria-label="Open Folder" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_open_folder_24_regular.svg" width="24" height="24" alt="Open 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="M6.74721 3L17.2535 3.00169C19.2574 3.00259 20.8939 4.57474 20.9979 6.55303L21.0032 6.75217V11.2447C21.0032 11.6589 20.6674 11.9947 20.2532 11.9947C19.8735 11.9947 19.5597 11.7126 19.51 11.3465L19.5032 11.2447V6.75239C19.5029 5.5615 18.5777 4.58661 17.4071 4.50695L17.2531 4.50169L6.74652 4.5C5.56884 4.4991 4.60218 5.404 4.5047 6.55687L4.49686 6.71556L4.49946 17.2517C4.50005 18.4426 5.42534 19.4173 6.59596 19.4969L6.74999 19.5021H11.2463C11.6605 19.5021 11.9963 19.8379 11.9963 20.2521C11.9963 20.6318 11.7142 20.9456 11.3481 20.9952L11.2463 21.0021H6.74975C4.74592 21.0015 3.10919 19.4296 3.00475 17.4514L2.99946 17.2522L2.99762 6.75264L3.00184 6.54921C3.10225 4.63646 4.63584 3.10372 6.54809 3.00505L6.74721 3ZM9.75049 8.99958H16.2544C16.6686 8.99958 17.0044 9.33536 17.0044 9.74958C17.0044 10.1293 16.7222 10.4431 16.3562 10.4927L16.2544 10.4996L11.5596 10.499L18.7837 17.7196C19.05 17.9858 19.0743 18.4024 18.8566 18.6961L18.784 18.7802C18.5178 19.0466 18.1011 19.0709 17.8074 18.8531L17.7233 18.7805L10.4996 11.56L10.5005 16.2511C10.5005 16.6308 10.2183 16.9446 9.85226 16.9943L9.75049 17.0011C9.3708 17.0011 9.057 16.7189 9.00734 16.3529L9.00046 16.2511L9.00064 9.73438C8.99987 9.70891 9.00166 9.68355 9.00474 9.65832L9.02629 9.54991L9.06099 9.4536L9.06622 9.44208C9.10141 9.36099 9.15261 9.28554 9.21875 9.21937L9.26278 9.17865L9.34426 9.1181L9.40363 9.0838L9.49895 9.04243L9.56575 9.0225L9.62765 9.00943L9.72085 9.00011L16.2544 8.99958H9.75049Z" 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/open_folder_24_regular.svg";Details
| Name | Open Folder |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_open_folder_24_regular.svg |
| Filled file | ic_fluent_open_folder_24_filled.svg |
| React components | OpenFolder24Regular, OpenFolder24Filled |
| License | MIT (© Microsoft Corporation) |