Setting a custom cursor through css breaks the image, how to fix it?

Question

css

2160x1440, 216dpi, chrome.
When you install a custom cursor via css , the Image that serves as its source (png) is distorted/shrinks/pixelated, in general, it loses its quality. Original: What does the cursor look like: What does the thumbnail look like (my ideal): Questions:     1. What to do with this if you use CSS? Maybe I'm setting the cursor in the wrong way? Example.     2. Is it possible to somehow fix using js and is there a ready-made code for this. For example, hide the current cursor and insert a div with a picture on the page, which will be displayed normally.
cursor: url(link), default;

Answer 1

svg icons use.