Анимированные иконки по вашей ссылке довольно сложны
А если попробовать сделать анимацию иконки самостоятельно. Действительно ли это так сложно?
Например попытаться анимировать Running Infinity
иконку

Создание анимации иконки по шагам:
Шаг #1. В векторном редакторе рисуем восьмерку и вычисляем полную длину контура - getTotalLength()
<style>
.container {
width:10%;
height:auto;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path id="path" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#151515" stroke-width="10" />
</svg>
<script>
console.log('Полная длина :' + Math.round(path.getTotalLength()) +'px')
</script>
Шаг #2. Вырезаем часть контура с помощью stroke-dasharray="202.75,54.25"
, где 54.25
- пробел
Обратите внимание: если сложить цифры длин черты и пробела получится максимальная длина контура 257px
<style>
.container {
width:8%;
height:auto;
background:white;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-dashoffset="27" stroke-dasharray="202.75,54.25" stroke="black" stroke-width="8" />
</svg>
Шаг #3. Добавляем анимацию вращения контура с помощью stroke-dashoffset
<animate attributeName="stroke-dashoffset" values="257; 0" begin="svg1.click"
dur="1s" restart="whenNotActive" repeatCount="indefinite" />
<style>
.container {
width:8%;
height:auto;
background:white;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-dashoffset="27" stroke-dasharray="202.75,54.25" stroke="black" stroke-width="8" >
<animate attributeName="stroke-dashoffset" values="257; 0" begin="svg1.click" dur="1s" restart="whenNotActive" repeatCount="indefinite" />
</path>
</svg>
Шаг #4. Вращение иконки при наведении :hover
Добавляем в условие запуска begin="svg1.mouseenter" end="svg1.mouseleave"
<style>
.container {
width:8%;
height:auto;
background:white;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-dashoffset="27" stroke-dasharray="202.75,54.25" stroke="black" stroke-width="8" >
<animate attributeName="stroke-dashoffset" values="257; 0" begin="svg1.mouseenter" end="svg1.mouseleave" dur="1s" restart="whenNotActive" repeatCount="indefinite" />
</path>
</svg>
Вариант анимации CSS
При разработке варианта анимации SVG были вычислены необходимые значения параметров атрибутов stroke-dasharray:202.75,54.25;
и stroke-dashoffset
Остается их перенести в CSS правила:
.container {
width:8%;
height:auto;
background:white;
}
#eight {
fill:none;
stroke:black;
stroke-width:8;
stroke-dasharray:202.75,54.25;
stroke-dashoffset:27px;
}
#svg1:hover #eight {
fill:#dedede;
animation:move 1s infinite linear;
}
@keyframes move {
0% {stroke-dashoffset:27px;}
100% {stroke-dashoffset:257px;}
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path id="eight" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" />
</svg>