JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="9px" height="14px" viewBox="0 0 9 14" enable-background="new 0 0 9 14" xml:space="preserve">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#404C54" d="M7,0l1.414,1.414l-7,7L0,7L7,0z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#404C54" d="M0,7l1.414-1.414l7,7L7,14L0,7z"/>
  </svg>
   Home
 </a>

CSS

a {
  transition: all .4s ease;
  color: #111;
  text-decoration: none;
}
a:hover {
  color: #aaa;
}
a svg > path {
	transition: fill .4s ease;
}
a:hover svg path {
	fill: #aaa;
}