SVG Animated Gesture Icons - see https://codepen.io/gracelle/pen/rLXrJb

svgAnimateGestures.html

<style>
  /* BASE RULES */

  html, body {
    width: 100%;
    height: 100%;
    background-color: #ccccff;
  }

  div {
    text-align: center;
  }

  svg {
    display: inline-block;
    width: 250px;
    margin: 3% auto;
    padding: 0px 100px;
  }

  /* SVG RULES */

  .hand, 
  .hand-double, 
  .hand-flick, 
  .hand-hold, 
  .hand-rock, 
  .hand-tap, 
  .hand-x, 
  .hand-y {
    fill: #fff;
    stroke: #000;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .arrow-down, 
  .arrow-head, 
  .arrow-left, 
  .arrow-right, 
  .arrow-up, 
  .arrow-up-1, 
  .arrow-up-2, 
  .arrow-up-3,   
  .hold-1,
  .hold-2, 
  .line-horizontal, 
  .line-rotate, 
  .line-vertical, 
  .notes, 
  .tap-1, 
  .tap-2 {
    fill: transparent;
    stroke: #000;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .arrow-up-2, 
  .hold-1, 
  .tap-1 {
    opacity: .5;
  }

  .arrow-up-1, 
  .hold-2, 
  .tap-2 {
    opacity: .25;
  }

  .arrow-up-3, 
  .swipe-horizontal, 
  .swipe-rotate, 
  .swipe-vertical {
    opacity: .75;
  }

  .hold-1, 
  .hold-2, 
  .notes {
    opacity: 0;
  }

  /* ANIMATION KEYFRAMES */

  @keyframes tap-double {
    0% {
      transform: rotateX(0deg);
    }
    10% {
      transform: rotateX(12.5deg);
    }
    25% {
      transform: rotateX(25deg);
    }
    35% {
      transform: rotateX(10deg);
    }
    50% {
      transform: rotateX(25deg);
    }
  }

  @keyframes tap {
    0% {
      transform: rotateX(0deg);
    }
    10% {
      transform: rotateX(12.5deg);
    }
    25% {
      transform: rotateX(25deg);
    }
  }

  @keyframes tap-circle {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    75% {
      transform: scale(1.05);
      opacity: .6;
    }
    80% {
      transform: scale(1);
      opacity: .5;
    }
  }

  @keyframes hold {
    0% {
      transform: rotateX(0deg);
    }
    10% {
      transform: rotateX(12.5deg);
    }
    30% {
      transform: rotateX(25deg);
    }
    80% {
      transform: rotateX(25deg);
    }
  }

  @keyframes fade {
    0% {
      opacity: 0;
    }
    30% {
      opacity: .75
    }
    80% {
      opacity: .75;
    }
  }

  @keyframes swipe-x {
    0% {
      transform: translateX(0px);
    }
    25% {
      transform: translateX(50px) rotateZ(10deg);
    }
    50% {
      transform: translateX(0px);
    }
    75% {
      transform: translateX(-50px) rotateZ(-10deg);
    }
  }

  @keyframes swipe-y {
    0% {
      transform: translateY(0px);
    }
    25% {
      transform: translateY(50px) rotateZ(-10deg);
    }
    50% {
      transform: translateY(0px);
    }
    75% {
      transform: translateY(-50px) rotateZ(10deg);
    }
  }

  @keyframes flick-fade {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
  }

  @keyframes flick {
    0% {
      transform: rotateZ(0deg);
    }
    10% {
      transform: translateY(-12px) rotateZ(50deg);
    }
    25% {
      transform: rotateZ(5deg);
    }
  }

  @keyframes spin {
    0% {
      transform: rotateZ(0deg);
    }
    10% {
      transform: translateY(-10deg) rotateZ(-20deg);
    }
    50% {
      transform: rotateZ(45deg);
    }
  }

  @keyframes rock-on {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(1.1);
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.1);
    }
  }

  @keyframes note {
    0% {
      transform: scale(0) rotateZ(0deg);
      opacity: 0;
    }
    20% {
      transform: scale(1.1) rotateZ(10deg);
    }
    40% {
      transform: scale(0.9) rotateZ(-10deg);
    }
    50% {
      opacity: .75;
    }
    60% {
      transform: scale(1.1) rotateZ(10deg);
    }
    80% {
      transform: scale(0.9) rotateZ(-10deg);
    }
  }

  /* SVG ANIMATION */

  .wrapper * {
    transform-origin: 50% 50%;
    perspective: 100px;
  }

  .hand {
    transform-origin: 25% 50%;
  }

  .hand-tap {
    animation: tap 1.25s ease-out backwards;
    animation-iteration-count:infinite;
  }

  .hand-double {
    animation: tap-double 1.25s ease-out backwards;
    animation-iteration-count:infinite;
  }

  .tap-1,
  .tap-2 {
    animation: tap-circle 1.25s ease-out backwards;
    animation-iteration-count:infinite;
  }

  .hand-hold {
    animation: hold 1.25s ease-out backwards;
    animation-iteration-count:infinite;
  }

  .hold-1, .hold-2 {
    animation: fade 1.25s ease-in backwards;
    animation-iteration-count:infinite;
  }

  .tap-2 {
    animation-delay: 0.2s;
  }

  .hand-x {
    animation: swipe-x 1.25s ease-in-out backwards;
    animation-iteration-count:infinite;
  }

  .hand-y {
    animation: swipe-y 1.25s ease-in-out backwards;
    animation-iteration-count:infinite;
  }

  .hand-flick {
    animation: flick 1.25s ease-out backwards;
    animation-iteration-count:infinite;
  }

  .arrows {
    opacity: 0;
    animation: flick-fade 1.25s ease-out backwards;
    animation-iteration-count:infinite;
  }

  .hand, 
  .swipe-rotate {
    animation: spin 1.25s ease-in-out backwards;
    animation-iteration-count:infinite;
  }

  .hand-rock {
    animation: rock-on 1.25s ease-out backwards;
    animation-iteration-count:infinite;
  }

  .notes {
    animation: note 1.25s ease-out backwards;
    animation-iteration-count:infinite;
  }
