folder type vscode opened logo

folder-type-vscode-opened from VSCode Icons by Roberto Huertas · Color · MIT Free for personal and commercial use.

Name
folder-type-vscode-opened
Set
VSCode Icons
Style
Color
Viewbox
32×32
License
MIT

Related icons in VSCode Icons

Use the folder type vscode opened logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#7bb4db" 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.626Z"/><path fill="#0065a9" d="m30.257 12.333l-4.324-2.082a1.31 1.31 0 0 0-1.492.253L10.285 23.411a.875.875 0 0 0-.057 1.236l.057.057l1.157 1.052a.87.87 0 0 0 1.116.049l17.049-12.932a.868.868 0 0 1 1.393.692v-.05a1.31 1.31 0 0 0-.743-1.182"/><path fill="#007acc" d="m30.257 28.788l-4.324 2.082a1.31 1.31 0 0 1-1.492-.253L10.285 17.71a.875.875 0 0 1-.057-1.236l.057-.057l1.157-1.052a.87.87 0 0 1 1.116-.049l17.049 12.932A.868.868 0 0 0 31 27.556v.05a1.31 1.31 0 0 1-.743 1.182"/><path fill="#1f9cf0" d="M25.933 30.871a1.31 1.31 0 0 1-1.491-.254a.768.768 0 0 0 1.311-.543V11.047a.768.768 0 0 0-1.311-.543a1.31 1.31 0 0 1 1.491-.254l4.324 2.079A1.31 1.31 0 0 1 31 13.512v14.1a1.31 1.31 0 0 1-.743 1.183Z"/></svg>

React

import type { SVGProps } from "react";

