<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">


<div class="doc">
  <div class="icon">
   <i class="fas fa-parking"></i>
  </div>


  <div class="icon">
    <i class="fas fa-concierge-bell"></i>
  </div>


  <div class="icon">
   <i class="fas fa-hot-tub"></i>
  </div>


  <div class="icon">
   <i class="fas fa-drumstick-bite"></i>
  </div>
</div>

:root{
  --color: #fff;
  --hover: gold;
}

body{
  background: blue;
}

.fas{
  display: block;
  font-size: 100px;
  color: var(--color);
  border-radius: 10px;
  transition: 0.34s linear;
}

.icon{
  border: 3px solid var(--color);
  display: inline-block;
  padding: 16px 20px;
  border-radius: 10px;
  transition: 0.34s linear;
}

.icon.active .fas{
    color: var(--hover);
}

.icon.active{
    border: 3px solid var(--hover);
}

let doc = document.querySelector(".doc");
let icon = document.querySelectorAll(".icon");

let last;
for(let i = 0; i < icon.length; i++){
  icon[i].onclick = e => {
    if (last && last != icon[i]) last.classList.remove("active");
    icon[i].classList.toggle("active");
    last = icon[i].classList.contains("active") ? icon[i] : null;
  }
}