You can just set the size of the image and the browser will scale it for you and I would recommend using the .hover()
event which covers both mouse over and mouse leave:
$(".toolbarIcon").hover(function(){
$(this).css("background-color","#FFCC80");
$(this).find("img").css({height: "30px", width: "30px"});
}, function() {
$(this).css("background-color","#EBEBFF");
$(this).find("img").css({height: "40px", width: "40px"})
});
You could also use just CSS for this too:
.toolbarIcon:hover img {
width: 30px;
height: 30px;
}
Depending upon the exact effect you want, you may also want to tweak the padding below the image to keep it vertically centered when you hover.