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

VS Code Icons · VscVscodeOutline

Vscode Outline icon

A free vscode outline 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.

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/vscode-outline.json

components/icons/vscode-codicons-vscode-outline.tsx

import * as React from "react";

/**
 * Vscode Outline from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/vscode-outline. Sized in em, colored by currentColor.
 */
export function VscVscodeOutlineIcon(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="M12.2002 2.97067C12.3402 2.8507 12.5497 2.83088 12.7197 2.92087C12.8896 3.01082 12.9999 3.18024 13 3.37009V12.6308C12.9998 12.8207 12.8896 13.0001 12.7197 13.08C12.6498 13.11 12.58 13.1308 12.5 13.1308C12.39 13.1308 12.2902 13.1002 12.2002 13.0302L6.08984 8.40036C5.95988 8.30036 5.88965 8.15995 5.88965 7.99997C5.88979 7.84018 5.97001 7.69048 6.08984 7.60055L12.2002 2.97067ZM7.21973 7.99997L12 11.6201V4.38083L7.21973 7.99997Z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M11 0.350554C11.32 0.0305537 11.8802 -0.0296026 12.2002 0.190397L12.6201 0.390593C12.6584 0.390649 12.7149 0.417502 12.7197 0.41989L14.7305 1.39059C14.7403 1.40015 14.75 1.40036 14.75 1.40036L15.4297 1.73044H15.4404C15.7901 1.89049 16.0096 2.24015 16.0098 2.62985V13.3701C16.0098 13.75 15.7903 14.1104 15.4404 14.2705L12.1504 15.8603C12.0004 15.9303 11.8297 15.9502 11.7197 15.9502C11.4598 15.9501 11.1995 15.8401 11.0195 15.6601L4.70996 9.91989L1.95996 12C1.69997 12.19 1.30985 12.1604 1.08984 11.9404L0.219727 11.1601C0.059832 10.9702 0 10.8201 0 10.6601C1.22464e-05 10.6 0.0202612 10.3703 0.200195 10.1904L2.58984 7.99997L0.209961 5.83005C0.0100442 5.63007 0 5.3998 0 5.33981C9.8004e-05 5.18993 0.0602551 5.03025 0.160156 4.90036L1.11035 4.04001C1.29048 3.85024 1.70031 3.81006 1.9502 3.99997L4.7002 6.08981L11 0.350554ZM5.05957 7.08981C4.87957 7.24976 4.6099 7.26007 4.41992 7.12008L1.55957 4.95993L1.15039 5.33005L3.66992 7.62008C3.76992 7.72008 3.83008 7.8502 3.83008 7.9902C3.83007 8.13019 3.76992 8.27032 3.66992 8.36032L1.15039 10.6601L1.57031 11.0302L4.42969 8.87008C4.51969 8.80009 4.62047 8.77048 4.73047 8.77048C4.85031 8.77058 4.97044 8.81048 5.07031 8.90036L11.7002 14.9404L12.2803 14.6806L15 13.3701V2.62985L12.2803 1.33005C12.2709 1.33005 12.2435 1.31265 12.2402 1.31051L11.7002 1.04977L5.05957 7.08981Z"
      />
    </svg>
  );
}

With react-icons

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

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

vscode-outline.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="M12.2002 2.97067C12.3402 2.8507 12.5497 2.83088 12.7197 2.92087C12.8896 3.01082 12.9999 3.18024 13 3.37009V12.6308C12.9998 12.8207 12.8896 13.0001 12.7197 13.08C12.6498 13.11 12.58 13.1308 12.5 13.1308C12.39 13.1308 12.2902 13.1002 12.2002 13.0302L6.08984 8.40036C5.95988 8.30036 5.88965 8.15995 5.88965 7.99997C5.88979 7.84018 5.97001 7.69048 6.08984 7.60055L12.2002 2.97067ZM7.21973 7.99997L12 11.6201V4.38083L7.21973 7.99997Z"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M11 0.350554C11.32 0.0305537 11.8802 -0.0296026 12.2002 0.190397L12.6201 0.390593C12.6584 0.390649 12.7149 0.417502 12.7197 0.41989L14.7305 1.39059C14.7403 1.40015 14.75 1.40036 14.75 1.40036L15.4297 1.73044H15.4404C15.7901 1.89049 16.0096 2.24015 16.0098 2.62985V13.3701C16.0098 13.75 15.7903 14.1104 15.4404 14.2705L12.1504 15.8603C12.0004 15.9303 11.8297 15.9502 11.7197 15.9502C11.4598 15.9501 11.1995 15.8401 11.0195 15.6601L4.70996 9.91989L1.95996 12C1.69997 12.19 1.30985 12.1604 1.08984 11.9404L0.219727 11.1601C0.059832 10.9702 0 10.8201 0 10.6601C1.22464e-05 10.6 0.0202612 10.3703 0.200195 10.1904L2.58984 7.99997L0.209961 5.83005C0.0100442 5.63007 0 5.3998 0 5.33981C9.8004e-05 5.18993 0.0602551 5.03025 0.160156 4.90036L1.11035 4.04001C1.29048 3.85024 1.70031 3.81006 1.9502 3.99997L4.7002 6.08981L11 0.350554ZM5.05957 7.08981C4.87957 7.24976 4.6099 7.26007 4.41992 7.12008L1.55957 4.95993L1.15039 5.33005L3.66992 7.62008C3.76992 7.72008 3.83008 7.8502 3.83008 7.9902C3.83007 8.13019 3.76992 8.27032 3.66992 8.36032L1.15039 10.6601L1.57031 11.0302L4.42969 8.87008C4.51969 8.80009 4.62047 8.77048 4.73047 8.77048C4.85031 8.77058 4.97044 8.81048 5.07031 8.90036L11.7002 14.9404L12.2803 14.6806L15 13.3701V2.62985L12.2803 1.33005C12.2709 1.33005 12.2435 1.31265 12.2402 1.31051L11.7002 1.04977L5.05957 7.08981Z"
  />
</svg>

Attribution

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

Related icons:

Similar VS Code Icons icons