Некорректно работает background в SVG при hover эффекте

Есть блок, в котором три иконки соц.сети. И есть две проблемы.

1. При наведении на иконку, появляющийся background начинает двигать соседние элементы.Пример на скрине.
2. Пока не попадешь курсором в саму иконку, она не изменит цвет на тот что нужен мне. В этом случае не могу обьединить hover эффект сразу на два элемента. В итоге получается, что оражневый кружочек появляется раньше чем изменение фона иконки(которая может вообще не отобразится если не ткнуть на нее курсором).

На первом скрине то что должно получится, а на втором и третьем что выходит у меня при наведении на иконку(

Код ниже.

<div class="learn__footer">
           <span class="learn__footer-share-text">
             Поделиться:
           </span>
           <div class="learn__footer-share">
            
             <ul class="learn__footer-social">
               <li class="learn__footer-social-link">
               
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M12.0004 0.00332907L9.92554 0C7.59455 0 6.08817 1.54552 6.08817 3.93762V5.75313H4.00203C3.82176 5.75313 3.67578 5.89927 3.67578 6.07954V8.71001C3.67578 8.89028 3.82193 9.03625 4.00203 9.03625H6.08817V15.6738C6.08817 15.854 6.23414 16 6.41441 16H9.13623C9.3165 16 9.46247 15.8539 9.46247 15.6738V9.03625H11.9017C12.0819 9.03625 12.2279 8.89028 12.2279 8.71001L12.2289 6.07954C12.2289 5.99299 12.1944 5.91009 12.1334 5.84884C12.0723 5.78758 11.989 5.75313 11.9025 5.75313H9.46247V4.2141C9.46247 3.47438 9.63875 3.09886 10.6023 3.09886L12 3.09836C12.1801 3.09836 12.3261 2.95222 12.3261 2.77211V0.329578C12.3261 0.149642 12.1803 0.00366197 12.0004 0.00332907Z"
                     fill="#E36F59" />
                 </svg>

               </li>
               <li class="learn__footer-social-link">
                 
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <g clip-path="url(#clip0_84_22370)">
                     <path
                       d="M14.356 4.742C15.0067 4.28 15.554 3.70333 16 3.03933V3.03867C15.4047 3.29933 14.7713 3.47267 14.11 3.55667C14.79 3.15067 15.3093 2.51267 15.5533 1.744C14.9193 2.122 14.2193 2.38867 13.4733 2.538C12.8713 1.89667 12.0133 1.5 11.0773 1.5C9.26133 1.5 7.79933 2.974 7.79933 4.78067C7.79933 5.04067 7.82133 5.29067 7.87533 5.52867C5.14867 5.39533 2.73533 4.08867 1.114 2.09733C0.831333 2.58867 0.664667 3.15067 0.664667 3.75533C0.664667 4.89133 1.24933 5.898 2.122 6.48133C1.59467 6.47133 1.078 6.318 0.64 6.07733V6.11333C0.64 7.70733 1.77667 9.03133 3.268 9.33666C3.00067 9.41 2.71 9.44466 2.408 9.44466C2.198 9.44466 1.986 9.43266 1.78733 9.38866C2.212 10.6873 3.41867 11.6427 4.852 11.674C3.736 12.5467 2.31867 13.0727 0.784667 13.0727C0.516 13.0727 0.258 13.0607 0 13.028C1.45333 13.9647 3.17467 14.5 5.032 14.5C10.8207 14.5 14.5933 9.67066 14.356 4.742V4.742Z"
                       fill="#E36F59" />
                   </g>
                   <defs>
                     <clipPath id="clip0_84_22370">
                       <rect width="16" height="16" fill="white" />
                     </clipPath>
                   </defs>
                 </svg>

               </li>
               <li class="learn__footer-social-link">
           
                 <svg  width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path id="instagram"
                     d="M15.9922 16C14.8828 16 13.7922 16 12.6828 16C12.6828 15.9312 12.6828 15.8718 12.6828 15.8093C12.6828 14.0117 12.6859 12.2141 12.6766 10.4166C12.6734 10.0445 12.6359 9.66627 12.5641 9.30051C12.3609 8.2751 11.6891 7.88745 10.6953 7.98749C9.75156 8.0844 9.22344 8.59711 9.06719 9.57249C9.00469 9.96639 8.97656 10.3697 8.97344 10.7698C8.96406 12.4486 8.97031 14.1243 8.97031 15.803C8.97031 15.8656 8.97031 15.925 8.97031 15.9969C7.86406 15.9969 6.76719 15.9969 5.66406 15.9969C5.66406 12.4392 5.66406 8.89097 5.66406 5.32708C6.71719 5.32708 7.76406 5.32708 8.83594 5.32708C8.83594 5.80226 8.83594 6.28058 8.83594 6.80578C8.88594 6.74951 8.90781 6.73075 8.92344 6.70887C9.48281 5.78038 10.3266 5.26768 11.3734 5.10512C12.2391 4.97069 13.0984 5.04259 13.9203 5.38022C14.8641 5.76475 15.4016 6.50566 15.6891 7.45603C15.9047 8.16569 15.9859 8.8941 15.9922 9.62876C16.0047 11.7233 15.9984 13.8179 16.0016 15.9125C15.9984 15.9375 15.9953 15.9625 15.9922 16Z"
                     fill="#E36F59" />
                   <path id="instagram"
                     d="M0.273438 15.9969C0.273438 12.4361 0.273438 8.88473 0.273438 5.32709C1.37344 5.32709 2.46406 5.32709 3.57031 5.32709C3.57031 8.87847 3.57031 12.433 3.57031 15.9969C2.47656 15.9969 1.37969 15.9969 0.273438 15.9969Z"
                     fill="#E36F59" />
                   <path id="instagram"
                     d="M1.92188 3.86402C0.86875 3.86402 0 2.98555 0 1.92263C0 0.862845 0.86875 -0.00311778 1.93125 8.43798e-06C2.98438 0.00313466 3.84375 0.869098 3.84375 1.92576C3.84375 2.98555 2.97187 3.86402 1.92188 3.86402Z"
                     fill="#E36F59" />
                 </svg>
               </li>
             </ul>
           </div>

           <a class="learn__footer-btn" href="#">
             <img class="learn__footer-btn-img" src="images/icons/learn-footer-coffe.svg" alt="">
           </a>



         </div>

.learn__footer {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 20px 30px;
  align-items: center;
  box-shadow: 0px 9px 34px rgba(21, 33, 56, 0.1);
  border-radius: 10px;
  margin-bottom: 67px;
  height: 80px;
}

.learn__footer-btn {
  display: block;
}

.learn__footer-share {
  display: flex;
}

.learn__footer-social {
  display: flex;
  margin-right: 22em !important;
}

.learn__footer-share-text {
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: rgba(35, 38, 45, 1);
  margin-right: 30px;
}

.learn__footer-social-link {
  margin-right: 24px;
  cursor: pointer;
}

svg:hover path {
  fill: white;

}

.learn__footer-social-link:hover {
  background: #E36F59;
  border-radius: 50%;
  padding: 12px;

} 

https://codepen.io/Den323/pen/RwMJvLj