In css>layout.css lines 267 through 301 you’ll find all the css for the social media icons. The way they are currently set up is that each icon is a single image that has the social symbol repeated twice in the single image. When hovered over, the image moves to show the over state.
The easiest transition to using your own icons would be to replace the files for all the icons in images>icons to use that same effect. That way the css stays the same but you change out the look of it all.
If you want to remove the background color that appears on hover, just remove all the background-color properties from the css lines I mentioned above.