<div class="icon-conatiner">
    <?xml version="1.0" encoding="UTF-8"?>
    <svg width="19px" height="21px" viewBox="0 0 19 21" version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Group</title>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-142.000000, -122.000000)">
          <g id="Group" transform="translate(142.000000, 122.000000)">
            <path
              d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"
              id="Rectangle-Copy" fill="#C4FFE4"></path>
            <path
              d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"
              id="Rectangle" fill="#85EBBC"></path>
            <path d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z" id="Path-2"
              fill="#64B18D"></path>
          </g>
        </g>
      </g>
    </svg>
    <svg width="19px" height="21px" viewBox="0 0 19 21" version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Group</title>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-142.000000, -122.000000)">
          <g id="Group" transform="translate(142.000000, 122.000000)">
            <path
              d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"
              id="Rectangle-Copy" fill="#C4FFE4"></path>
            <path
              d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"
              id="Rectangle" fill="#85EBBC"></path>
            <path d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z" id="Path-2"
              fill="#64B18D"></path>
          </g>
        </g>
      </g>
    </svg>
  </div>
<div class="text">long press me</div>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #c1ffe2;
}

.icon-conatiner {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 20px 20px 15px 0 #ababab4d;
  cursor: pointer;
  /* animation: bounce 0.3s 1 forwards; */
}
svg {
  width: 50px;
  height: auto;
}
svg:last-child {
  position: absolute;
}

.icon-conatiner:active {
  animation: press 0.2s 1 linear;
}
.icon-conatiner:active svg:last-child {
  animation: bounce 0.2s 1 linear;
}
.text {
  color: #666;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
}
@keyframes press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.92);
  }
  to {
    transform: scale(1);
  }
}
@keyframes bounce {
  50% {
    transform: rotate(5deg) translate(20px, -50px);
  }
  to {
    transform: scale(0.9) rotate(10deg) translate(50px, -80px);
    opacity: 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.