CSS Cursor Not Working with SVG Image(Video)

Last updated on January 4, 2022
CSS Cursor Not Working with SVG Image

CSS can replace the cursor with a custom image on your website using magic codes.

body { cursor: url(your-image-url.svg), auto; }

Why CSS Cursor Not Working

But sometimes, the SVG image always does not work. Judging from our experience of receiving dozens of customer requests, it is mostly caused by the image size. In the browser, the limited cursor size is 128×128px. Larger cursor images are ignored.

How to resize an SVG image size?

As we know, SVG format files cannot be edited directly like other images (PNG, JPG) on an image editor. Please edit SVG files with a Text editor, even a basic pure Text editor.

  • Open the SVG with a Text editor.
  • Change the number in the width=”xx” height=”xx” in tag SVG (please use number only, don’t add the unit). Save the SVG file.

Video guide

Icon WordPress Customization Service from $49 Only!
Save your expensive time!

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!