code.css

body {
  margin: 0;
  height: 100vh;
  background-color: #fbfbfb;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4em;
}
div {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  background-image: linear-gradient(yellow, orange);
  font-family: system-ui;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.image {
  cursor: url("https://pics.freeicons.io/uploads/icons/png/20278001131579606320-32.png"),
    auto;
}
.svg {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='40' viewport='0 0 100 100' style='fill:black;font-size:22px;'><text y='50%'>🐧</text></svg>"),
    auto;
}