Changing the Color of Social Icons with CSS

Today’s quick CSS tutorial shows you how to change the color of a regular social media icon and how to make it change color when someone hovers over it. Both edits are quick copy and paste CSS tricks, codes below! Enjoy :)


End credit background music provided by

The following code is to change the display color:


fill: #50bdb8 !important;/* normal color */


The following code is to change the hover color:

.sqs-svg-icon--wrapper:hover .sqs-use--icon{

fill: #f69477 !important;/* hover color */



All Squarespace sites are built using a specific theme family, and that means not all elements are called the same thing behind the scenes. When working in CSS it is important to identify the initial symbol that your CSS code needs to work with an element. If this is going over your head, don’t worry! It really isn’t as complicated as it sounds. When using code, the very first symbol can help the system figure out what you are asking it to do. Some theme families use a pound symbol, or hashtag if you were born after 1985 ( # ) while others use a period ( . ) Brine is a common family that uses ( . ) while Bedford templates generally use ( # ) If your CSS code isn’t working the way you want it to, the first thing you can do to troubleshoot that would be to see if changing the symbol can make it work.

If you are still pretty new to CSS, this is something I cover in my free Getting Started with CSS guide. Definitely check it out if you are curious about CSS or code in general: