How to Use and Image for a Mouse Pointer using Vanilla JavaScript?

I’m trying to create a mouse cursor that uses an image instead of the default pointer.

I’ve created a class and set the cursor to point an image in my CSS;

/* CSS Basic Reset */
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
}

.mouse-pointer {
    cursor: url('/assets/images/cursor.png'), auto;
}

Then, I’m creating a logical division element with JavaScript, adding the 'mouse-pointer class to it, and appending the mousePointer element to the document.body;

const mousePointer = document.createElement('div');
mousePointer.classList.add('mouse-pointer'); // Update to 'mouse-pointer'

document.body.appendChild(mousePointer);

I was expecting to see an image instead of the default mouse cursor, but I see nothing. I’m new to this, so I’m not sure what I’m doing wrong.

I’m not looking for solutions in JQuery, or anything else outside of vanilla JavaScript. I’m not looking to use CSS to accomplish this effect either.

Thanks.