<div class="icon-wrapper">
  <div class="icon" >
    <div class="first"></div>
    <div class="second"></div>
  </div>
</div>

body { background: #fff; }
.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.icon {
  width: 36px;
  height: 36px;
  position: relative;
  
  .first:before, .first:after,
  .second:before, .second:after {
    content: '';
    display: block;

    position: absolute;
    background: rgb(90, 179, 228);
    width: 10px;
    height: 10px;
    border-radius: 2px;
    transition: all 0.2s linear;
  }
  
  .first:before {
    top: 6px;
    left: 6px;
  }
  .first:after {
    top: 6px;
    right: 6px;
    transform: rotate(-45deg);
  }
  .second:before {
    bottom: 6px;
    left: 6px;
  }
  .second:after {
    bottom: 6px;
    right: 6px;
  }
  
  &.active {
    &:before {
      display: block;
      content: '';
      border: 1px solid #eee;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    
    > :before, > :after {
      background: #A4B0C3;
    }
    
    .first:before {
      transform: rotate(45deg);
      height: 4px;
      width: 14px;
      top: 11px;
      left: 8px;
    }
    .first:after {
      transform: rotate(-45deg);
      height: 4px;
      width: 14px;
      top: 11px;
      right: 4px;
    }
    .second:before {
      transform: rotate(-45deg);
      height: 4px;
      width: 14px;
      bottom: 11px;
      left: 8px;
    }
    .second:after {
      transform: rotate(45deg);
      height: 4px;
      width: 14px;
      bottom: 11px;
      right: 4px;
    }
  }
}

$('.icon').click(function(){
  $(this).toggleClass('active');
});