Use emojis as mouse cursors by combining SVG with CSS.
- Choose your preferred emoji from the list below or provide your own.
- Adjust the size.
- Hover over the preview box to see the result.
- Copy the CSS and place it in your website stylesheet.
Hover to Preview
- Chrome, Firefox & Safari only. No support for IE or Edge.
- Above size 50 introduces blurriness and sometimes glitches on Mac.
- For more information on changing your website cursors with CSS, please refer to this MDN article.
- Preview doesn't work in safari after switching emoji, but copied CSS should still work.
- Two or three text characters can be used instead of an emoji. Use the fill option in the SVG source to change the text colour.
- Thanks to CoderPi for the inspiration.
- Adding SMIL animation does appear to work in chrome while moving the cursor. Try hovering over the 'Emoji Cursor' heading at the top.
This site is for generating and testing mouse cursors, so unfortunately it is unusable on a mobile device.