CSS Cursor pointer with SVG image

by

Your image is simply too large. Reduce the width and height to something less than 128px.

Icon size limits for cursors in CSS | MDN

…the limit of the cursor size is 128×128px. Larger cursor images are ignored.

Example:

cursor: url("data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" ...") 16 16, pointer;


.container {
  width: 50vw;
  height: 50vh;
  background: gold;
  cursor: url("data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox='0 0 512 512'%3e%3cg transform='rotate(45 256 256)'%3e%3crect id='r' x='16' y='216' width="480" height="80" rx='14'/%3e%3cuse href="https://stackoverflow.com/questions/45962081/%23r" transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer;
}
<div class="container"></div>

Edit: Added hotspot (center coordinates) for the cursor (see Dennis Bauszus’ comment)

Leave a Comment