New: 60 Website Cursors

By Matt Visiwig Matt Visiwig Portrait 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.

Matt Visiwig Headshot

Hey, I'm Matt , the creator behind SVG Backgrounds. I produce free and paid resources every month, sign up for alerts.

Get freebies See latest releases