JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="p-4 row">	
<table class="table">
<tr><td>FontAwesome 4</td><td>IconBlender</td></tr>
<tr>
  <td><i class="fa fa-spinner fa-spin fa-2x"></i></td>
  <td><i class="h2 ib ib-fa-spinner fa-spin"></i></td>
</tr>
</table>

</div>

CSS

.ib{
	display: inline-block;
	height: 1em;
	width: 1em;
	background: currentColor;
	vertical-align: -.125em;
	mask-image: var(--url);
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: var(--url);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}


/* Icon: fa-spinner
 * License: Open Font License
 * Html: <i class="ib ib-fa-spinner"></i>
 */
.ib-fa-spinner{
	--url: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1664 1728"%3e%3cpath d="M462 1394q0 53-37.5 90.5T334 1522q-52 0-90-38t-38-90q0-53 37.5-90.5T334 1266t90.5 37.5T462 1394zm498 206q0 53-37.5 90.5T832 1728t-90.5-37.5T704 1600t37.5-90.5T832 1472t90.5 37.5T960 1600zM256 896q0 53-37.5 90.5T128 1024t-90.5-37.5T0 896t37.5-90.5T128 768t90.5 37.5T256 896zm1202 498q0 52-38 90t-90 38q-53 0-90.5-37.5T1202 1394t37.5-90.5t90.5-37.5t90.5 37.5t37.5 90.5zM494 398q0 66-47 113t-113 47t-113-47t-47-113t47-113t113-47t113 47t47 113zm1170 498q0 53-37.5 90.5T1536 1024t-90.5-37.5T1408 896t37.5-90.5T1536 768t90.5 37.5T1664 896zm-640-704q0 80-56 136t-136 56t-136-56t-56-136t56-136T832 0t136 56t56 136zm530 206q0 93-66 158.5T1330 622q-93 0-158.5-65.5T1106 398q0-92 65.5-158t158.5-66q92 0 158 66t66 158z" fill="currentColor"/%3e%3c/svg%3e');
}