JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<i class="fa fa-envelope fa-5x fa-border icon-grey"><span class="badge">17</span></i>

CSS

*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}

i {
    width:100px;
    text-align:center;
    vertical-align:middle;
}

.fa {
    position: relative;
}

.badge {
    font-size: .25em;
    
    display: block;
    position: absolute;
    top: -.75em;
    right: -.75em;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border-radius: 50%;
    text-align: center;
    
    color: #fff;
    background: rgba(0,0,0,0.5);
}