how to align custom icon without font awesome

<div class="top">
<ul>
  <li class="a">
    <div class="main">
      <div class="sub-main">
        <i class="facebook">
        </i>
      </div>
    </div>
  </li>
  <li class="b">
    <div class="main">
      <div class="sub-main">
        <i class="youtube">
        </i>
      </div>
    </div>
  </li>
  <li class="c">
    <div class="main">
      <div class="sub-main">
        <i class="instagram">
        </i>
      </div>
    </div>
  </li>
</ul>
</div>





.top {
  display: inline-block;
ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  li {
    display: inline;
    position: relative;
    .main {
      display: inline-block;
      border: 2px solid grey;
      padding: .8rem;
      border-radius: 50%;
      position: relative;
      z-index: -20;
      background: #d6d6d6;;
      .sub-main {
      i{
        height: 1.5rem;
        width: 1.5rem;
        display: block;
        background-size: contain;
      }
      .facebook{
        background-image: url('../../../../assets/socialicon/facebook (1).svg');
      }
      .youtube{
        background-image: url('../../../../assets/socialicon/youtube.svg');
      }
      .instagram{
        background-image: url('../../../../assets/socialicon/instagram.svg');
      }
      }
    }
    &.a {

    }
    &.b {
      right: 1rem;
      z-index: -21;
    }
    &.c {
      right: 2rem;
      z-index: -22;
    }

  }
}
}