JSFiddle - React, Tailwind, and code Playground
by soulwire
HTML
// Happy
<svg width="67px" height="65px" viewBox="0 0 67 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Flow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="end-of-queu" transform="translate(-198.000000, -817.000000)" stroke="#FFFFFF" stroke-width="3">
<g id="Group-19" transform="translate(200.000000, 818.000000)">
<path d="M32,17.5144928 C39.7320833,17.5144928 46,24.0064326 46,32.0148704 C46,40.0233081 39.7320833,46.5144928 32,46.5144928 C24.2679167,46.5144928 18,40.0233081 18,32.0148704 C18,24.0064326 24.2679167,17.5144928 32,17.5144928 Z" id="Stroke-1"></path>
<path d="M31.5,0.514492754 L31.5,7.51449275" id="Stroke-3"></path>
<path d="M10,10.5144928 L14,14.5144928" id="Stroke-5"></path>
<path d="M0,32.0139928 L7,32.0149928" id="Stroke-7"></path>
<path d="M10,52.5144928 L14,48.5144928" id="Stroke-9"></path>
<path d="M31.5,62.5144928 L31.5,55.5144928" id="Stroke-11"></path>
<path d="M53,52.5144928 L49,48.5144928" id="Stroke-13"></path>
<path d="M63,32.0144928 L56,32.0144928" id="Stroke-15"></path>
<path d="M53,10.5144928 L49,14.5144928" id="Stroke-17"></path>
</g>
</g>
</g>
</svg>
Anxois
<svg width="67px" height="70px" viewBox="0 0 67 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Flow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="end-of-queu" transform="translate(-402.000000, -816.000000)" stroke="#FFFFFF" stroke-width="3">
<g id="Group-7" transform="translate(404.000000, 818.000000)">
<path d="M6.48538375,23.1567568 L6.88744151,23.1567568 C7.44286152,23.0238526...
CSS
html, body {
background: #000;
}
svg {
display: block;
border: 1px solid red;
}