export function VscodeIconsFolderTypeVscodeOpened(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#7bb4db" 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.626Z"/><path fill="#0065a9" d="m30.257 12.333l-4.324-2.082a1.31 1.31 0 0 0-1.492.253L10.285 23.411a.875.875 0 0 0-.057 1.236l.057.057l1.157 1.052a.87.87 0 0 0 1.116.049l17.049-12.932a.868.868 0 0 1 1.393.692v-.05a1.31 1.31 0 0 0-.743-1.182"/><path fill="#007acc" d="m30.257 28.788l-4.324 2.082a1.31 1.31 0 0 1-1.492-.253L10.285 17.71a.875.875 0 0 1-.057-1.236l.057-.057l1.157-1.052a.87.87 0 0 1 1.116-.049l17.049 12.932A.868.868 0 0 0 31 27.556v.05a1.31 1.31 0 0 1-.743 1.182"/><path fill="#1f9cf0" d="M25.933 30.871a1.31 1.31 0 0 1-1.491-.254a.768.768 0 0 0 1.311-.543V11.047a.768.768 0 0 0-1.311-.543a1.31 1.31 0 0 1 1.491-.254l4.324 2.079A1.31 1.31 0 0 1 31 13.512v14.1a1.31 1.31 0 0 1-.743 1.183Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#7bb4db" 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.626Z"/><path fill="#0065a9" d="m30.257 12.333l-4.324-2.082a1.31 1.31 0 0 0-1.492.253L10.285 23.411a.875.875 0 0 0-.057 1.236l.057.057l1.157 1.052a.87.87 0 0 0 1.116.049l17.049-12.932a.868.868 0 0 1 1.393.692v-.05a1.31 1.31 0 0 0-.743-1.182"/><path fill="#007acc" d="m30.257 28.788l-4.324 2.082a1.31 1.31 0 0 1-1.492-.253L10.285 17.71a.875.875 0 0 1-.057-1.236l.057-.057l1.157-1.052a.87.87 0 0 1 1.116-.049l17.049 12.932A.868.868 0 0 0 31 27.556v.05a1.31 1.31 0 0 1-.743 1.182"/><path fill="#1f9cf0" d="M25.933 30.871a1.31 1.31 0 0 1-1.491-.254a.768.768 0 0 0 1.311-.543V11.047a.768.768 0 0 0-1.311-.543a1.31 1.31 0 0 1 1.491-.254l4.324 2.079A1.31 1.31 0 0 1 31 13.512v14.1a1.31 1.31 0 0 1-.743 1.183Z"/></svg>
</template>

CSS

.icon-folder-type-vscode-opened {
  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%2032%2032%22%3E%3Cpath%20fill%3D%22%237bb4db%22%20d%3D%22M27.4%205.5h-9.2l-2.1%204.2H4.3v4H.5l3.8%2012.8h25.2v-21Zm-7.2%202.1h7.1v2.1h-8.1Zm5.5%206.1H6.6v-1.9h20.8v7.626Z%22%2F%3E%3Cpath%20fill%3D%22%230065a9%22%20d%3D%22m30.257%2012.333l-4.324-2.082a1.31%201.31%200%200%200-1.492.253L10.285%2023.411a.875.875%200%200%200-.057%201.236l.057.057l1.157%201.052a.87.87%200%200%200%201.116.049l17.049-12.932a.868.868%200%200%201%201.393.692v-.05a1.31%201.31%200%200%200-.743-1.182%22%2F%3E%3Cpath%20fill%3D%22%23007acc%22%20d%3D%22m30.257%2028.788l-4.324%202.082a1.31%201.31%200%200%201-1.492-.253L10.285%2017.71a.875.875%200%200%201-.057-1.236l.057-.057l1.157-1.052a.87.87%200%200%201%201.116-.049l17.049%2012.932A.868.868%200%200%200%2031%2027.556v.05a1.31%201.31%200%200%201-.743%201.182%22%2F%3E%3Cpath%20fill%3D%22%231f9cf0%22%20d%3D%22M25.933%2030.871a1.31%201.31%200%200%201-1.491-.254a.768.768%200%200%200%201.311-.543V11.047a.768.768%200%200%200-1.311-.543a1.31%201.31%200%200%201%201.491-.254l4.324%202.079A1.31%201.31%200%200%201%2031%2013.512v14.1a1.31%201.31%200%200%201-.743%201.183Z%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%2032%2032%22%3E%3Cpath%20fill%3D%22%237bb4db%22%20d%3D%22M27.4%205.5h-9.2l-2.1%204.2H4.3v4H.5l3.8%2012.8h25.2v-21Zm-7.2%202.1h7.1v2.1h-8.1Zm5.5%206.1H6.6v-1.9h20.8v7.626Z%22%2F%3E%3Cpath%20fill%3D%22%230065a9%22%20d%3D%22m30.257%2012.333l-4.324-2.082a1.31%201.31%200%200%200-1.492.253L10.285%2023.411a.875.875%200%200%200-.057%201.236l.057.057l1.157%201.052a.87.87%200%200%200%201.116.049l17.049-12.932a.868.868%200%200%201%201.393.692v-.05a1.31%201.31%200%200%200-.743-1.182%22%2F%3E%3Cpath%20fill%3D%22%23007acc%22%20d%3D%22m30.257%2028.788l-4.324%202.082a1.31%201.31%200%200%201-1.492-.253L10.285%2017.71a.875.875%200%200%201-.057-1.236l.057-.057l1.157-1.052a.87.87%200%200%201%201.116-.049l17.049%2012.932A.868.868%200%200%200%2031%2027.556v.05a1.31%201.31%200%200%201-.743%201.182%22%2F%3E%3Cpath%20fill%3D%22%231f9cf0%22%20d%3D%22M25.933%2030.871a1.31%201.31%200%200%201-1.491-.254a.768.768%200%200%200%201.311-.543V11.047a.768.768%200%200%200-1.311-.543a1.31%201.31%200%200%201%201.491-.254l4.324%202.079A1.31%201.31%200%200%201%2031%2013.512v14.1a1.31%201.31%200%200%201-.743%201.183Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/vscode-icons/folder-type-vscode-opened.svg?color=%231a73e8&size=48