<div class="custom-cursor">
  <div class="card">
    Default
  </div>
  
  <div class="card card-image-cursor">
    Image
  </div>
  
  <div class="card card-emoji-cursor">
    Emoji
  </div>
</div>

.custom-cursor {
  display: flex;
  height: 80vh;
  align-items: center;
  justify-content: center;
  background: #f3f3f3;
  padding: 0 10px;
}

.card {
    width: 200px;
    height: 200px;display: flex;
    align-items: center;
    justify-content: center;
    background-color: #D29A5A;
    margin-right: 10px;color: #fff;
    font-size: 1.4em;
    text-align: center;
  }

.card-image-cursor {
  background-color: #D11A5A;
  cursor: url("https://cdn-images-1.medium.com/fit/c/80/80/1*AmBIV4haXTWPO--EhE0Q1A.jpeg"), auto;
}

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