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

Radix Icons · RxCrosshair1

Crosshair1 icon

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

License: MIT license
Project: icons.radix-ui.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/crosshair1.json

components/icons/radix-crosshair1.tsx

import * as React from "react";

/**
 * Crosshair1 from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/crosshair1. Sized in em, colored by currentColor.
 */
export function RxCrosshair1Icon(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="M7.50208 0.877045C11.1606 0.877256 14.1269 3.84347 14.1271 7.50204C14.1269 11.1606 11.1606 14.1268 7.50208 14.127C3.8435 14.1268 0.877286 11.1606 0.877075 7.50204C0.877285 3.84347 3.8435 0.877256 7.50208 0.877045ZM8.00012 4.50009C8.00007 4.77616 7.77619 5.00004 7.50012 5.00009C7.22401 5.00009 7.00017 4.77619 7.00012 4.50009V1.8497C4.26672 2.08955 2.08958 4.26669 1.84973 7.00009H4.50012C4.77622 7.00014 5.00012 7.22398 5.00012 7.50009C5.00007 7.77616 4.77619 8.00004 4.50012 8.00009H1.84973C2.08769 10.7354 4.26533 12.9135 7.00012 13.1534V10.5001C7.00012 10.2239 7.22398 10.0001 7.50012 10.0001C7.77622 10.0001 8.00012 10.224 8.00012 10.5001V13.1534C10.7368 12.9153 12.9164 10.7368 13.1544 8.00009H10.5001C10.224 8.00009 10.0002 7.77619 10.0001 7.50009C10.0001 7.22395 10.224 7.00009 10.5001 7.00009H13.1534C12.9135 4.26527 10.7355 2.08665 8.00012 1.84872V4.50009Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

import { RxCrosshair1 } from "react-icons/rx";

export function Example() {
  return <RxCrosshair1 className="size-5" />;
}

crosshair1.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="M7.50208 0.877045C11.1606 0.877256 14.1269 3.84347 14.1271 7.50204C14.1269 11.1606 11.1606 14.1268 7.50208 14.127C3.8435 14.1268 0.877286 11.1606 0.877075 7.50204C0.877285 3.84347 3.8435 0.877256 7.50208 0.877045ZM8.00012 4.50009C8.00007 4.77616 7.77619 5.00004 7.50012 5.00009C7.22401 5.00009 7.00017 4.77619 7.00012 4.50009V1.8497C4.26672 2.08955 2.08958 4.26669 1.84973 7.00009H4.50012C4.77622 7.00014 5.00012 7.22398 5.00012 7.50009C5.00007 7.77616 4.77619 8.00004 4.50012 8.00009H1.84973C2.08769 10.7354 4.26533 12.9135 7.00012 13.1534V10.5001C7.00012 10.2239 7.22398 10.0001 7.50012 10.0001C7.77622 10.0001 8.00012 10.224 8.00012 10.5001V13.1534C10.7368 12.9153 12.9164 10.7368 13.1544 8.00009H10.5001C10.224 8.00009 10.0002 7.77619 10.0001 7.50009C10.0001 7.22395 10.224 7.00009 10.5001 7.00009H13.1534C12.9135 4.26527 10.7355 2.08665 8.00012 1.84872V4.50009Z"
    fill="currentColor"
  />
</svg>

Attribution

"Crosshair1" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Similar Radix Icons icons