<ul class="nav-icon">
      <li class="nav-icon-item about nav-icon__active"></li>
      <li class="nav-icon-item msg"></li>
      <li class="nav-icon-item secure"></li>
      <li class="nav-icon-item info"></li>
      <li class="nav-icon-item interact"></li>
      <li class="nav-icon-item stats"></li>
    </ul>

.nav-icon {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.nav-icon .about {
    -webkit-mask: url(https://a.icons8.com/QWVYcSVg/drHHlY/shape.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    fill: #455;
    background: #000;
}

.nav-icon-item {
    width: 50px;
    height: 50px;
    background-color: #f4f4f4;
    list-style-type: none;
    margin: 0 10px;
    border-radius: 14px;
}