Custom SVG Cursors with CSS
Replace the default pointer with your own vector cursor — the CSS syntax, the 32px limits, and the fallback rules.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
The CSS and Its Constraints
cursor: url('cursor.svg') 4 4, auto sets a custom cursor with a hotspot at 4,4 and a required fallback keyword. Constraints matter: browsers cap cursors around 32x32 CSS pixels (larger images get rejected or clipped), the SVG needs explicit width/height attributes, and Safari support is inconsistent — always test.
- Syntax: cursor: url(file.svg) x y, fallback-keyword
- Keep cursors 32x32 or smaller with explicit dimensions
- The trailing fallback keyword is mandatory in the spec
Design and Reliability Patterns
Design cursors with a clear hotspot point, strong silhouette, and contrast edging (light outline on dark shapes) so they read on any background. For maximum reliability, many teams convert the SVG cursor to PNG at build time — identical look, universal support — while keeping the SVG master for editing.
- Outline/glow edging keeps cursors visible on any background
- Set the hotspot to the visual click point (arrow tip, crosshair center)
- PNG conversion at build time sidesteps browser quirks
Frequently Asked Questions
Why is my SVG cursor not showing?
Usually missing width/height attributes in the SVG or an oversized file — browsers silently fall back. Set explicit dimensions of 32px or less and keep the fallback keyword in the rule.
Can cursors be animated?
Not via SVG in the cursor property — animated SVG cursors don't animate. For animated cursors, swap cursor images with JavaScript on a timer, or use animated .cur/.ani only where legacy Windows contexts apply.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG