Custom cursor image low quality and too pixelated

Site URL: https://www.quelle.cool/

Hi, I've added custom cursors to my site but the image quality is terrible and they end up really pixelated with altered colors. I made the cursors in AI at 30px height.  Is there any way to improve the quality of my cursors or is it possible to make them larger images and then size them down in CSS? I used the code below:

#collection-x {
  cursor: url(x), auto!important;
}

#collection-x {
  cursor: url(x), auto
  }}

My site is www.quelle.cool/