How to Customize Squarespace Social Media Icons Colors

Are you looking to make your Squarespace website truly stand out? Customizing the color of your social media icons in the header is a simple yet powerful way to give your site a unique and professional look. By default, Squarespace matches your social icons to your navigation link colors—but with a bit of custom CSS, you can set your icons, backgrounds, and even outlines to any color you want!

Here I’ll explain you step-by-step process, how to change the color of your header social media icons on both desktop and mobile menus in Squarespace.

Why Customize Social Media Icon Colors in Squarespace?

Custom social media icon colors can:

• Enhance your brand identity by matching your brand palette
• Improve visibility and accessibility for users
• Make your header look more polished and professional

Where to Add Custom CSS in Squarespace

• Log in to your Squarespace account.
• Navigate to the Website> Pages> Custom Code > Custom CSS and then paste the code given below.

Step 1: Customize Desktop Header Social Media Icon Colors

Let’s start by changing the social media icon colors in your desktop header. You can set the icon fill, background color, and outline color (border) individually.

.Header-actions .Header-action--social svg {
  fill: #ff0000; /* Icon color (red in this example) */
  background: #ffeb3b; /* Background color (yellow in this example) */
  border-radius: 50%; /* Optional: makes icons round */
  box-shadow: 0 0 0 2px #2196f3 inset; /* Outline color (blue in this example) */
}

How to customize:

• Replace #ff0000 with your brand’s hex color for the icon.

• Change #ffeb3b to your desired background color (or remove for a transparent bg).

• Adjust the 2px value for a thicker or thinner outline, and change #2196f3 to your preferred border color.

/* Mobile Menu Social Media Icon Color */
.Mobile-bar-social svg {
  fill: #ff0000; /* Icon color */
  background: #ffeb3b; /* Background color */
  border-radius: 50%;
  box-shadow: 0 0 0 2px #2196f3 inset; /* Outline color */
}

Note: On mobile, these CSS selectors may vary depending on your Squarespace template. Always inspect your site elements and to confirm selectors if needed.

Step 3: Add Hover Effects to Desktop Social Media Icons

Want your social icons to come alive when a user hovers over them? Add a hover effect to change both the icon and background color on mouseover.

/* Social Icon Hover Effect for Desktop */
.Header-actions .Header-action--social svg:hover {
  fill: #29b6f6; /* Icon color on hover */
  background: #fff176; /* Background color on hover */
}

Hover effects aren’t needed for mobile menus since touch screens don’t use hover states.

• Outline Only? If you use outline-style social icons, adjust only the box-shadow property for color and thickness.

• No Background? Simply remove or comment out the background line.

• Rounded or Square? Adjust or remove the border-radius for sharp corners.

• Preview your site on both desktop and mobile to ensure your new colors look perfect.

• Click Save in the Custom CSS editor to make your changes live.

• Double-check your CSS selectors—template updates or customizations may require selector tweaks.

• Clear your browser cache or try an incognito window.

• Make sure there are no conflicting CSS rules elsewhere.