JSFiddle - React, Tailwind, and code Playground

by Patrick Ludewig

HTML

<svg class="icon icon-account {{ customClasses }}" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 18" >
<path id="icon-account-body-bg" d="m11.514 12.58a16.135 16.135 0 0 0-11.467 4.8281l0.49023 0.64062h21.766l0.66211-0.66211a16.135 16.135 0 0 0-11.451-4.8066z" fill="none"/>
<path id="icon-account-head-bg" d="m16.577 5.7183a5.0506 5.0506 0 0 1-5.0506 5.0506 5.0506 5.0506 0 0 1-5.0506-5.0506 5.0506 5.0506 0 0 1 5.0506-5.0506 5.0506 5.0506 0 0 1 5.0506 5.0506z" fill="none"/>
<path id="icon-account-border" d="M11.5 13.645a15.476 15.476 0 0 0-6.085 1.23l-.404-.905c6.127-2.592 13.24-1.275 17.989 3.332l-.716.698A15.35 15.35 0 0 0 11.5 13.645zM0 17.302a16.265 16.265 0 0 1 2.705-2.128l.548.83A15.249 15.249 0 0 0 .716 18L0 17.302zm5.74-11.59C5.72 3.416 7.112 1.336 9.262.444a5.831 5.831 0 0 1 6.293 1.196 5.594 5.594 0 0 1 1.27 6.177c-.887 2.122-2.99 3.507-5.324 3.507-3.166.01-5.742-2.502-5.76-5.614zm1.014 0c-.017 1.89 1.13 3.603 2.901 4.338a4.805 4.805 0 0 0 5.185-.987 4.61 4.61 0 0 0 1.047-5.089c-.733-1.748-2.465-2.89-4.388-2.89-2.608-.007-4.73 2.062-4.745 4.627z" fill="currentColor" fill-rule="evenodd"/>
  <g id="icon-account-face" fill="none">
    <path class="icon-account-face-eye-left" d="M13.9999 4.50008C13.9999 4.96032 13.6268 5.33341 13.1666 5.33341C12.7063 5.33341 12.3333 4.96032 12.3333 4.50008C12.3333 4.03984 12.7063 3.66675 13.1666 3.66675C13.6268 3.66675 13.9999 4.03984 13.9999 4.50008Z"/>
    <path class="icon-account-face-eye-right" d="M10.6667 4.50008C10.6667 4.96032 10.2936 5.33341 9.83333 5.33341C9.3731 5.33341 9 4.96032 9 4.50008C9 4.03984 9.3731 3.66675 9.83333 3.66675C10.2936 3.66675 10.6667 4.03984 10.6667 4.50008Z"/>
    <path class="icon-account-face-mouth" d="M13.0537 7.27441V7.27539L13.0527 7.27637C13.0537 7.27714 13.0752 7.28757 13.5 7.5C13.9472 7.72361 13.9474 7.72434 13.9473 7.72461H13.9463V7.72559C13.9459 7.72641 13.9448 7.72756 13.9443 7.72852C13.9434 7.73039 13.9426 7.73301 13.9414...

SCSS

#icon-account-face {
  fill: black;
}
svg {
  &:hover {
    .icon-account-face-mouth {
      transform: rotateX(180deg) translateY(10%);
      transform-origin: center;
      fill: red;
      transition: 300ms ease all;
    }
  }
}
.icon-account-face-mouth {
  transform: rotateX(0deg) translateY(0);
  transform-origin: center;
  fill: blue;
  transition: 300ms ease all;
}