JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="toolbar">
    <ul>
        <li><i class="fa fa-home"></i></li>
    </ul>
</div>

CSS

li{
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 24px;

}

.fa-home{
    padding: 20px;
    border: 1px solid #000;
    border-radius: 24px;
}

.fa-home{
    animation-name: popout;
	animation-duration: 0.4s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

@keyframes popout{
	from{
		font-size: 100%;
	}
	
	33%{
		background: inherit;
	}
	
	to{
		font-size: 200%;
		background: #eeffee;
	}
}