Home/Libraries/Fluent Emoji (Iconify)/open-file-folder

Fluent Emoji (Iconify)

OpenFileFolder

License: MITCommercial Safe

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><g fill="none"><g filter="url(#ieBrdCe)"><path fill="url(#ia8UOwb)" d="M2.82 7.797a1.8 1.8 0 0 1 1.8-1.8h7.81a2 2 0 0 1 1.386.558l2.857 2.748c.42.404.978.629 1.56.629h7.738a1.8 1.8 0 0 1 1.8 1.8v8.176l-3.564 9.976H6.82a4 4 0 0 1-4-4z"/></g><g filter="url(#ipzCzVd)"><path fill="#818cf8" d="M8.009 15.563c.518-1.407 1.878-2.344 3.403-2.344h14.212c1.162 0 .892 1.104.542 2.191l-1.683 11.692a1.81 1.81 0 0 1-1.725 1.24H6.66a3.65 3.65 0 0 1-1.96-.572l-.004-.002c-.186-.21-.711-1.209-.44-1.903z"/></g><g filter="url(#ivq0LTW)"><path fill="url(#i3oobYd)" d="M8.3 15.489a4 4 0 0 1 3.762-2.64h16.802a1.9 1.9 0 0 1 1.811 2.472l-4.163 13.166a2 2 0 0 1-1.907 1.397H6.808a4 4 0 0 1-2.166-.645l-.005-.002a4 4 0 0 1-1.315-1.411c.372-.028.566-.212.66-.389z"/></g><defs><filter id="ieBrdCe" width="25.402" height="24.037" x="2.52" y="5.997" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.3" dy=".15"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.843137 0 0 0 0 0.360784 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_22551"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".15" dy=".15"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.933333 0 0 0 0 0.658824 0 0 0 0 0.313726 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_22551" result="effect2_innerShadow_18_22551"/></filter><filter id="ipzCzVd" width="26.288" height="19.123" x="2.179" y="11.219" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_22551" stdDeviation="1"/></filter><filter id="ivq0LTW" width="28.043" height="17.336" x="3.022" y="12.848" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".3" dy=".3"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.768627 0 0 0 0 0.286275 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_22551"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.3" dy=".3"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.878431 0 0 0 0 0.290196 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_22551" result="effect2_innerShadow_18_22551"/></filter><linearGradient id="ia8UOwb" x1="7.088" x2="9.901" y1="6.687" y2="16.813" gradientUnits="userSpaceOnUse"><stop stop-color="#FFD052"/><stop offset="1" stop-color="#FFBD41"/></linearGradient><linearGradient id="i3oobYd" x1="17.043" x2="17.043" y1="12.848" y2="29.884" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDF54"/><stop offset="1" stop-color="#FFBA5F"/></linearGradient></defs></g></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. OpenFileFolderIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.