Изменить вид курсора

это готовый код курсора, как я могу изменить его вид на другой ?

    
    * { cursor: none !important; }

.cursor { position: fixed; top: 0; left: -100px;  overflow: visible; z-index: 1000; pointer-events: none; }

.cursor:after { content:''; position: absolute; top: 0; left: 0; width: 15px; height: 15px; background: #000; border-radius: 50%; transform: translate(-50%,-50%);
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    
}
.cursor:before { content:''; opacity: 0; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 3px solid #222; border-radius: 50%; transform: translate(-50%,-50%);  
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    
}

/*.cursor.dark:after { background: #222; }*/

.cursor.menu-open:after { background: #eee; }
.cursor.menu-open:before { border-color: #eee; }

.cursor.hover:after { opacity: 0; }
.cursor.hover:before { opacity: 1; }

    
</style>

<script>
    
        $("body").prepend('<div class="cursor"></div>');

    $(document)
      .mousemove(function(e) {
      $('.cursor')
        .eq(0)
        .css({
        "left": e.pageX,
        "top": e.pageY - $(window).scrollTop()
      });
    });

    $("a").mouseenter(function(){
        $('.cursor').addClass('hover');
    })
    .mouseleave(function(){
        $('.cursor').removeClass('hover');
    });
    
</script>```