JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation-box">   									
									<div class="sidehead"><i class="lock"></i>header 1</div>								
										<div class="navLinks">
											<ul class="">
												<li>1</li>
												<li>2</li>
												<li>3</li>
											</ul>
										</div>			
								</div>

CSS

body { background-color: grey }
.lock {
    background: url('http://uploadir.com/u/il2433z4') no-repeat center;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    margin-top:-5px;
	margin-left:5%;
}
.navigation-box:hover > .sidehead > .lock{
	background: url("http://uploadir.com/u/4js58y48") no-repeat center;	 
}

JavaScript

$(".navigation-box").mouseover(function(){
    $(".lock").css("background"," url('http://uploadir.com/u/4js58y48') no-repeat center")
});
$(".navigation-box").mouseout(function(){
    $(".lock").css("background"," url('http://uploadir.com/u/il2433z4') no-repeat center")
});