Create a custom emoji cursor
There are two popular ways to create a custom cursor:
- Using an image
- Creating a canvas element and generate the base 64 image
Both approaches finally change the cursor by setting the image's URL to the `cursor`
property:
.custom-cursor {
cursor: url(/path/to/image.png), auto;
}
.custom-cursor {
cursor: url('data:image/png;base64,...'), auto;
}
To create a custom emoji cursor, we can use an inline SVG element which displays the emoji at the center as following:
.custom-cursor {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;font-size:24px"><text y="50%">🚀</text></svg>')
16 0, auto;
}
Demo
Create a custom emoji cursor