</style>
<div class="wrapper">
  <!-- Single-Finger Tap Icon -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <circle class="tap-1" cx="89.43" cy="64.48" r="19.46"/>
    <path class="hand-tap" d="M139.93,102.68,98.81,95.75V65.2A9.25,9.25,0,0,0,89.56,56h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,111.77c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,102.68Z"/>
  </svg>

  <!-- Single-Finger Double-Tap Icon -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <circle class="tap-2" cx="89.43" cy="69.55" r="29.61"/>
    <circle class="tap-1" cx="89.43" cy="69.55" r="19.46"/>
    <path class="hand-double" d="M139.93,107.76l-41.12-6.93V70.28A9.25,9.25,0,0,0,89.56,61h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,116.85c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,107.76Z"/>
  </svg>

  <!-- Single-Finger Press + Hold Icon -->
  <svg id="Press-hold_1" data-name="Press hold 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path class="hold-2" d="M56,72.25a33.5,33.5,0,0,1,67,0"/>
    <path class="hold-1" d="M67,72.25a22.5,22.5,0,0,1,45,0"/>
    <path class="hand-hold" d="M139.93,109,98.81,102V71.48a9.25,9.25,0,0,0-9.25-9.25h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,118c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,109Z"/>
  </svg>

  <!-- Single-Finger Swipe Left & Right Icon -->
  <svg id="Swipe-horizontal_1" data-name="Swipe horizontal 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path class="hand-x" d="M139.93,113.56l-41.12-6.93V76.08a9.25,9.25,0,0,0-9.25-9.25h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,122.65c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,113.56Z"/>
    <g class="swipe-horizontal">
      <path class="line-horizontal" d="M70.85,42c19.69-12.46,37,0,37,0"/>
      <polyline class="arrow-left" points="76.6 46.01 68.37 43.43 68.38 43.41 70.96 35.18"/>
      <polyline class="arrow-right" points="100.21 44.66 108.43 42.08 108.43 42.06 105.85 33.84"/>
    </g>
  </svg>

  <!-- Single-Finger Swipe Up & Down Icon -->
  <svg id="Swipe-vertical_1" data-name="Swipe vertical 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path class="hand-y" d="M131.09,69.21l-34,24.17-21.6-21.6a9.25,9.25,0,0,0-13.08,0h0a9.25,9.25,0,0,0,0,13.08L103,125.43l-14.18-1.08c-5.11,0-8.72,3.22-9.25,9.25,0,0-1,9.25,3.83,9.25h48l30.14-30.14A9.25,9.25,0,0,0,162.72,101L143.43,72.11A9.28,9.28,0,0,0,131.09,69.21Z"/>
    <g class="swipe-vertical">
      <path class="line-vertical" d="M43.94,94.27c-12.46-19.69,0-37,0-37"/>
      <polyline class="arrow-down" points="47.93 88.53 45.35 96.75 45.33 96.75 37.11 94.17"/>
      <polyline class="arrow-up" points="46.59 64.92 44.01 56.69 43.98 56.7 35.76 59.28"/>
    </g>
  </svg>

  <!-- Single-Finger Flick Icon -->
  <svg id="Flick_1" data-name="Flick 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path class="hand-flick" d="M132.11,67.61l-34,24.17-21.6-21.6a9.25,9.25,0,0,0-13.08,0h0a9.25,9.25,0,0,0,0,13.08L104,123.82l-14.18-1.08c-5.11,0-8.72,3.22-9.25,9.25,0,0-1,9.25,3.83,9.25h48l30.14-30.14a9.25,9.25,0,0,0,1.16-11.67L144.45,70.51A9.28,9.28,0,0,0,132.11,67.61Z"/>
    <g class="arrows">
      <polyline class="arrow-up-3" points="34.7 64.95 40.73 58.79 40.75 58.8 46.91 64.83"/>
      <polyline class="arrow-up-2" points="34.7 74.99 40.73 68.83 40.75 68.85 46.91 74.88"/>
      <polyline class="arrow-up-1" points="34.7 85.04 40.73 78.88 40.75 78.89 46.91 84.92"/>
    </g>
  </svg>

  <!-- Single-Finger Rotate Icon -->
  <svg id="Rotate_1" data-name="Rotate 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <g class="swipe-rotate">
      <path class="line-rotate" d="M57.8,96.7c-5.4,5.4-14.2,5.4-19.6,0s-5.4-14.2,0-19.6s14.2-5.4,19.6,0"/>
      <polyline class="arrow-head" points="58.9,70.1 59,78.7 59,78.7 50.4,78.8 "/>
    </g>
    <path class="hand" d="M159.1,91.8l-41.1-6.9l0-22.9c0-3.3-2.7-6.1-6.1-6.1H99.4h-18c-4.9,0-9.2,3.7-9.5,8.6c-0.3,5.4,3.9,9.9,9.2,9.9h18.3v37.2l-9.3-10.8c-3.6-3.6-8.4-3.9-13.1,0c0,0-7.2,5.8-3.8,9.3l34,34h42.6c4.4,0,8.2-3.1,9.1-7.4l6.8-34.1C166.7,97.8,163.8,93,159.1,91.8z"/>
  </svg>

  <!-- Double-Finger Double-Tap Icon -->
  <svg id="Double-tap_2" data-name="Double tap 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path class="tap-2" d="M140.09,65.79A31.39,31.39,0,0,0,86.09,44a31.4,31.4,0,1,0,25.82,53A31.4,31.4,0,0,0,140.09,65.79Z"/>
    <path class="tap-1" d="M109.35,46.58A19.43,19.43,0,0,0,92.72,56a19.46,19.46,0,1,0,12.56,29.09,19.46,19.46,0,1,0,4.07-38.48Z"/>
    <path class="hand-double" d="M139.93,113.3l-22.6-3.81V68.17a9.25,9.25,0,0,0-18.5,0v41.2h0V75.83a9.25,9.25,0,0,0-9.25-9.25h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,122.39c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,113.3Z"/>
  </svg>

  <!-- Double-Finger Swipe Left & Right Icon -->
  <svg id="Swipe-horizontal_2" data-name="Swipe horizontal 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path class="hand-x" d="M139.93,113.56l-22.6-3.81V68.43a9.25,9.25,0,0,0-18.5,0v41.2h0V76.08a9.25,9.25,0,0,0-9.25-9.25h0a9.25,9.25,0,0,0-9.25,9.25v57.36L71,122.65c-3.61-3.61-8.44-3.89-13.08,0,0,0-7.24,5.84-3.83,9.25l34,34h42.63a9.25,9.25,0,0,0,9.07-7.43l6.82-34.09A9.28,9.28,0,0,0,139.93,113.56Z"/>
    <g class="swipe-horizontal">
      <path class="line-horizontal" d="M82.15,41.32c19.69-12.46,37,0,37,0"/>
      <polyline class="arrow-left" points="87.89 45.32 79.67 42.74 79.67 42.71 82.25 34.49"/>
      <polyline class="arrow-right" points="111.5 43.97 119.73 41.39 119.72 41.36 117.14 33.14"/>
    </g>
  </svg>

  <!-- Double-Finger Swipe Up & Down Icon -->
  <svg id="Swipe-vertical_2" data-name="Swipe vertical 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path class="hand-y" d="M131.09,72.5,112.42,85.79,83.21,56.57A9.25,9.25,0,0,0,70.13,69.65L99.26,98.78h0L75.52,75.08a9.25,9.25,0,0,0-13.08,0h0a9.25,9.25,0,0,0,0,13.08L103,128.72l-14.18-1.08c-5.11,0-8.72,3.22-9.25,9.25,0,0-1,9.25,3.83,9.25h48L161.56,116a9.25,9.25,0,0,0,1.16-11.67L143.43,75.4A9.28,9.28,0,0,0,131.09,72.5Z"/>
    <g class="swipe-vertical">
      <path class="line-vertical" d="M44.28,98.76c-12.46-19.69,0-37,0-37"/>
      <polyline class="arrow-down" points="48.27 93.02 45.69 101.24 45.67 101.24 37.45 98.66"/>
      <polyline class="arrow-up" points="46.92 69.41 44.35 61.18 44.32 61.19 36.1 63.77"/>
    </g>
  </svg>

  <!-- Double-Finger Flick Icon -->
  <svg id="Flick_2" data-name="Flick 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path class="hand-flick" d="M132.11,77.62,113.44,90.9,84.22,61.68A9.25,9.25,0,0,0,71.14,74.76l29.13,29.13h0L76.53,80.19a9.25,9.25,0,0,0-13.08,0h0a9.25,9.25,0,0,0,0,13.08L104,133.83l-14.18-1.08c-5.11,0-8.72,3.22-9.25,9.25,0,0-1,9.25,3.83,9.25h48l30.14-30.14a9.25,9.25,0,0,0,1.16-11.67L144.45,80.51A9.28,9.28,0,0,0,132.11,77.62Z"/>
    <g class="arrows">
      <polyline class="arrow-up-3" points="34.69 54.91 40.72 48.75 40.74 48.76 46.9 54.79"/>
      <polyline class="arrow-up-2" points="34.69 64.95 40.72 58.79 40.74 58.81 46.9 64.83"/>
      <polyline class="arrow-up-1" points="34.69 75 40.72 68.84 40.74 68.85 46.9 74.88"/>
    </g>
  </svg>

  <!-- Rock On Icon -->
  <svg id="Rock_on" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path class="hand-rock" d="M161.926,68.25c0-5.109-4.141-9.25-9.25-9.25s-9.25,4.141-9.25,9.25v27l-29.475-4.969V59.736c0-5.109-4.141-9.25-9.25-9.25h0c-5.109,0-9.25,4.141-9.25,9.25v57.358l-9.268-10.79c-3.612-3.612-8.44-3.892-13.081,0c0,0-7.245,5.837-3.831,9.25l33.959,33.959h42.629c4.407,0,8.202-3.111,9.067-7.433l6.819-34.093c0.088-0.438,0.132-0.875,0.156-1.31l0.025-0.015V68.25z"/>
    <g class="notes">
      <polyline points="49.058,112.498 48.963,91.106 48.988,91.104 57.607,91.009"/>
      <circle cx="43.566" cy="112.498" r="5.492"/>
      <polyline points="58.824,72.314 58.729,50.922 58.754,50.92 76.061,50.872 76.061,79.078"/>
      <circle cx="53.332" cy="72.314" r="5.492"/>
      <circle cx="70.569" cy="79.32" r="5.492"/>
    </g>
  </svg>
</div>