Replace mouse cursor with an emoji using CSS only

Use the following:

CSS
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='128px' width='128px' style='fill:black;font-size:64px;'><text y='50%'>👆</text></svg>"), auto;

You can replace the emoji symbol by the one that you want. Notie hwo the maximum cursor supported size is 128px x 128px.

Hover here

Hi, I'm Erik, an engineer from Barcelona.

If you like the post, say hi or join Substack to get non-frequent updates.

Replace mouse cursor with an emoji using CSS only

More articles