<div class="social-icons">
  <ul class="social-icons__list">
    <li class="social-icons__item social-icons__item--telegram">
      <a class="social-icons__link" href="#">
        <div class="social-icons__block">
          <div class="social-icons__svg">
            <svg>
              <use xlink:href="/images/sprite.svg#vk"></use>
            </svg>
          </div>
          <span>Text</span>
        </div>
      </a>
    </li>
    <li class="social-icons__item social-icons__item--telegram">
      <a class="social-icons__link" href="#">
        <div class="social-icons__block">
          <div class="social-icons__svg">
            <svg>
              <use xlink:href="/images/sprite.svg#vk"></use>
            </svg>
          </div>
          <span>Very long text</span>
        </div>
      </a>
    </li>
    <li class="social-icons__item">
      <a class="social-icons__link" href="#">
        <div class="social-icons__block">
          <div class="social-icons__svg">
            <svg>
              <use xlink:href="/images/sprite.svg#vk"></use>
            </svg>
          </div>
          <span></span>
        </div>
      </a>
    </li>
    <li class="social-icons__item">
      <a class="social-icons__link" href="#">
        <div class="social-icons__block">
          <div class="social-icons__svg">
            <svg>
              <use xlink:href="/images/sprite.svg#vk"></use>
            </svg>
          </div>
          <span></span>
        </div>
      </a>
    </li>
    <li class="social-icons__item">
      <a class="social-icons__link" href="#">
        <div class="social-icons__block">
          <div class="social-icons__svg">
            <svg>
              <use xlink:href="/images/sprite.svg#vk"></use>
            </svg>
          </div>
          <span></span>
        </div>
      </a>
    </li>
    <li class="social-icons__item">
      <a class="social-icons__link" href="#">
        <div class="social-icons__block">
          <div class="social-icons__svg">
            <svg>
              <use xlink:href="/images/sprite.svg#vk"></use>
            </svg>
          </div>
          <span></span>
        </div>
      </a>
    </li>
  </ul>
</div>
.social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-icons__list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 0.5rem;
    column-gap: 0.5rem;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.social-icons__item--telegram {
    grid-column: span 3;
    grid-row: span 2;
}
.social-icons__link {
    display: flex;
    color: #bf9595;
}
.social-icons__block {
    display: flex;
    align-items: center;
}
.social-icons__svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #bf9595;
    margin-right: 5px;
    transition: background-color 0.3s;
}
.social-icons__link svg {
    width: 15px;
    height: 15px;
    fill: #fff;
    stroke: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.