Should a copy button use cursor: copy?

No. A copy-to-clipboard button is a normal button: use pointer, and show a 'Copied' message after the click.

How do I show the copy cursor during native drag and drop?

Call event.preventDefault() in dragover and set event.dataTransfer.dropEffect = 'copy'. The system then draws its copy cursor.

What does the macOS copy cursor look like?

The arrow with a small green circle and a white plus.

cursor: copy in CSS: the plus-badge drag cursor

cursor: copy; 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 copy.

What it shows

An arrow with a plus badge. Windows has no system role for it, so browsers ship their own. macOS uses its Drag copy cursor, an arrow with a green plus badge.

Usage

When to use it

Use it for

Drags that duplicate: a template into a page, an item into a second list, a block onto a canvas.
While a modifier key is held during a drag (Ctrl on Windows, Option on Mac) and the drop will copy instead of move.
Component palettes in page builders, where dragging a component out never removes it from the palette.

Avoid it for

Copy-to-clipboard buttons. They are buttons; use pointer and confirm the copy with a short message.
Drops that move the item.

Code

Copy the snippet

CSS

.palette-item { cursor: copy; }

HTML

<ul class="palette">
  <li class="palette-item">Heading block</li>
  <li class="palette-item">Image block</li>
</ul>

Support

Browsers and systems

Browser support for copy
Browser	Support
Chrome	1
Edge	12
Firefox	1.5
Safari	3
Safari on iOS	no
Chrome on Android	18

The matching operating system cursor
System	Matching cursor
Windows role	none (browser-supplied)
Windows file	`none`
macOS	Drag copy

Watch out

Gotchas

With the HTML Drag and Drop API, the system draws the drag cursor. Set dataTransfer.dropEffect = 'copy' in dragover.
People read copy as a drag state. Do not use it to mean 'click to copy this text'.

FAQ

Questions

Should a copy button use cursor: copy?: No. A copy-to-clipboard button is a normal button: use pointer, and show a 'Copied' message after the click.
How do I show the copy cursor during native drag and drop?: Call event.preventDefault() in dragover and set event.dataTransfer.dropEffect = 'copy'. The system then draws its copy cursor.
What does the macOS copy cursor look like?: The arrow with a small green circle and a white plus.

More