How to change the social icons colour in Squarespace 7.1

Squarespace 7.1 gives you elegant, minimalist social icons that match your site’s design — but sometimes you need them to stand out or match your brand palette more closely.

In this tutorial, you’ll learn how to change the colour of the social icons in Squarespace 7.1 using custom CSS. Whether you want a brand-specific colour, a hover effect, or to completely revamp the style, this guide has you covered.

Table of Contents

• Why Change Social Icon Colours

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Change Social Icon Colours?

Customizing the social icon colours can help you:

• Match your brand’s colour scheme

• Improve visibility against your background

• Add hover effects for better interaction

• Make your footer or header pop visually

Complexity: Easy

---

Step-by-Step Instructions

Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and add appropriate code into the Custom CSS editor box.

Header Icons

.header-actions .icon--fill svg {fill: #DD2424 !important} 
(changes the colour of the social media icon)

Header Icon hover effects

.header-actions .icon--fill svg:hover {
fill:#6EE1EB!important; 
transform:scale(1.7); } 
(changes the colour as well as scales the the social media icon)

Mobile menu icons

.header--menu-open .header-menu .icon svg {
  fill: #DD2424 !important} 
(changes the colour of the social media icon)

Icons on pages

.sqs-use--icon {fill: #DD2424!important;} 
(changes the icon colour)

.sqs-use--mask {fill: #EDB1B1!important;}
(changes the icon background colour)

.sqs-svg-icon--wrapper {border-color: #5E5A5A!important} 
(changes the border colour)

Icons on pages hover effects

.sqs-use--icon:hover {fill: #000000!important;} 
(changes the icon colour on hover)

.sqs-use--mask {fill: #D41ECE!important;}
(changes the icon background colour on hover)

.sqs-svg-icon--wrapper {border-color: #E5E3E5!important} 
(changes the border colour on hover)

Feel free to change the colours to your preferred liking.

---

Key Takeaways

• You can easily change the social icon colours in Squarespace 7.1 using CSS.

• Add hover effects for interactivity.

• Target specific areas (like header/footer) with advanced selectors.

• Use HEX or RGB values for precise brand color matching.

FAQs

Why aren’t my icon colours changing?
Ensure you're targeting the correct section and that no other CSS is overriding your code. You may need to add !important.

Can I use different colours for each social icon?
Yes, but you’ll need to target them individually using SVG classes or the icon title.

Can I make icons larger too?
Yes! Add this line: font-size: 30px;

---

---

Conclusion

Changing the colour of your social icons is a small tweak that can make a big impact. Whether it’s for better visibility, aesthetic alignment, or brand consistency, this custom CSS trick will help your Squarespace 7.1 site look more polished and professional.

All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.