Cover image for Use custom Emoji as a cursor using CSS 😜.

Use custom Emoji as a cursor using CSS 😜.

alvarosaburido profile image Alvaro Saburido ・1 min read

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


Posted on by:

alvarosaburido profile

Alvaro Saburido


"Chamo very crazy loco" Frontend & Creative Telecommunications engineer


Editor guide

nice... I also like to dance when the stuff works... hahaha... my question is: how far can we push web technologies? IΒ΄m mean, it offers the most of computational resources available in modern data processing? Or still there are some other plataform that exceeds it? In other words, is the web plataform/stack the topmost category of available resources, or still there is some other (unknow to me) plataform that exceeds it? I question this, because, we see many web developers, front-end and back-end engineers coming up with such nicetees of creativity like this one, so chiling... anyways, just sharing some random thoughts... perhaps someone can take it for some production...


Seems like the svg can be simplify to

url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size: 24px'><text y='20'>πŸ¦„</text></svg>"), auto

Thank you Sébastien 😁