How to change your header social icon colors in Squarespace

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

This tutorial is for Squarespace version 7.1 and won't work on older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

About this tutorial

Feeling a little "meh" about your website's social media icons? I get it - matching the navigation links is kinda boring.

Let's ditch the defaults and inject some serious personality into your website header! In this tutorial, you’ll learn how to use a sprinkle of custom code to create social media icons that perfectly match your brand colors.

But wait, there's more! We won't just stop at the desktop version. You’ll also learn how to customize the colors for your mobile site, ensuring a cohesive look across all devices.

---

Video tutorial

---

Code Example

Here the codes from this tutorial. Make sure you update the colors for your own unique website!

You can update any of the codes to be mobile only by changing .header to .header--menu-open

For the border code, add .header—menu-open before the text .header-icon-border-style-outline and it will be mobile-only.

/* icon color */
.header .icon svg {
fill: yellow!important
}

/* icon background */
.header .icon--fill {
background: lightblue!important
}

/* icon border */
.header-icon-border-style-outline {
color: green!important
}