Hover the icon or press Play. Suggested motion: write. Pick another to preview it and update the animated code:

VS Code Icons · VscRootFolderOpened

Root Folder Opened icon

A free root folder opened icon from VS Code Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known asdirectory icon files icon archive icon collection icon

License: CC BY 4.0 license
Project: github.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/root-folder-opened.json

components/icons/vscode-codicons-root-folder-opened.tsx

import * as React from "react";

/**
 * Root Folder Opened from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/root-folder-opened. Sized in em, colored by currentColor.
 */
export function VscRootFolderOpenedIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M12.9579 6.04035C12.7426 4.87867 11.7238 4 10.5 4H7.20702L5.64602 2.439C5.36502 2.158 4.98302 2 4.58502 2H3.49902C2.11802 2 0.999023 3.119 0.999023 4.5V7.261C1.30602 7.007 1.64202 6.79 1.99902 6.607V4.5C1.99902 3.672 2.67102 3 3.49902 3H4.58502C4.71802 3 4.84502 3.053 4.93902 3.146L6.64602 4.853C6.74002 4.947 6.86702 4.999 7.00002 4.999H10.5C11.153 4.999 11.709 5.416 11.915 5.999H5.52202C5.44599 5.999 5.37323 6.01206 5.30034 6.02515C5.25915 6.03254 5.21791 6.03994 5.17602 6.045C6.08902 6.158 6.93302 6.494 7.65202 6.999H12.496C13.651 6.999 14.372 8.249 13.795 9.249L12.21 11.994C11.853 12.613 11.192 12.994 10.478 12.994H9.78702C9.68802 13.343 9.55602 13.677 9.39402 13.994H10.477C11.549 13.994 12.539 13.422 13.075 12.494L14.66 9.749C15.5427 8.22058 14.6037 6.34143 12.9579 6.04035Z"
      />
      <path
        d="M4.5 14C5.881 14 7 12.881 7 11.5C7 10.119 5.881 9 4.5 9C3.119 9 2 10.119 2 11.5C2 12.881 3.119 14 4.5 14Z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M0 11.5C0 9.019 2.019 7 4.5 7C6.981 7 9 9.019 9 11.5C9 13.981 6.981 16 4.5 16C2.019 16 0 13.981 0 11.5ZM1 11.5C1 13.43 2.57 15 4.5 15C6.43 15 8 13.43 8 11.5C8 9.57 6.43 8 4.5 8C2.57 8 1 9.57 1 11.5Z"
      />
    </svg>
  );
}

With react-icons

import { VscRootFolderOpened } from "react-icons/vsc";

export function Example() {
  return <VscRootFolderOpened className="size-5" />;
}

root-folder-opened.svg

<svg
  viewBox="0 0 16 16"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M12.9579 6.04035C12.7426 4.87867 11.7238 4 10.5 4H7.20702L5.64602 2.439C5.36502 2.158 4.98302 2 4.58502 2H3.49902C2.11802 2 0.999023 3.119 0.999023 4.5V7.261C1.30602 7.007 1.64202 6.79 1.99902 6.607V4.5C1.99902 3.672 2.67102 3 3.49902 3H4.58502C4.71802 3 4.84502 3.053 4.93902 3.146L6.64602 4.853C6.74002 4.947 6.86702 4.999 7.00002 4.999H10.5C11.153 4.999 11.709 5.416 11.915 5.999H5.52202C5.44599 5.999 5.37323 6.01206 5.30034 6.02515C5.25915 6.03254 5.21791 6.03994 5.17602 6.045C6.08902 6.158 6.93302 6.494 7.65202 6.999H12.496C13.651 6.999 14.372 8.249 13.795 9.249L12.21 11.994C11.853 12.613 11.192 12.994 10.478 12.994H9.78702C9.68802 13.343 9.55602 13.677 9.39402 13.994H10.477C11.549 13.994 12.539 13.422 13.075 12.494L14.66 9.749C15.5427 8.22058 14.6037 6.34143 12.9579 6.04035Z"
  />
  <path
    d="M4.5 14C5.881 14 7 12.881 7 11.5C7 10.119 5.881 9 4.5 9C3.119 9 2 10.119 2 11.5C2 12.881 3.119 14 4.5 14Z"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M0 11.5C0 9.019 2.019 7 4.5 7C6.981 7 9 9.019 9 11.5C9 13.981 6.981 16 4.5 16C2.019 16 0 13.981 0 11.5ZM1 11.5C1 13.43 2.57 15 4.5 15C6.43 15 8 13.43 8 11.5C8 9.57 6.43 8 4.5 8C2.57 8 1 9.57 1 11.5Z"
  />
</svg>

Attribution

"Root Folder Opened" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: directory, files, archive, collection

Similar VS Code Icons icons