Home/Libraries/VSCode Icons (Iconify)/folder-type-theme-opened

VSCode Icons (Iconify)

FolderTypeThemeOpened

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"><path fill="#818cf8" d="M27.4 5.5h-9.2l-2.1 4.2H4.3v4H.5l3.8 12.8h25.2v-21Zm-7.2 2.1h7.1v2.1h-8.1Zm5.5 6.1H6.6v-1.9h20.8v7.6Z"/><path fill="#818cf8" d="M27.3 16.881a7.8 7.8 0 0 1 1.575 1.419a4.666 4.666 0 0 1 .17 6.087a5.2 5.2 0 0 1-3.162 1.765a9.3 9.3 0 0 1-3.381-.073a11 11 0 0 0-1.609-.176a.9.9 0 0 0-1.046.724v.015a.94.94 0 0 0 .18.742a10.5 10.5 0 0 0 .848 1.108a2.2 2.2 0 0 1 .529.99a.787.787 0 0 1-.491.946a6.4 6.4 0 0 1-3.139.552a15 15 0 0 1-7.736-2.555a6.84 6.84 0 0 1-2.928-4.416a5.87 5.87 0 0 1 1-4.544a10.2 10.2 0 0 1 4.318-3.6a15.05 15.05 0 0 1 11.67-.6c.039.02 3.13 1.677 3.202 1.616"/><path fill="#818cf8" d="M11.246 22.676a2.47 2.47 0 0 1 1.595.514a1.126 1.126 0 0 1 .32 1.533a1.1 1.1 0 0 1-.32.328a2.77 2.77 0 0 1-3.2 0a1.13 1.13 0 0 1-.329-1.535a1.1 1.1 0 0 1 .336-.342a2.46 2.46 0 0 1 1.598-.498"/><path fill="#818cf8" d="M10.965 21.431a1.92 1.92 0 0 1-1.172-.371a.9.9 0 0 1-.3-1.214a.9.9 0 0 1 .29-.3a2.11 2.11 0 0 1 2.458.025a.887.887 0 0 1 .235 1.212a.9.9 0 0 1-.225.234a1.95 1.95 0 0 1-1.286.414"/><path fill="#818cf8" d="M14.109 18.49a1.46 1.46 0 0 1-1.072-.385a.72.72 0 0 1-.087-1a1 1 0 0 1 .087-.089a1.656 1.656 0 0 1 2.124 0a.72.72 0 0 1 .087 1a.7.7 0 0 1-.128.123a1.48 1.48 0 0 1-1.011.351"/><path fill="#818cf8" d="M15.858 25.412a2.8 2.8 0 0 1 1.793.568a1.234 1.234 0 0 1 .373 1.677a1.2 1.2 0 0 1-.373.382a3.16 3.16 0 0 1-3.6 0a1.237 1.237 0 0 1-.39-1.678a1.2 1.2 0 0 1 .4-.4a2.8 2.8 0 0 1 1.797-.549"/><path fill="#818cf8" d="M31 13.466a5.8 5.8 0 0 1-1.151 1.909a47 47 0 0 1-3.749 4.084a.51.51 0 0 1-.537.189a.7.7 0 0 1-.251-.153q-.429-.409-.844-.833a.475.475 0 0 1-.076-.653l.052-.057l.056-.052a49 49 0 0 1 4.1-3.7a8.5 8.5 0 0 1 1.421-.946a2.6 2.6 0 0 1 .507-.189a.353.353 0 0 1 .463.187v.014Z"/><path fill="#818cf8" d="M20 22.963a.1.1 0 0 1 .03.006A2.26 2.26 0 0 0 23 22.5a1.54 1.54 0 0 0 .412-1.21a1.17 1.17 0 0 0-1-1.006a1.02 1.02 0 0 0-.923.408a1.55 1.55 0 0 0-.284.657A2.57 2.57 0 0 1 20 22.938Z"/><path fill="#818cf8" d="M25.16 19.792q-.49-.49-.985-.976a.236.236 0 0 0-.33-.053h-.006a.3.3 0 0 0-.062.072q-.419.544-.831 1.092a.22.22 0 0 0 .008.3l.011.01q.369.366.739.728a.223.223 0 0 0 .313.029q.565-.413 1.12-.839a.8.8 0 0 0 .136-.2a1 1 0 0 0-.113-.163"/><path fill="#818cf8" d="M17.864 17.121a1.15 1.15 0 0 1-.859-.321a.617.617 0 0 1-.048-.856l.048-.05a1.286 1.286 0 0 1 1.7 0a.617.617 0 0 1 .048.857a.6.6 0 0 1-.08.077a1.17 1.17 0 0 1-.809.293"/><path fill="#818cf8" d="M20 22.963s3.915-1.136 2.659-2.614c0 0-.857-.393-1.454 1.007A3.93 3.93 0 0 1 20 22.963"/><path fill="#818cf8" d="m23.305 20.585l1.374-1.272l-.5-.5a.24.24 0 0 0-.335-.045l-.008.006a.2.2 0 0 0-.055.063c-.2.259-1.153 1.07-.813 1.407Z"/><path fill="#818cf8" d="M24.877 19.073L31 13.254s.041-.393-.468-.2s-.8-.177-6.093 4.9a.44.44 0 0 0 .024.71Z"/><path fill="#818cf8" d="M21.721 17.41a1.15 1.15 0 0 1-.859-.321a.617.617 0 0 1-.048-.857l.048-.049a1.286 1.286 0 0 1 1.7 0a.617.617 0 0 1 .048.855a.6.6 0 0 1-.082.078a1.16 1.16 0 0 1-.807.294"/></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. FolderTypeThemeOpenedIcon.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.