How to make your own custom cursor

A cursor set is more than one arrow. Here’s how to plan, draw and assemble your own — sizes, hotspots, animation — and turn it into a skin that works on both Windows and macOS.

1. Decide which states to draw

Windows uses 17 cursors and macOS uses 16 (21 different ones in total). You don’t have to draw them all on day one. Start with the ones people see most:

• Normal select (the arrow) — seen all the time, and used in place of any state you haven’t drawn.
• Link select (the hand) — over links and buttons.
• Text select (the I-beam) — over text you can type in.
• Busy and Working in background — the waiting cursors, usually animated.

Then add the resize and move cursors, and the platform-specific ones when you’re ready. Cursor states explained lists all 21.

2. Draw it at the right size

• Square images with a transparent background, between 32 and 256 pixels per side. Every frame of the same state must be the same size.
• Draw big, show small. Working at 128 or 256 pixels and letting the app scale down keeps edges clean at 32 px and sharp when people choose a larger cursor size.
• Add an outline. Cursors sit on white pages and dark apps alike. A dark outline around a light shape (or the reverse) keeps it visible everywhere.
• Keep the tip obvious. Whatever your character looks like, people need to see where the click lands.

3. Set the hotspot

The hotspot is the exact pixel that clicks. For an arrow it’s the tip; for a text cursor it’s the middle of the I-beam; for a crosshair or a busy spinner it’s the center. A hotspot a few pixels off makes a cursor feel “slippery”, so check it on small buttons.

4. Animate (optional)

Animated cursors are a sequence of frames shown at a fixed speed. Keep each state to 24 frames or fewer — that’s the most macOS accepts — and use one frame duration for the whole state. GIFs work as a starting point: CursorSkins imports the frames and timing for you. For ideas, look at the busy cursors in Mochi Hamster or Pixel Goose.

5. Turn it into a cursor set

Windows wants .cur and .ani files, macOS wants a cursor set it can register, and the two use different names for the same cursors. In CursorSkins you build one skin and it’s converted for whichever system it’s applied on:

1. Open Create and import your images — PNG, GIF, or existing .cur, .ani and .cape files. A whole Windows cursor pack with an Install.inf can be imported at once; you confirm each state before anything is imported.
2. Go through the states, set the hotspot and frame timing for each, and copy a state when several should look alike.
3. Test it in the preview area — move over buttons, text and edges.
4. Save it to your library and apply it.

6. Share it on Steam Workshop

When you’re happy with it, publish the skin to Steam Workshop with a title, description, cover image (use your own, animated GIFs included, or let the app make one) and up to three style tags. You can update it later from any computer signed in to your Steam account. Please only share artwork you created or have permission to use.