JSFiddle - React, Tailwind, and code Playground

HTML

<script>
function setPointer() {
	/* Pointer examples
   - Pointer 1 :
     - big : https://i.ibb.co/JRvVLH9/validate-2.png
     - small : https://i.ibb.co/Qmp18Sy/validate-2-64.png
   - Pointer 2 :
     - big : https://i.ibb.co/X7G4gXR/move-2.png
     - small : https://i.ibb.co/chvzC8K/move-2-64.png
 	 Is there any better solution than switching to a smaller precomputed version
   if I detect the viewport is too small ?
   
   window.matchMedia("(max-width: 700px)")
*/
	if (document.getElementById('b1').checked) {
    if (window.matchMedia("(max-width: 2200px)").matches) {
    	document.documentElement.style.cursor = "url('http://i.ibb.co/Qmp18Sy/validate-2-64.png') 32 32, grab"
      return
    }
    document.documentElement.style.cursor = "url('http://i.ibb.co/JRvVLH9/validate-2.png') 64 64, grab"
  }
  else if (document.getElementById('b2').checked) {
  	if (window.matchMedia("(max-width: 2200px)").matches) {
    	document.documentElement.style.cursor = "url('http://i.ibb.co/chvzC8K/move-2-64.png') 32 32, grab"
      return
    }
  	document.documentElement.style.cursor = "url('http://i.ibb.co/X7G4gXR/move-2.png') 64 64, grabbing"
  }
  else {
  	document.documentElement.style.cursor = 'auto'
  }
}
</script>
<body >
<div style="height: 1000px">

<!-- I have more custom buttons in my use case so I use this scuffed setup instead of radio buttons -->
  <input type='checkbox' id="b1" onclick="document.getElementById('b2').checked=false; setPointer();"/>
  Cursor 1
  <input type='checkbox'id="b2" onclick="document.getElementById('b1').checked=false; setPointer();"/>
  Cursor 2
  
  <p>
   Please make the cursor roughtly the size of the div below (on any viewport size)
  </p>
  <div style="height:5vh; width:5vh; background-color: #1e1f1b">
  </div>
</div>
</body>