<div class="cursor"></div>

body {

  background-color: white;

  cursor: none;

  height: 120vh;

}

​

.cursor {

  position: fixed;

  width: 25px;

  height: 25px;

  background-image: url('https://blog.replaybird.com/content/images/2024/04/image-as-cursor.png'); /* add URL of your image */

  background-size: cover;

  pointer-events: none;

  z-index: 9999;

}

const cursor = document.querySelector('.cursor');

​

const positionCursor = (e) => {

  const mouseY = e.clientY;

  const mouseX = e.clientX;

​

  cursor.style.top = `${mouseY}px`;

  cursor.style.left = `${mouseX}px`;

}

​

window.addEventListener('mousemove', positionCursor);