Use custom Emoji as a cursor using CSS 😜.

So lately I have been impressively busy to get my head around and write a complete article 😂 but I found a funny solution while wasting the time I don't have on twitter and I wanted to share it with you.

Using plain CSS you can set the cursor using the property cursor https://developer.mozilla.org/es/docs/Web/CSS/cursor, normally you'll set values like pointer for links and clickable components, progress to indicate a loading state.

This was a pretty trendy long time ago in those awesome '90s websites, but if you want to give it a funny stroke to your site you can use cursor: url();. For this, we will use SVG as with data URIs just. like this:

<img src="'data:image/svg+xml;utf8,<svg ... > ... </svg>'" />

If we add the emoji (of course I will use the unicorn one 🦄 for the example) inside of the svg tag, it will render it as the cursor pointer. So you will end with something pretty similar:

.unicorn-cursor {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🦄</text></svg>")
      16 0, auto;
}

Here is the result so you guys can check it out and play

That's all folks