<h1>Hover the boxes to see the cursors</h1>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

/*
  - adjust the width,height and viewbox to control the size 
  - minify your CSS 
  - change all the # to %23

  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" class="c"></div>%3Cstyle%3E.c{ ADD YOUR CSS HERE }%3C/style%3E</foreignObject></svg>')  
  24 24 <-- control the offset , 
  auto; <-- the fallback cursor

*/


section:nth-of-type(1) {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;border-radius:50%;background:conic-gradient(from 90deg at 4px 4px,%230000 90deg, %232f2b2f 0) -4px -4px/calc(50% + 2px) calc(50% + 2px),repeating-radial-gradient(%230000 0 22%,%232f2b2f 23% 32%);" ></div></foreignObject></svg>')  24 24, auto;
}
section:nth-of-type(2) {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background:linear-gradient(135deg,%23000 40%,%230000 0),linear-gradient(45deg, %230000 40%, %23000 0 60%,%230000 0)" ></div></foreignObject></svg>')  0 0, auto;
}
section:nth-of-type(3) {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background:red" ></div></foreignObject></svg>')  24 24, auto;
}
section:nth-of-type(4) {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background:%231095c1;clip-path: polygon(100.00% 50.00%,77.72% 61.48%,85.36% 85.36%,61.48% 77.72%,50.00% 100.00%,38.52% 77.72%,14.64% 85.36%,22.28% 61.48%,0.00% 50.00%,22.28% 38.52%,14.64% 14.64%,38.52% 22.28%,50.00% 0.00%,61.48% 22.28%,85.36% 14.64%,77.72% 38.52%);" ></div></foreignObject></svg>')  24 24, auto;
}
section:nth-of-type(5) {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" class="c"></div>%3Cstyle%3E.c{width: 48px;aspect-ratio: 1;display: grid;}.c, .c:before {--_g: linear-gradient(%2317177c 0 0) 50%;background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;}.c:before {content: "";transform: rotate(45deg);}%3C/style%3E</foreignObject></svg>')  24 24, auto;
}
section:nth-of-type(6) {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" class="c"><i></i></div>%3Cstyle%3E.c {--c: %2300a1f1;width: 64px;background: linear-gradient(var(--c) 0 0) 66% 67.5%/14% 25% no-repeat, radial-gradient(circle at 82% 48%,var(--c) 20%,%230000 20.5%), radial-gradient(circle at 19% -33%,%230000 56%,var(--c) 0) 0 100%/100% 50% no-repeat;position: relative;}*, *:before, *:after {content:"";border-radius: 50%;aspect-ratio: 1;}.c i, :is(.c,.c *):before, :is(.c,.c *):after{position: absolute;inset: 21% 36% auto 26%;background: radial-gradient(circle at var(--p,112% -59%),%230000 71%,var(--c) 71.5%);}.c:before, .c:after{inset: 10% -6% auto 75%;--p: 50% 0%;}.c:after {transform: translate(11%, 13%) rotate(11deg);}.c i:before, .c i:after {inset: 0;transform: translate(0%, 34%);--p: 35% -70%;}.c i:after {transform: translate(12%, 65%);--p: -5% -70%;}%3C/style%3E</foreignObject></svg>')  32 32, auto;
}
section:nth-of-type(7) {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" class="c"></div>%3Cstyle%3E.c {width: 50px;aspect-ratio: 1;display: grid;color: %23854f1d;background: radial-gradient(farthest-side, currentColor calc(100% - 6px),%230000 calc(100% - 5px) 0);-webkit-mask: radial-gradient(farthest-side,%230000 calc(100% - 13px),%23000 calc(100% - 12px));border-radius: 50%;}.c::before, .c::after {content: "";grid-area: 1/1;background: linear-gradient(currentColor 0 0) center, linear-gradient(currentColor 0 0) center;background-size: 100% 10px,10px 100%;background-repeat: no-repeat;}.c::after {transform: rotate(45deg);}%3C/style%3E</foreignObject></svg>')  25 25, auto;
}
section:nth-of-type(8) {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" class="c"></div>%3Cstyle%3E.c:before{content:"Hello";font-weight:bold}%3C/style%3E</foreignObject></svg>')  25 25, auto;
}


h1 {
  font-family: sans-serif;
  text-align:center;
  grid-column:1/-1;
}

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
section {
  border: 2px solid;
  height: 200px;
}
section:hover {
  color: red;
}