JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="0" height="0" viewBox="0 0 32 32" style="position:absolute;margin-left: -100%;">
        <path id ="home-icon" d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962
                c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59
                c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507
                h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/>
    </svg>
    <svg width="0" height="0" viewBox="0 0 64 64" style="position:absolute;margin-left: -100%;">
        <g id="project-icon">
            <polygon points="22,6 22,10 28,16 22,22 22,26 32,16 	"/>
            <polygon points="10,10 10,6 0,16 10,26 10,22 4,16 	"/>
            <polygon points="18,12 10,20 14,20 22,12 	"/>
        </g>
    </svg>

<nav id="top-menu">
    home (viewBox 64x64px)
    <br/>
    <svg class="menu-icon" viewBox="0 0 64 64">
        <use xlink:href="#home-icon" />
    </svg>
    <br/>
    home (viewBox 32x32px)
    <br/>
    <svg class="menu-icon" viewBox="0 0 32 32">
        <use xlink:href="#home-icon" />
    </svg>
    <br/>
    project (viewBox 32x32px)
    <br/>
    <svg class="menu-icon" viewBox="0 0 32 32">
        <use xlink:href="#project-icon" />
    </svg>
</nav>

CSS

.menu-icon{ 
  width: 32px;
  height: 32px;
  fill: #ccc;
}