.icon {
  display: block;
  width: 180px;
  height: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate%281 1%29'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' stroke='%23ffffff'/%3E%3Cpath fill='%23ffffff' d='M11.6 8.4l-5 3.5V5'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 180px;
  cursor: pointer;
  transition: 1s background;
}
.icon:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate%281 1%29'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' stroke='%2300afff'/%3E%3Cpath fill='%2300afff' d='M11.6 8.4l-5 3.5V5'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.stylus-icon {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: #0a1215 url("https://wallpaperscraft.com/image/rain_drops_splashes_heavy_rain_dullness_bad_weather_60638_1920x1200.jpg");
}