New: 60 Website Cursors

By Matt Visiwig Apr 10, 2024

You can implement custom cursors on your website with the single CSS property “cursor”. You can adjust the pointer coordinates like so: cursor: url(filename.svg) 12 12, auto;

Here is an image showcasing all 60 CSS cursors:

You can further customize these website cursors by modifying the color, stroke-width, and/or cursor size.

While there are many traditional cursor types available, such as arrows and pointers, you can also use other icon-like graphics for more engaging interactions. For instance, display a lock icon cursor when content access is restricted, or use a target scope in your browser-based video game.

You can find these new CSS cursors under SVGs nav tab.