Use an Emoji as the Mouse Cursor on a Website

Recently I saw this tweet by Marco Denic fly by:

CSS tip:

Did you know that you can use your own image, or even emoji as a cursor? pic.twitter.com/P25wSJ0ui6

— Marko ⚡ Denic (@denicmarko) January 6, 2021

To use an emoji as the cursor you can’t simply type in the emoji though.

/* ❌ This won't work */
html {
	cursor: 👻, auto;
}

What you’ll have to do instead is embed the emoji inside an SVG and then successively embed that SVG in the CSS file by passing it as a Data URL into the url() function.

/* ✅ This will work */
html {
	cursor: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="64" width="64"><text y="28" font-size="32">👻</text><path d="M0,2 L0,0 L2,0" fill="red" /></svg>'), auto;
}

See the Pen
Emoji Cursor by Bramus (@bramus)
on CodePen.

In the code above I’ve also added a little triangle in the top left corner of the SVG, as that’s where the actual tip of the pointer is. Omitting it makes up for a really weird experience.

To customize the color of the tip you can change its fill value to any color you like. Although not recommended you can remove the entire <path> if you don’t want it.

html {
	cursor: url(…) 10 0, auto;
}

To change the overall size of the emoji cursor, change the height and width attributes of the SVG. Best is to leave the other attributes (such as viewBox and font-size) alone, as those have been carefully tweaked.

~