folder open icon
folder-open from Font Awesome Solid by Dave Gandy · Solid · Business · CC-BY-4.0 Attribution required.
- Name
- folder-open
- Set
- Font Awesome Solid
- Style
- Solid
- Category
- Business
- Viewbox
- 640×640
- License
- CC BY 4.0
The same icon in other sets
folder-open-filledAnt Design Iconsfolder-openBoxIcons v2folder-openBoxIcons v2 Solidfolder-openCarbonfolder-openCatppuccin Iconsfolder-openFont Awesome 6 Regularfolder-openFont Awesome 6 Solidfolder-openFont Awesome Regularfolder-open-outlineFlowbite Iconsfolder-open-16-filledFluent UI System Iconsfolder-openHeroIconsfolder-openHuge Iconsfolder-openHumbleiconsfolder-openIconParkfolder-openIconPark Outlinefolder-openIconPark Solidfolder-openIconPark TwoTonefolder-openIonIconsfolder-openJam Iconsfolder-openLine Awesomefolder-openLucidefolder-openMage Iconsfolder-openMajesticonsfolder-openMaterial Symbols
More business icons from Font Awesome Solid
Use the folder open icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m88 289.6l-23.6 70.6V160c0-35.3 28.7-64 64-64h138.7c13.8 0 27.3 4.5 38.4 12.8l38.4 28.8c5.5 4.2 12.3 6.4 19.2 6.4h117.3c35.3 0 64 28.7 64 64v16H179c-41.3 0-78 26.4-91.1 65.6zM509.8 512H131c-32.8 0-55.9-32.1-45.5-63.2l48-144C140 285.2 158.4 272 179 272h378.8c32.8 0 55.9 32.1 45.5 63.2l-48 144c-6.5 19.6-24.9 32.8-45.5 32.8"/></svg>
React
import type { SVGProps } from "react";
export function Fa7SolidFolderOpen(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m88 289.6l-23.6 70.6V160c0-35.3 28.7-64 64-64h138.7c13.8 0 27.3 4.5 38.4 12.8l38.4 28.8c5.5 4.2 12.3 6.4 19.2 6.4h117.3c35.3 0 64 28.7 64 64v16H179c-41.3 0-78 26.4-91.1 65.6zM509.8 512H131c-32.8 0-55.9-32.1-45.5-63.2l48-144C140 285.2 158.4 272 179 272h378.8c32.8 0 55.9 32.1 45.5 63.2l-48 144c-6.5 19.6-24.9 32.8-45.5 32.8"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m88 289.6l-23.6 70.6V160c0-35.3 28.7-64 64-64h138.7c13.8 0 27.3 4.5 38.4 12.8l38.4 28.8c5.5 4.2 12.3 6.4 19.2 6.4h117.3c35.3 0 64 28.7 64 64v16H179c-41.3 0-78 26.4-91.1 65.6zM509.8 512H131c-32.8 0-55.9-32.1-45.5-63.2l48-144C140 285.2 158.4 272 179 272h378.8c32.8 0 55.9 32.1 45.5 63.2l-48 144c-6.5 19.6-24.9 32.8-45.5 32.8"/></svg> </template>
CSS
.icon-folder-open {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m88%20289.6l-23.6%2070.6V160c0-35.3%2028.7-64%2064-64h138.7c13.8%200%2027.3%204.5%2038.4%2012.8l38.4%2028.8c5.5%204.2%2012.3%206.4%2019.2%206.4h117.3c35.3%200%2064%2028.7%2064%2064v16H179c-41.3%200-78%2026.4-91.1%2065.6zM509.8%20512H131c-32.8%200-55.9-32.1-45.5-63.2l48-144C140%20285.2%20158.4%20272%20179%20272h378.8c32.8%200%2055.9%2032.1%2045.5%2063.2l-48%20144c-6.5%2019.6-24.9%2032.8-45.5%2032.8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m88%20289.6l-23.6%2070.6V160c0-35.3%2028.7-64%2064-64h138.7c13.8%200%2027.3%204.5%2038.4%2012.8l38.4%2028.8c5.5%204.2%2012.3%206.4%2019.2%206.4h117.3c35.3%200%2064%2028.7%2064%2064v16H179c-41.3%200-78%2026.4-91.1%2065.6zM509.8%20512H131c-32.8%200-55.9-32.1-45.5-63.2l48-144C140%20285.2%20158.4%20272%20179%20272h378.8c32.8%200%2055.9%2032.1%2045.5%2063.2l-48%20144c-6.5%2019.6-24.9%2032.8-45.5%2032.8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa7-solid/folder-open.svg?color=%231a73e8&size=48
