JSFiddle - React, Tailwind, and code Playground

HTML

<table id='headerBar'>
        <tr>
        <td class='headerBarActualTd'><a href='/' class='headerBarIconLink'></a><a href='/' id='homeIcon'></a></td>
        <td class='headerBarSpacingTd'></td>
        <td class='headerBarActualTd'><a href='/{{ user.username }}/' class='headerBarIconLink'></a><a href='/{{ user.username }}/' id='myProfileIcon'></a></td>
        <td class='headerBarSpacingTd'></td>
        <td class='headerBarActualTd'><a href='/settings/settingsPage/' class='headerBarIconLink'></a><a href='/' id='settingsIcon'></a></td>
        </tr>
    </table>

CSS

#settingsIcon::after {
    content:url(http://placehold.it/43x20);
    position: relative;
    width: 43px;
    display: block;
    overflow: hidden;
    height: 20px;
}


#homeIcon:after {
    content:url('soase.png');
    position: relative;
     width: 43px;
}

#myProfileIcon:after {
    content:url('soase.png');
    position: relative;
    width: 43px;
}