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 · VscCompassActive

Compass Active icon

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

/**
 * Compass Active from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/compass-active. Sized in em, colored by currentColor.
 */
export function VscCompassActiveIcon(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="M10.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.60049C10.9 9.58049 10.89 9.55049 10.88 9.53049ZM8.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
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8 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.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.00049Z"
      />
      <path
        d="M13 10.0005C11.343 10.0005 10 11.3435 10 13.0005C10 14.6575 11.343 16.0005 13 16.0005C14.657 16.0005 16 14.6575 16 13.0005C16 11.3435 14.657 10.0005 13 10.0005ZM14.604 12.6045L12.854 14.3545C12.756 14.4525 12.628 14.5005 12.5 14.5005C12.372 14.5005 12.244 14.4515 12.146 14.3545L11.146 13.3545C10.951 13.1595 10.951 12.8425 11.146 12.6475C11.341 12.4525 11.658 12.4525 11.853 12.6475L12.499 13.2935L13.895 11.8975C14.09 11.7025 14.407 11.7025 14.602 11.8975C14.797 12.0925 14.797 12.4095 14.602 12.6045H14.604Z"
      />
    </svg>
  );
}
With react-icons
import { VscCompassActive } from "react-icons/vsc";

export function Example() {
  return <VscCompassActive className="size-5" />;
}
compass-active.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="M10.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.60049C10.9 9.58049 10.89 9.55049 10.88 9.53049ZM8.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
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M8 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.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.00049Z"
  />
  <path
    d="M13 10.0005C11.343 10.0005 10 11.3435 10 13.0005C10 14.6575 11.343 16.0005 13 16.0005C14.657 16.0005 16 14.6575 16 13.0005C16 11.3435 14.657 10.0005 13 10.0005ZM14.604 12.6045L12.854 14.3545C12.756 14.4525 12.628 14.5005 12.5 14.5005C12.372 14.5005 12.244 14.4515 12.146 14.3545L11.146 13.3545C10.951 13.1595 10.951 12.8425 11.146 12.6475C11.341 12.4525 11.658 12.4525 11.853 12.6475L12.499 13.2935L13.895 11.8975C14.09 11.7025 14.407 11.7025 14.602 11.8975C14.797 12.0925 14.797 12.4095 14.602 12.6045H14.604Z"
  />
</svg>
Attribution
"Compass Active" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: