1You can use own image or emoji as cursor
2<style>       
3    a{
4        cursor: url("custom.gif"), url("custom.cur"), default;
5    }
6</style>
7
8<p>Place your mouse pointer <a href="#">over me</a> to reveal the custom cursor.</p>
91#custom-cursor {
2  display: none;
3  position: fixed;
4  width: 20px;
5  height: 20px;
6  top: -10px;
7  left: -10px;
8  border: 2px solid black;
9  border-radius: 50%;
10  opacity: 1;
11  background-color: #fb4d98;
12  pointer-events: none;
13  z-index: 99999999;
14  transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
15}
16
17#custom-cursor.active {
18  opacity: 0.5;
19  background-color: #000;
20  border: 2px solid #fb4d98;
21}