Navigation icons

by Andrey Izman

HTML

<svg xmlns="http://www.w3.org/2000/svg" class="svg__sprite">
    <linearGradient id="gradInst" x1="90.5586%" x2="3.3577%" y1="10.5087%" y2="95.4155%">
        <stop offset="1%" stop-color="#4845a2" stop-opacity="1" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor:#3a3782;"></stop>
        <stop offset="30%" stop-color="#a844a1" stop-opacity="1" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor:#863681;"></stop>
        <stop offset="60%" stop-color="#d7243e" stop-opacity="1" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor:#ac1d32;"></stop>
        <stop offset="87%" stop-color="#f9a326" stop-opacity="1" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor:#b46d05;"></stop>
        <stop offset="99%" stop-color="#f9dd26" stop-opacity="1" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor:#b49d05;"></stop>
    </linearGradient>

    <symbol id="site_soc-vk" viewBox="0 0 19 12">
        <path fill-rule="evenodd" d="M10.143 11.197s.334-.037.504-.219c.157-.166.152-.48.152-.48s-.022-1.483.666-1.699c.678-.213 1.549 1.418 2.471 2.045.698.474 1.228.352 1.228.352l2.467.003s1.29-.097.679-1.102c-.05-.082-.357-.743-1.835-2.101-1.547-1.422-1.34-1.192.524-3.65 1.135-1.499 1.589-2.413 1.447-2.804-.135-.373-.964-.309-.964-.309l-2.784-.001s-.206-.02-.359.07c-.149.09-.245.318-.245.318s-.44 1.18-1.026 2.166c-1.237 2.08-1.731 2.19-1.933 2.06-.47-.3-.353-1.208-.353-1.853 0-2.016.308-2.856-.602-3.074C9.88.847 9.656.8 8.884.792c-.991-.01-1.83.003-2.305.233-.316.153-.56.495-.411.514.183.025.599.112.82.409.284.383.274 1.244.274 1.244s.164 2.372-.382 2.667c-.374.202-.888-.21-1.99-2.097a16.942 16.942 0 0 1-.992-2.055s-.083-.2-.23-.306c-.177-.13-.426-.17-.426-.17H.602s-.396.01-.542.182c-.13.151-.01.465-.01.465s2.067 4.823 4.407 7.236c2.146 2.212 4.582 2.083 4.582 2.083h1.104z"></path>
    </symbol>
    <symbol id="site_soc-ok" viewBox="0 0 11 18">
        <path...

SCSS

body {
  font-family: "Ubuntu sans", sans-serif;
  font-size: 11px;
  overflow: auto;
}

.svg__sprite {
  height: 0px;
  display: none;
}

.services-slider {
  display: flex;
  min-height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;

  .swiper-wrapper {
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.slider__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.slider__text {
  text-align: center;
  display: block;
  margin-top: 4px;
  line-height: 16px;
  font-weight: 500;
  font-size: 13px;
  color: #202438;
}

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.slider__item {
  width: 76px;
}

.services-slider .slider__img {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  height: 56px;
  width: 56px;
  border: 2px solid;
  text-align: center;
  margin: 0 auto;

  svg {
    width: 22px;
    height: 22px;
  }
}

$services: (
  servicesBeauty: #f06292,
  servicesHealth: #00bfa5,
  servicesRestaurant: #7c4dff,
  servicesEntertainment: #ffa000,
  servicesEducation: #388e3c,
  servicesAuto: #1976d2,
  servicesFitness: #03a9f4,
  servicesConcert: #0097a7,
  servicesChildren: #afb42b,
  servicesOther: #303f9f,
  servicesPodmoskovie: #7cb342,
);

@each $service in map-keys($services) {
  $color: map-get($services, $service);
  .services-slider .slider__img.#{$service} {
    border-top-color:...