Website Building » Squarespace » How Do I Change the Color of Social Icons in Squarespace?

How Do I Change the Color of Social Icons in Squarespace?

Last updated on December 23, 2022 @ 9:15 am

There are two ways to change the color of social icons in Squarespace. The first is to use a custom CSS code, and the second is to use the Design panel.

To change the color of social icons using custom CSS, follow these steps:

    1. In the Home Menu, click Design, and then click Custom CSS.

    2. Paste the following code into the Custom CSS Editor:
    sqs-social-icon {
    fill: #000000;
    }

    3. Click Apply and then Save.

To change the color of social icons using the Design panel, follow these steps:

PRO TIP: If you are not careful, changing the color of your social icons in Squarespace can have unintended consequences. For example, if you change the color of your Facebook icon to blue, it will also change the color of your Facebook page’s Like button to blue. This could confuse your visitors and make them think they are liking a different page. It is best to leave the colors of your social icons as they are, or to consult with a Squarespace expert before making any changes.
    1. In the Home Menu, click Design, and then click Site Styles.
    2.Scroll down to the Social Links section, and then click Change Colors.
    3. Click on the color you want to use for your social icons, and then click Apply and Save.
Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.