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

VS Code Icons · VscFileSymlinkDirectory

File Symlink Directory icon

A free file symlink directory 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 asdocument icon page icon paper icon doc icon sheet icon attachment icon paperclip icon attach 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/file-symlink-directory.json

components/icons/vscode-codicons-file-symlink-directory.tsx

import * as React from "react";

/**
 * File Symlink Directory from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/file-symlink-directory. Sized in em, colored by currentColor.
 */
export function VscFileSymlinkDirectoryIcon(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
        fillRule="evenodd"
        clipRule="evenodd"
        d="M1 4.5C1 3.11929 2.11929 2 3.5 2H5.58579C5.98361 2 6.36514 2.15804 6.64645 2.43934L8.20711 4H12.5C13.8807 4 15 5.11929 15 6.5V11.5C15 12.8807 13.8807 14 12.5 14H9V13H12.5C13.3284 13 14 12.3284 14 11.5V6.5C14 5.67157 13.3284 5 12.5 5H8.20711L6.64645 6.56066C6.36514 6.84197 5.98361 7 5.58579 7H1V4.5ZM2 4.5V6H5.58579C5.71839 6 5.84557 5.94732 5.93934 5.85355L7.29289 4.5L5.93934 3.14645C5.84557 3.05268 5.71839 3 5.58579 3H3.5C2.67157 3 2 3.67157 2 4.5Z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M2 8C0.89543 8 0 8.89543 0 10V14C0 15.1046 0.89543 16 2 16H6C7.1046 16 8 15.1046 8 14V10C8 8.89543 7.1046 8 6 8H2ZM2 10.5C2 10.2239 2.2239 10 2.5 10H5.5C5.7761 10 6 10.2239 6 10.5V13.5C6 13.7761 5.7761 14 5.5 14C5.2239 14 5 13.7761 5 13.5V11.7071L2.8536 13.8536C2.6583 14.0488 2.3417 14.0488 2.1464 13.8536C1.95118 13.6583 1.95118 13.3417 2.1464 13.1465L4.2929 11H2.5C2.2239 11 2 10.7761 2 10.5Z"
      />
    </svg>
  );
}

With react-icons

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

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

file-symlink-directory.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
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M1 4.5C1 3.11929 2.11929 2 3.5 2H5.58579C5.98361 2 6.36514 2.15804 6.64645 2.43934L8.20711 4H12.5C13.8807 4 15 5.11929 15 6.5V11.5C15 12.8807 13.8807 14 12.5 14H9V13H12.5C13.3284 13 14 12.3284 14 11.5V6.5C14 5.67157 13.3284 5 12.5 5H8.20711L6.64645 6.56066C6.36514 6.84197 5.98361 7 5.58579 7H1V4.5ZM2 4.5V6H5.58579C5.71839 6 5.84557 5.94732 5.93934 5.85355L7.29289 4.5L5.93934 3.14645C5.84557 3.05268 5.71839 3 5.58579 3H3.5C2.67157 3 2 3.67157 2 4.5Z"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M2 8C0.89543 8 0 8.89543 0 10V14C0 15.1046 0.89543 16 2 16H6C7.1046 16 8 15.1046 8 14V10C8 8.89543 7.1046 8 6 8H2ZM2 10.5C2 10.2239 2.2239 10 2.5 10H5.5C5.7761 10 6 10.2239 6 10.5V13.5C6 13.7761 5.7761 14 5.5 14C5.2239 14 5 13.7761 5 13.5V11.7071L2.8536 13.8536C2.6583 14.0488 2.3417 14.0488 2.1464 13.8536C1.95118 13.6583 1.95118 13.3417 2.1464 13.1465L4.2929 11H2.5C2.2239 11 2 10.7761 2 10.5Z"
  />
</svg>

Attribution

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

Related icons: document, page, paper, doc

Similar VS Code Icons icons