Skip to content
Cuelark UI

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

Devicons · DiCompass

Compass icon

A free compass icon from Devicons, 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
MIT license
Project
vorillaz.github.io
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/devicons/compass.json
components/icons/devicons-compass.tsx
import * as React from "react";

/**
 * Compass from Devicons (https://vorillaz.github.io/devicons/), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/devicons/compass. Sized in em, colored by currentColor.
 */
export function DiCompassIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1.1"
      viewBox="0 0 32 32"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M20.516 5c-3.913 0.636-8.034 1.798-10.55 2.973-2.821 1.314-4.743 3.581-5.683 6.706-0.304 1.051-0.36 1.507-0.36 2.904-0.014 3.263 1.12 5.821 3.526 8.020 1.977 1.797 4.397 2.724 7.149 2.724 4.19 0 7.868-2.254 9.61-5.89 1.563-3.263 3.028-9.264 3.581-14.602 0.29-2.893 0.363-3.469 0.206-3.57-0.052-0.034-0.13-0.015-0.234-0.011-0.207 0-6.333 0.539-7.246 0.747zM14.792 11.596c0.041 0.18 0.152 1.245 0.249 2.392 0.083 1.134 0.18 2.102 0.193 2.13 0.028 0.028 0.429-0.304 0.899-0.733 1.12-1.051 2.296-1.922 2.475-1.853 0.207 0.069-0.512 1.092-1.687 2.392l-0.996 1.106 1.728 0.083c4.162 0.207 4.397 0.691 0.47 0.982l-2.115 0.152 1.037 1.189c1.161 1.314 1.784 2.184 1.659 2.309-0.111 0.111-1.106-0.595-2.378-1.715l-1.106-0.968-0.166 2.102c-0.166 2.157-0.373 3.097-0.595 2.71-0.152-0.29-0.415-2.669-0.415-3.872 0-0.526-0.055-0.968-0.111-0.968s-0.332 0.221-0.595 0.498c-0.996 1.037-2.89 2.447-2.89 2.157 0-0.235 0.761-1.258 1.742-2.337l0.996-1.092-2.102-0.166c-2.281-0.194-2.848-0.277-2.848-0.442 0-0.263 1.936-0.539 3.706-0.553 0.622 0 1.134-0.042 1.134-0.111 0-0.055-0.442-0.594-0.968-1.203-2.392-2.724-2.060-3.028 0.664-0.622 0.608 0.525 1.148 0.968 1.189 0.968s0.083-0.456 0.083-1.009c0-1.037 0.207-3.111 0.346-3.568 0.111-0.36 0.29-0.332 0.401 0.041z"
      />
    </svg>
  );
}
With react-icons
import { DiCompass } from "react-icons/di";

export function Example() {
  return <DiCompass className="size-5" />;
}
compass.svg
<svg
  version="1.1"
  viewBox="0 0 32 32"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M20.516 5c-3.913 0.636-8.034 1.798-10.55 2.973-2.821 1.314-4.743 3.581-5.683 6.706-0.304 1.051-0.36 1.507-0.36 2.904-0.014 3.263 1.12 5.821 3.526 8.020 1.977 1.797 4.397 2.724 7.149 2.724 4.19 0 7.868-2.254 9.61-5.89 1.563-3.263 3.028-9.264 3.581-14.602 0.29-2.893 0.363-3.469 0.206-3.57-0.052-0.034-0.13-0.015-0.234-0.011-0.207 0-6.333 0.539-7.246 0.747zM14.792 11.596c0.041 0.18 0.152 1.245 0.249 2.392 0.083 1.134 0.18 2.102 0.193 2.13 0.028 0.028 0.429-0.304 0.899-0.733 1.12-1.051 2.296-1.922 2.475-1.853 0.207 0.069-0.512 1.092-1.687 2.392l-0.996 1.106 1.728 0.083c4.162 0.207 4.397 0.691 0.47 0.982l-2.115 0.152 1.037 1.189c1.161 1.314 1.784 2.184 1.659 2.309-0.111 0.111-1.106-0.595-2.378-1.715l-1.106-0.968-0.166 2.102c-0.166 2.157-0.373 3.097-0.595 2.71-0.152-0.29-0.415-2.669-0.415-3.872 0-0.526-0.055-0.968-0.111-0.968s-0.332 0.221-0.595 0.498c-0.996 1.037-2.89 2.447-2.89 2.157 0-0.235 0.761-1.258 1.742-2.337l0.996-1.092-2.102-0.166c-2.281-0.194-2.848-0.277-2.848-0.442 0-0.263 1.936-0.539 3.706-0.553 0.622 0 1.134-0.042 1.134-0.111 0-0.055-0.442-0.594-0.968-1.203-2.392-2.724-2.060-3.028 0.664-0.622 0.608 0.525 1.148 0.968 1.189 0.968s0.083-0.456 0.083-1.009c0-1.037 0.207-3.111 0.346-3.568 0.111-0.36 0.29-0.332 0.401 0.041z"
  />
</svg>
Attribution
"Compass" icon from Devicons (https://vorillaz.github.io/devicons/), licensed under MIT license.

Compass icon in other sets