JSFiddle - React, Tailwind, and code Playground

HTML

<a class="menu_b" href="#">
<svg width="50px" height="50px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" style="
    width: 50px;
    height: 200px;
"><animate attributeType="CSS" attributeName="opacity" 
         from="1" to="0" dur="3s" repeatCount="indefinite" />
    <title>naive locus</title>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="118" height="108"><image xlink:href="https://31.media.tumblr.com/9766ee4952b593bbc1af5e2d2249c858/tumblr_inline_mxnnn7dXwh1s16nrs.jpg" x="0" y="0" width="50" height="80"></image>
        </pattern>
    </defs>
<text x="0" y="0" font-size="59" fill="url(#img1)">
        <tspan x="-1" y="59">▼</tspan>
    </text>
</svg>
    </a>

CSS

svg {border: none; -webkit-transition: all .2s; -webkit-transform-origin: top;  -moz-transform-origin: bottom; transform: translateZ(0);}

a:hover svg, a:focus svg { -webkit-transform: scale(2); -moz-transform: scale(2); }