Where is the hotspot of the crosshair cursor?

Where the two lines cross. For your own crosshair in a 32x32 image that is usually 16 16, or 15 15 if your lines sit one pixel to the left and up.

Is crosshair the same as cell?

No. crosshair is thin lines for exact pointing. cell is a thick plus for picking cells in a grid.

Can I change the crosshair's colour?

Not the system one. Draw your own as an SVG or PNG and use cursor: url(cross.svg) 16 16, crosshair; so the system crosshair is the fallback.

cursor: crosshair in CSS: precise pointing

cursor: crosshair; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.

This is the cursor your browser and system draw for crosshair.

What it shows

Windows draws Precision Select (the Crosshair role). The default Windows scheme leaves this role empty and uses an image built into the system. macOS shows its Crosshair cursor.

Usage

When to use it

Use it for

Drawing and selection tools on a canvas: marquee select, crop, shape tools.
Maps and charts where a click drops a pin or reads an exact value.
Screenshot and annotation tools in the browser.
Image focal-point pickers, where people click the part of a photo that must never be cropped.

Avoid it for

Normal links and buttons. A crosshair says 'aim', not 'click to go'.
Large areas of a marketing page as decoration. It makes the page feel like a tool.

Code

Copy the snippet

CSS

.canvas { cursor: crosshair; }

HTML

<div class="canvas" role="img" aria-label="Drawing area">Click to drop a point</div>

Support

Browsers and systems

Browser support for crosshair
Browser	Support
Chrome	1
Edge	12
Firefox	1
Safari	1.2
Safari on iOS	no
Chrome on Android	18

The matching operating system cursor
System	Matching cursor
Windows role	Crosshair
Windows file	`built-in (no file in the default scheme)`
macOS	Crosshair

Watch out

Gotchas

The system crosshair is thin and can vanish on busy photos. If precision matters, draw a high-contrast crosshair with url() and keep crosshair as the fallback.
You will not find an aero crosshair file in C:\Windows\Cursors. The default scheme uses a built-in image for this role.

Free cursors

A custom crosshair cursor

The same cursor from each of our packs, free under CC0. Move your mouse over one to try it, or open it for the .cur file, the PNG and the CSS.

FAQ

Questions

Where is the hotspot of the crosshair cursor?: Where the two lines cross. For your own crosshair in a 32x32 image that is usually 16 16, or 15 15 if your lines sit one pixel to the left and up.
Is crosshair the same as cell?: No. crosshair is thin lines for exact pointing. cell is a thick plus for picking cells in a grid.
Can I change the crosshair's colour?: Not the system one. Draw your own as an SVG or PNG and use cursor: url(cross.svg) 16 16, crosshair; so the system crosshair is the fallback.

More