How to make a custom cursor from your logo

Step 1: Decide what the cursor has to do

A cursor is a tool before it is a logo. Pick one of two jobs:

• A pointing cursor replaces the arrow. It needs an obvious tip so people know exactly where they click. Most logos do not have one, so you will add it: the mark sits beside or behind a small arrow, or you shape the mark so one corner becomes the tip.
• A decorative cursor sits on clickable areas only, such as a gallery or a big call to action. Its click point is the centre, like a dot. Logos that are round or square work well here.

If you are unsure, make a pointing version for general areas and keep the system hand, or a simple branded dot, for links.

Step 2: Simplify the mark for 32 pixels

At 32x32 you have about the area of a postage stamp seen from across a desk.

• Keep one bold shape. Drop taglines, wordmarks and fine detail.
• Make every line at least 2 pixels thick.
• Fill shapes instead of outlining them where you can.
• Check it at 100 percent zoom, not zoomed in. If you have to squint, simplify more.

Step 3: Add an outline that works on every background

The system arrow is black with a white outline for a reason: it shows up on anything. Give your cursor the same treatment.

• Add a 1 to 2 pixel outline in a colour that contrasts with the fill, usually white around a dark mark or dark around a light one.
• Test it over white, black, a photo and your brand colour.
• Avoid large transparent areas inside the shape. People lose the cursor in them.

Step 4: Set the hotspot

The hotspot is the single pixel that does the clicking, counted from the top-left corner.

• For a pointing cursor, put it on the tip. With a 1 pixel outline that is often 1 1 or 2 2, not 0 0.
• For a decorative cursor, put it in the visual centre, 16 16 on a 32x32 canvas.
• Keep pointing hotspots near the top-left. Browsers drop a cursor that would stick out of the page, and a hotspot deep inside the image makes that happen further from the edge.

Step 5: Export the files

Open the cursor maker, upload your SVG or PNG, click the hotspot and check the preview on the sample page. Then export what you need:

• For the web: an SVG with width="32" height="32" for sharp screens, a 32x32 PNG as the fallback, and the CSS line.
• For Windows: a .cur file. Include 32, 48 and 64 pixel sizes so it stays sharp when people enlarge their pointer.
• For a Mac cursor tool: PNG files at 32 and 64 pixels.

Step 6: Add it to your site

.brand-zone {
  cursor:
    url("logo-cursor.svg") 2 2,
    url("logo-cursor.png") 2 2,
    auto;
}
.brand-zone :is(a, button) {
  cursor: pointer;
}
.brand-zone :is(input, textarea, select) {
  cursor: auto;
}

Scope it to the sections where the brand moment matters, such as the hero or a portfolio grid. Across a whole content site, a logo cursor gets in the way of reading.

Step 7: Test it like a user

• Move it over light and dark sections, photos and video.
• Run it to every edge of the page in Chrome, Safari and Firefox. Near the edges you should see your fallback, not nothing.
• Try it on a high-density screen and at 200 percent zoom.
• Click small targets with it. If you miss, the hotspot is in the wrong place.

Only turn a logo into a cursor if you own it or have permission. A client’s brand guidelines may also say how the mark can be cropped or recoloured.

FAQ

What size should a logo cursor be?

32x32 pixels. Larger images work in the middle of the page but get swapped for the fallback near the edges, and anything over 128x128 is ignored completely.

Should the logo replace the hand on links?

Usually not. The hand tells people something is clickable, and your logo does not. Keep pointer on links, or make a second, clearly different link version of your cursor.

Can a logo cursor be in full colour?

Yes. PNG, SVG and modern .cur files all support full colour with transparency. Just keep the outline so it stays visible.