Skip to content
Cuelark UI

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

Radix Icons · RxCursorArrow

Cursor Arrow icon

A free cursor arrow icon from Radix 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 asdirection iconpointer iconnavigate iconnext iconmove iconchevron iconcaret iconangle icon
License
MIT license
Project
icons.radix-ui.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/cursor-arrow.json
components/icons/radix-cursor-arrow.tsx
import * as React from "react";

/**
 * Cursor Arrow from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/cursor-arrow. Sized in em, colored by currentColor.
 */
export function RxCursorArrowIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 15 15"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M3.29199 0.0488633C3.46998 -0.0324273 3.67922 -0.00204229 3.82715 0.126012L12.8584 7.95023C13.013 8.08416 13.0709 8.29901 13.0039 8.49222C12.9367 8.68544 12.7581 8.81898 12.5537 8.82816L9.21875 8.97464L11.1504 13.2188C11.2648 13.4701 11.1536 13.7664 10.9023 13.8809L8.75 14.8614C8.4989 14.9756 8.2025 14.8652 8.08789 14.6143L6.15234 10.3692L3.8623 12.7852C3.72148 12.9337 3.50454 12.9821 3.31445 12.9063C3.12448 12.8304 3 12.646 3 12.4414V0.503941L3.00488 0.431676C3.02912 0.26538 3.13621 0.120068 3.29199 0.0488633ZM4 11.1875L5.93848 9.14457L5.9834 9.10257C6.09412 9.0115 6.23945 8.97131 6.38281 8.99515C6.54677 9.02255 6.6869 9.13004 6.75586 9.28129L8.79004 13.7432L10.0332 13.1778L8.00195 8.71488C7.93331 8.56388 7.94376 8.38861 8.03027 8.24711C8.11701 8.10558 8.26877 8.01628 8.43457 8.00882L11.2549 7.88382L4 1.59769V11.1875Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxCursorArrow } from "react-icons/rx";

export function Example() {
  return <RxCursorArrow className="size-5" />;
}
cursor-arrow.svg
<svg
  fill="none"
  viewBox="0 0 15 15"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M3.29199 0.0488633C3.46998 -0.0324273 3.67922 -0.00204229 3.82715 0.126012L12.8584 7.95023C13.013 8.08416 13.0709 8.29901 13.0039 8.49222C12.9367 8.68544 12.7581 8.81898 12.5537 8.82816L9.21875 8.97464L11.1504 13.2188C11.2648 13.4701 11.1536 13.7664 10.9023 13.8809L8.75 14.8614C8.4989 14.9756 8.2025 14.8652 8.08789 14.6143L6.15234 10.3692L3.8623 12.7852C3.72148 12.9337 3.50454 12.9821 3.31445 12.9063C3.12448 12.8304 3 12.646 3 12.4414V0.503941L3.00488 0.431676C3.02912 0.26538 3.13621 0.120068 3.29199 0.0488633ZM4 11.1875L5.93848 9.14457L5.9834 9.10257C6.09412 9.0115 6.23945 8.97131 6.38281 8.99515C6.54677 9.02255 6.6869 9.13004 6.75586 9.28129L8.79004 13.7432L10.0332 13.1778L8.00195 8.71488C7.93331 8.56388 7.94376 8.38861 8.03027 8.24711C8.11701 8.10558 8.26877 8.01628 8.43457 8.00882L11.2549 7.88382L4 1.59769V11.1875Z"
    fill="currentColor"
  />
</svg>
Attribution
"Cursor Arrow" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons: direction, pointer, navigate, next