Skip to content
Cuelark UI

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

VS Code Icons · VscLayersDot

Layers Dot icon

A free layers dot 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 asstack icondepth iconlevels 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/layers-dot.json
components/icons/vscode-codicons-layers-dot.tsx
import * as React from "react";

/**
 * Layers Dot from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/layers-dot. Sized in em, colored by currentColor.
 */
export function VscLayersDotIcon(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="M2.486 5.854L7.486 8.855C7.643 8.948 7.819 8.997 8 8.997C8.181 8.997 8.357 8.948 8.513 8.854L13.513 5.855C13.812 5.676 13.999 5.346 13.999 4.997C13.999 4.648 13.813 4.32 13.513 4.14L8.517 1.142C8.207 0.952 7.789 0.954 7.486 1.14L2.486 4.139C2.187 4.318 2 4.648 2 4.997C2 5.346 2.186 5.675 2.486 5.854ZM8 1.997L13 4.997L8 7.997L3 4.997L8 1.997ZM13.854 6.984L8 10.497L2.146 6.984C2.054 7.137 2 7.313 2 7.497C2 7.847 2.187 8.176 2.486 8.354L7.486 11.355C7.642 11.448 7.819 11.497 8 11.497C8.181 11.497 8.357 11.448 8.514 11.354L9.868 10.542C10.468 9.779 11.33 9.238 12.326 9.068L13.514 8.355C13.814 8.175 14 7.846 14 7.497C14 7.314 13.946 7.138 13.854 6.984ZM8 12.997L2.146 9.484C2.054 9.637 2 9.813 2 9.997C2 10.347 2.187 10.676 2.486 10.854L7.486 13.855C7.642 13.948 7.819 13.997 8 13.997C8.181 13.997 8.357 13.948 8.514 13.854L9.054 13.53C9.03 13.355 9 13.181 9 12.999C9 12.779 9.031 12.568 9.065 12.357L8 12.997Z"
      />
      <path
        d="M13 16C14.6569 16 16 14.6569 16 13C16 11.3431 14.6569 10 13 10C11.3431 10 10 11.3431 10 13C10 14.6569 11.3431 16 13 16Z"
      />
    </svg>
  );
}
With react-icons
import { VscLayersDot } from "react-icons/vsc";

export function Example() {
  return <VscLayersDot className="size-5" />;
}
layers-dot.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="M2.486 5.854L7.486 8.855C7.643 8.948 7.819 8.997 8 8.997C8.181 8.997 8.357 8.948 8.513 8.854L13.513 5.855C13.812 5.676 13.999 5.346 13.999 4.997C13.999 4.648 13.813 4.32 13.513 4.14L8.517 1.142C8.207 0.952 7.789 0.954 7.486 1.14L2.486 4.139C2.187 4.318 2 4.648 2 4.997C2 5.346 2.186 5.675 2.486 5.854ZM8 1.997L13 4.997L8 7.997L3 4.997L8 1.997ZM13.854 6.984L8 10.497L2.146 6.984C2.054 7.137 2 7.313 2 7.497C2 7.847 2.187 8.176 2.486 8.354L7.486 11.355C7.642 11.448 7.819 11.497 8 11.497C8.181 11.497 8.357 11.448 8.514 11.354L9.868 10.542C10.468 9.779 11.33 9.238 12.326 9.068L13.514 8.355C13.814 8.175 14 7.846 14 7.497C14 7.314 13.946 7.138 13.854 6.984ZM8 12.997L2.146 9.484C2.054 9.637 2 9.813 2 9.997C2 10.347 2.187 10.676 2.486 10.854L7.486 13.855C7.642 13.948 7.819 13.997 8 13.997C8.181 13.997 8.357 13.948 8.514 13.854L9.054 13.53C9.03 13.355 9 13.181 9 12.999C9 12.779 9.031 12.568 9.065 12.357L8 12.997Z"
  />
  <path
    d="M13 16C14.6569 16 16 14.6569 16 13C16 11.3431 14.6569 10 13 10C11.3431 10 10 11.3431 10 13C10 14.6569 11.3431 16 13 16Z"
  />
</svg>
Attribution
"Layers Dot" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: stack, depth, levels