<li class="sidebar__item">
  <a href="" class="sidebar__link">
    <svg class="sidebar__icon" width="31" height="31" 
         viewBox="0 0 31 31" xmlns="http://www.w3.org/2000/svg">
         <path d="M6.75787 24.0048L6.75787 6.92108"  
         stroke-width="2" stroke-linecap="round" 
         stroke-linejoin="round"/>
         <path d="M6.75767 24.0046L23.8414 24.0046" 
         stroke-width="2" stroke-linecap="round" 
         stroke-linejoin="round"/>
         <path d="M10.5943 17.0974C12.822 15.0627 
         14.4198 13.8993 16.2216 12.2839L17.3399 
         16.6643L22.2127 12.5568" stroke-width="2" 
         stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    Overview
  </a>
</li>
.sidebar__item {
  margin: 0 0 11px 0;
  border-radius: 6px;
  transition: 0.3s ease 0s;
  &:last-child {
    margin: 0;
  }
  &:hover {
    background-color: #F0F7FF;
  }
}
.sidebar__link {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #C7C7C7;
  font-weight: 700;
  padding: 11px;
  transition: 0.3s ease 0s;
  &:hover {
    color: #197BBD;
  }
  &:hover .sidebar__icon {
    stroke: #197BBD;
  }
}
.sidebar__icon {
  transition: 0.3s ease 0s;
  margin: 0 25px 0 0;
  stroke: #C7C7C7;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.