Replace mouse cursor with an emoji using CSS only

Use the following:

cursor:url("data:image/svg+xml;utf8,<svg xmlns='' 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 or have any comments, say hi.