How to create SVG custom cursors that are not pixelated or blurry

SVG custom cursors are a great way to add some personality and interactivity to your website. However, if you’ve tried creating one for Safari on a retina display, you may have noticed that the cursor appears pixelated and blurry. In this article, I’ll explain how to create SVG custom cursors in Figma and how to get them looking crisp and clear in Safari. I’ll cover some best practices for designing custom cursors and walk you through the steps to implement them on your website.

Designing the cursors in Figma

The first step is to create a frame to put your custom cursors in; 32 x 32 pixels is the recommended size

It’s important to consider where you position your custom cursor within the frame, as when you write the CSS, you’ll need to know the x and y coordinates, which are the number of pixels relative to the top left corner of the frame that tell the browser where the cursor should interact with other elements on the screen; this is referred too as the cursor hotspot. If you want the hotspot to be in the middle of the cursor, your coordinates would be “16 16”, in my example I want the hotspot to be at the top of the pointer, so my coordinates are “4 4”.

Exporting the cursor

Once you’ve finished the design for your custom cursor, you’ll need to export it from Figma as an SVG file. To do this, select the custom cursor and then navigate to the export section, which can be found at the bottom of the sidebar.

Choose SVG from the list of file types, then click the export button to save the file. When prompted to name the file, add the suffix “@1x” e.g. “[email protected]”. This will help you keep track of which file is which, as you’ll need to create a higher resolution version in the next step.

Creating the high resolution version

Now you’ve got your custom cursor exported as an SVG you’re ready for the next step, creating the high resolution version. To do this, create a copy of the SVG file and change the suffix to “@2x”. Now you should have two files, e.g. “[email protected]” and “[email protected]”.

Open the file with the “@2x” suffix in your code editor, e.g. Visual Studio Code, and change the width and height property from 32 to 64, then save the file.

<svg width="64" height="64" viewBox="0 0 32 32">
	...
</svg>

Writing the CSS

The final step is to add the custom cursor to your website’s CSS. Using the cursor CSS property, you can set three values, the URL pointing to the SVG file, the x and y coordinates we looked at earlier on and lastly the fallback cursor should the SVG fail to load.

By using “-webkit-image-set” we can also point to the high resolution version of the SVG which avoids any pixelation or blurriness in Safari.

.my-custom-cursor {
	cursor: url('./[email protected]') 4 4, pointer;
	cursor: -webkit-image-set(url('./[email protected]') 2x) 4 4, pointer;
}