Skip to content
Cuelark UI

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

VS Code Icons · VscCompassDot

Compass Dot icon

A free compass 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.

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/compass-dot.json
components/icons/vscode-codicons-compass-dot.tsx
import * as React from "react";

/**
 * Compass Dot from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/compass-dot. Sized in em, colored by currentColor.
 */
export function VscCompassDotIcon(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="M10.91 9.60049C10.9 9.58049 10.89 9.55049 10.88 9.53049L9.88 7.60049C9.54 6.97049 9.02 6.44049 8.38 6.11049L6.47 5.12049C5.61 4.68049 4.68 5.61049 5.12 6.47049L6.11 8.38049C6.44 9.02049 6.97 9.54049 7.6 9.88049L9.53 10.8805C9.55 10.8905 9.58 10.9005 9.6 10.9105C9.92 10.3705 10.37 9.92049 10.91 9.60049ZM8.07 8.99049C7.61 8.75049 7.24 8.38049 7 7.92049L6.01 6.01049L7.92 7.00049C8.38 7.24049 8.75 7.61049 8.99 8.07049L9.99 9.99049L8.07 8.99049Z"
      />
      <path
        d="M8 14.0005C4.69 14.0005 2 11.3105 2 8.00049C2 4.69049 4.69 2.00049 8 2.00049C11.31 2.00049 14 4.69049 14 8.00049C14 8.38049 13.97 8.75049 13.9 9.10049C14.24 9.18049 14.56 9.30049 14.85 9.46049C14.95 8.99049 15 8.50049 15 8.00049C15 4.13049 11.87 1.00049 8 1.00049C4.13 1.00049 1 4.13049 1 8.00049C1 11.8705 4.13 15.0005 8 15.0005C8.5 15.0005 8.99 14.9505 9.46 14.8505C9.3 14.5605 9.18 14.2405 9.1 13.9005C8.75 13.9705 8.38 14.0005 8 14.0005Z"
      />
      <path
        d="M13 16.0005C14.6569 16.0005 16 14.6573 16 13.0005C16 11.3436 14.6569 10.0005 13 10.0005C11.3431 10.0005 10 11.3436 10 13.0005C10 14.6573 11.3431 16.0005 13 16.0005Z"
      />
    </svg>
  );
}
With react-icons
import { VscCompassDot } from "react-icons/vsc";

export function Example() {
  return <VscCompassDot className="size-5" />;
}
compass-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="M10.91 9.60049C10.9 9.58049 10.89 9.55049 10.88 9.53049L9.88 7.60049C9.54 6.97049 9.02 6.44049 8.38 6.11049L6.47 5.12049C5.61 4.68049 4.68 5.61049 5.12 6.47049L6.11 8.38049C6.44 9.02049 6.97 9.54049 7.6 9.88049L9.53 10.8805C9.55 10.8905 9.58 10.9005 9.6 10.9105C9.92 10.3705 10.37 9.92049 10.91 9.60049ZM8.07 8.99049C7.61 8.75049 7.24 8.38049 7 7.92049L6.01 6.01049L7.92 7.00049C8.38 7.24049 8.75 7.61049 8.99 8.07049L9.99 9.99049L8.07 8.99049Z"
  />
  <path
    d="M8 14.0005C4.69 14.0005 2 11.3105 2 8.00049C2 4.69049 4.69 2.00049 8 2.00049C11.31 2.00049 14 4.69049 14 8.00049C14 8.38049 13.97 8.75049 13.9 9.10049C14.24 9.18049 14.56 9.30049 14.85 9.46049C14.95 8.99049 15 8.50049 15 8.00049C15 4.13049 11.87 1.00049 8 1.00049C4.13 1.00049 1 4.13049 1 8.00049C1 11.8705 4.13 15.0005 8 15.0005C8.5 15.0005 8.99 14.9505 9.46 14.8505C9.3 14.5605 9.18 14.2405 9.1 13.9005C8.75 13.9705 8.38 14.0005 8 14.0005Z"
  />
  <path
    d="M13 16.0005C14.6569 16.0005 16 14.6573 16 13.0005C16 11.3436 14.6569 10.0005 13 10.0005C11.3431 10.0005 10 11.3436 10 13.0005C10 14.6573 11.3431 16.0005 13 16.0005Z"
  />
</svg>
Attribution
"Compass Dot" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: