JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-server"></i>

CSS

i.fa {
  margin: 0.5em;
  font-size: 4em;
  color: #303030;
  border: 2px solid #303030;
  border-radius: 50%;
  padding: 0.5em;
  transition: all .5s ease;
}

i.fa:hover{
  color:lightblue;
   border: 2px solid lightblue;
  cursor:pointer;
}