Imported SVGs for custom cursors have a strange grey outline

I’m trying to import some SVGs I created to use as custom cursors, but every time I do, they end up with a strange grey outline that wasn’t present in the original design. I even tried exporting them as PNGs, but the issue persists. Any ideas on how to fix this?
imported-svgs-for-custom-cursors-have-a-weird-grey-outline-v0-gk8ek36gwdde1

https://graphicdesign.stackexchange.com/a/10869

Noor said:
https://graphicdesign.stackexchange.com/a/10869

This is spot on. If you want sharp cursors, you should draw in pixels rather than using vectors.

Please avoid changing default cursors on your pages.

Eden said:
Please avoid changing default cursors on your pages.

Why shouldn’t I?

Cameron said:

Eden said:
Please avoid changing default cursors on your pages.

Why shouldn’t I?

It’s wild that you’re getting downvoted for just wanting to know.

Cameron said:

Eden said:
Please avoid changing default cursors on your pages.

Why shouldn’t I?

It’s bad user experience. Everyone is used to their own cursor, unless there’s a compelling reason to change it. Figma is an example where it works, but that’s an exception.

@Keller
Especially with a cursor like this. It provides no clear indication of where the pointer is. It seems like a grab cursor.

Cameron said:

Eden said:
Please avoid changing default cursors on your pages.

Why shouldn’t I?

Never change how users expect to interact with devices unless it’s absolutely necessary. It’s Rule 1.

@Vero
But Rule 0 is to make sure it works. Clearly that rules in favor of changing it under the “unless necessary” clause.

Cameron said:

Eden said:
Please avoid changing default cursors on your pages.

Why shouldn’t I?

You’re changing default behaviors that users don’t expect to be changed. This also applies to scrolling and how mouse wheels function.

@Eden
I get that. But other than the cursor issue, I have this problem with every SVG from Figma. Any solutions?

Cameron said:
@Eden
I get that. But other than the cursor issue, I have this problem with every SVG from Figma. Any solutions?

Don’t use SVG. Use Photoshop to create your cursor pixel by pixel.

@Arden
Always prefer vector images whenever you can.

Vega said:
@Arden
Always prefer vector images whenever you can.

This comment thread feels surreal.

Kirby said:

Vega said:
@Arden
Always prefer vector images whenever you can.

This comment thread feels surreal.

A perfect summary of r/webdev.

Vega said:
@Arden
Always prefer vector images whenever you can.

Not in this case—vector images don’t scale well with only a few pixels to work with. For something like a cursor (which can be 10px wide), it looks better to draw it as a custom cursor. This is how major operating systems handle it. You just need 4-5 different versions for various resolutions.

Cameron said:

Eden said:
Please avoid changing default cursors on your pages.

Why shouldn’t I?

  1. People with disabilities might find this very frustrating.

  2. Users have been using browsers for thirty years. They know how the UI looks and feels. Altering this can be jarring, making many users feel put off.

Cameron said:

Eden said:
Please avoid changing default cursors on your pages.

Why shouldn’t I?

Unless you’re making a game or something very interactive, don’t change my cursor. It’s annoying. Custom cursors and altered scroll bars are things to avoid unless you have a solid reason for doing so.

@Sai
Most games still use some form of a directional arrow or pointer for the cursor, so that’s still a lot.