How to attach an icon to a cursor?

Question

I know how to create custom cursors,

cursor: url('custom.svg'), default;

But how do you attach an icon to a existing pointer cursor?

Answer 1

you can try something like this :)

$(document).ready(function(){
  $('html').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $('div.movablediv').css({'top': y,'left': x}); 
  });
});

.movablediv {width:25px; height:25px; position:absolute; border:solid 1px #000}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="movablediv"></div>

Answer 2

If you don't want to use a custom image for the cursor you could use JavaScript. Here is an example with jQuery

$(function() {
  $(document).mousemove(function(e) {
    var iconPosition = {
      top: e.pageY + 12,
      left: e.pageX + 12
    };
    $('.cursor-icon').offset(iconPosition);
  });
});

.cursor-icon {
  z-index: 1000;
  color: red;
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="cursor-icon"><i class="fa fa-heart" aria-hidden="true"></i></span>