Custom Mouse in CSS/HTML

Hi! I have a project that I am working on, and I am trying to add a custom SVG mouse, and it is not working! Here is my code:

body {
     cursor: url(https://cdn.glitch.global/e81c4907-6f88-420e-b3c9-c12caf796254/mouse.svg?v=1738262511998) 
}

What am I doing wrong?

Thanks in advance :slight_smile:

As this needs to act as “a real image”, remember to set actual pixel size values for width and height, rather than leaving things in dimensionless “SVG units”. Also probably clean that SVG up using an SVG optimizer because there’s a bunch of “might make sense in an editor, or project file, but not in a finalized SVG” like having the path on a layer that uses “huge numbers” which are then translated back to small numbers using a transform on the layer, or having generator-specific properties like that data-paper-data attribute =)

(Usually, applications have a separate “export for web” or similarly named operation for only saving “plain” SVG rather than project-specific files)

That said: SVG for cursors is really finicky, and rendering an SVG that small pretty much negates any benefit you get from vector graphics, so just exporting it to a 16x16px image with transparency and using that image instead is nearly always a better choice

A non-URL fallback (one or more of the keyword values) must be at the end of the fallback list.

works with

body {
     cursor: url(https://cdn.glitch.global/e81c4907-6f88-420e-b3c9-c12caf796254/mouse.svg?v=1738262511998), auto
}

“, auto” added

2 Likes

Thanks! That worked :slight_smile:

1 Like