JSFiddle - React, Tailwind, and code Playground

by placeless

HTML

<div class="smile icon"><i></i></div>

CSS

.smile.icon{
            position: relative;
            width: 20px;
            height: 20px;
            display: inline-block;
            border: 1px solid black ;
           border-radius: 50%;
        }
        .smile.icon:before{
            position: absolute;
            top:3px;
            left: 2px;
            content: '';
            width: 5px;
            height: 5px;
            display: inline-block;
            border: 1px solid black ;
            border-radius: 50%;
        }
        .smile.icon:after{
            position: absolute;
            top:3px;
            right: 2px;
            content: '';
            width: 5px;
            height: 5px;
            display: inline-block;
            border: 1px solid black ;
            border-radius: 50%;
        }
        .smile.icon i{
            position: absolute;
            left: 4px;
            top: 5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border-top: solid 1px transparent;
            border-bottom: solid 1px black;
            border-left: solid 1px transparent;
            border-right: solid 1px transparent;
        }