JSFiddle - React, Tailwind, and code Playground

by Creak

HTML

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

<svg
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 12 24">
    <symbol id="arrow">
        <path
                d="M 0.012524,18.962014 C 3.2399372,15.622018 7.0710069,12.023346 7.0710069,11.999733
                7.0710069,11.976103 3.2800584,8.156534 0,4.868412 0,0.036481 0,4.868412 0.00839866,0 L 6.0041993,6.010546
                12,12.021087 6.0256844,18.010546 0.0125092,24 Z"/>
    </symbol>
</svg>

    <symbol id="fish" viewBox="0 0 100 48">
        <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
    c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
    c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
    C88,48.9,86.9,50,85.5,50z"/>
    </symbol>
</svg>

<svg class="icon"><use xlink:href="#arrow" /></svg>

<svg class="icon"><use xlink:href="#fish" /></svg>

CSS

.icon {
  fill: #622a3d;
}