<label><input class="turnCheck" type="checkbox">
  <span>Compression</span>
</label>
<br />
<label><input class="turnPM" checked type="checkbox">
  <span>Auto alignment</span>
</label>

* {
  font-family: sans-serif  
}
label > input[type="checkbox"] + * {
  display: block; 
  margin: 0.5em;
  font-size: 2em;
}
/* Turn Checkbox */
label > .turnCheck {
  display: none;
}
label > .turnCheck + *::before {
  content: "\f057";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 1rem;
  border-radius: 10%;
  border-style: solid;
  border-width: 0.1rem;
  border-color: transparent;
  flex-shrink: 0;
  transition: all 0.5s ease-in-out;  
  transform-origin: center center;
}
label > .turnCheck + * {
  transition: all 0.5s ease-in-out;  
  color: red;
  cursor: pointer;
}
label > .turnCheck:checked + * {
  color: green;
}
label > .turnCheck:checked + *::before {
  content: "\f058";
  text-align: center;
  transform: rotate(1turn);
  -webkit-transform:  rotate(1turn);  
  transform-origin: center center;
}
/* Turn Plus/Minus */
label > .turnPM {
  display: none;
}
label > .turnPM + *::before {
  content: "\f055";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 1rem;
  border-radius: 10%;
  border-style: solid;
  border-width: 0.1rem;
  border-color: transparent;
  flex-shrink: 0;
  transition: all 0.5s ease-in-out;  
  transform-origin: center center;
}
label > .turnPM + * {
  transition: all 0.5s ease-in-out;  
  color: black;
  cursor: pointer;
  font-size: 2em;  
}
label > .turnPM:checked + * {
  color: blue;
}
label > .turnPM:checked + *::before {
  content: "\f056";
  text-align: center;
  transform: rotate(1turn);
  -webkit-transform:  rotate(1turn);  
  transform-origin: center center;
}