JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0; overflow: hidden;">
    <defs>
        <symbol id="back" viewBox="0 0 253 479">
            <path d="M33.188,239.575 L248.688,24.075 C253.988,18.775 253.988,10.275 248.688,4.975 C243.388,-0.325 234.888,-0.325 229.588,4.975 L4.488,230.075 C-0.812,235.375 -0.812,243.875 4.488,249.175 L229.588,474.175 C232.188,476.775 235.688,478.175 239.088,478.175 C242.488,478.175 245.988,476.875 248.588,474.175 C253.888,468.875 253.888,460.375 248.588,455.075 L33.188,239.575 L33.188,239.575 Z" />
        </symbol>

        <symbol id="next" viewBox="0 0 253 479">
			<path d="M248.731,230.075 L23.631,4.975 C18.331,-0.325 9.831,-0.325 4.531,4.975 C-0.769,10.275 -0.769,18.775 4.531,24.075 L220.031,239.575 L4.531,455.075 C-0.769,460.375 -0.769,468.875 4.531,474.175 C7.131,476.775 10.631,478.175 14.031,478.175 C17.431,478.175 20.931,476.875 23.531,474.175 L248.631,249.075 C253.931,243.875 253.931,235.275 248.731,230.075 L248.731,230.075 Z" />
        </symbol>
    </defs>
</svg>

<a href="" class="arrow">
  <svg role="image">
      <use xlink:href="#back"/>
  </svg>
</a>

<a href="" class="arrow">
  <svg role="image">
      <use xlink:href="#next"/>
  </svg>
</a>

<br>

<a href="" class="arrow arrow--super-small">
  <svg role="image">
      <use xlink:href="#back"/>
  </svg>
</a>

<a href="" class="arrow arrow--small">
  <svg role="image">
      <use xlink:href="#next"/>
  </svg>
</a>

CSS

svg {
    stroke-width: 0;
    fill: currentColor;
    stroke: currentColor;
    display: inline-block;
    shape-rendering: geometricPrecision;
}

.arrow {
  width: 53px;
  color: #f00;
  position: relative;
  display: inline-block;
  outline: 1px solid lime;
  transition: color .6s ease-in-out;
}

.arrow svg {
	position: absolute;
	left: 0;
	top: 0;
}

.arrow:before {
	display: block;
	content: "";
	padding-bottom: 188.679245283%;
}

.arrow--small {
	width: 27px;
}

.arrow--super-small {
	width: 16px;
}

.arrow svg {
  max-width: 100%;
  max-height: 100%;
}

.arrow:hover {
  color: green;
}