Add brand colours to social link icons on Squarespace 7.1

This guide explains how to add the original branding colours to social icons on Squarespace 7.1 using CSS. This feature was available on Squarespace 7.0 but was removed from Squarespace 7.1, so this CSS snippet brings it back.

You can now show your social icons like this:

instead of this:

Introduction

On Squarespace you can use a Social Links Block to add social icons anywhere you can add blocks to your site, for example in the footer. The icons link to your own social feeds by using the URLs that you provide.

The Social Links Block automatically uses the correct logo for the following services:

• Apple Podcasts

• Bandsintown

• Behance

• CodePen

• Discord

• Dribbble

• Facebook

• Flickr

• Foursquare

• GitHub

• Goodreads

• Google Play

• Houzz

• IMDb

• Instagram

• LinkedIn

• Medium

• Meetup

• Pinterest

• Reddit

• SmugMug

• Snapchat

• SoundCloud

• Spotify

• Stitcher

• The Dots

• Tidal

• TikTok

• TripAdvisor

• Tumblr

• Twitch

• Twitter

• Vevo

• Vimeo

• VSCO

• X (formally Twitter)

• Yelp

• YouTube

Setting default branding colours

On Squarespace 7.1, you cannot assign the original brand colours for these services, like a red YouTube icon or a blue Facebook icon. On 7.1, you can set any colour, but it will apply to all the social icons. However, you can use some custom CSS to mimic the Squarespace 7.0 icons.

Here’s some CSS that will set the correct brand colours for the Facebook, Instagram, Twitter, X, and YouTube icons. It is designed for sites where the icons are being shown with no border.

Free plugin

This plugin is completely free to use.

I build and maintain plugins like this one in my spare time. If it saved you time or solved a tricky problem, buying me a coffee helps keep them coming.

Buy me a coffee

You can add this to Design > Custom CSS on your Squarespace 7.1 site:

/* Set default branding colours for  */
/* icons in Social Icons block       */
/* Copyright Soundfocus Digital      */
/* https://sf.digital                */

/* Twitter icon */
body:not(.header--menu-open) .header .header-actions .icon--fill.header-icon[href^="https://twitter.com"] svg, .social-icons-color- .twitter-unauth .sqs-use--icon {
    fill: #55acee;
}
.social-icons-color- .sqs-svg-icon--list:hover .twitter-unauth:not(:hover) .sqs-use--icon {
    fill: rgba(85, 172, 238, .4);
}

/* Instagram icon */
body:not(.header--menu-open) .header .header-actions .icon--fill.header-icon[href^="https://www.instagram.com"] svg, .social-icons-color- .instagram-unauth .sqs-use--icon {
    fill: #e4405f;
}
.social-icons-color- .sqs-svg-icon--list:hover .instagram-unauth:not(:hover) .sqs-use--icon {
    fill: rgba(228, 64, 95, .4);
}

/* Facebook icon */
body:not(.header--menu-open) .header .header-actions .icon--fill.header-icon[aria-label="Facebook"] svg, .social-icons-color- .facebook-unauth .sqs-use--icon {
    fill: #3b5998;
}
.social-icons-color- .sqs-svg-icon--list:hover .facebook-unauth:not(:hover) .sqs-use--icon {
    fill: rgba(59, 89, 152, .4);
}

/* YouTube icon */
body:not(.header--menu-open) .header .header-actions .icon--fill.header-icon[aria-label="YouTube"] svg, 
.social-icons-color- .youtube-unauth .sqs-use--icon {
    fill: #e52d27;
}
.social-icons-color- .sqs-svg-icon--list:hover .youtube-unauth:not(:hover) .sqs-use--icon {
    fill: rgba(229, 45, 39, .4);
}

/* X - formally Twitter - icon */
.social-icons-color- .sqs-svg-icon--list:hover .x-formerly-twitter-unauth:not(:hover) .sqs-use--icon {
    fill: rgba(0, 0, 0, .4);
}

/* Prevent lower opacity on hover */
.socialaccountlinks-v2-block .sqs-svg-icon--wrapper:hover, .social-account-links-v2-block .sqs-svg-icon--wrapper:hover {
    opacity: 1;
}

You can do the same for TiKTok but bear in mind that a black logo won’t be visible on a black background:

/* TikTok icon */
body:not(.header--menu-open) .header .header-actions .icon--fill.header-icon[aria-label="TikTok"] svg, 
.social-icons-color- .tiktok-unauth .sqs-use--icon {
    fill: #000;
}
.social-icons-color- .sqs-svg-icon--list:hover .tiktok-unauth:not(:hover) .sqs-use--icon {
    fill: rgba(0, 0, 0, .4);
}

I’ll add further customisations for other social icons on request.

November 2023: X (formally Twitter) added

November 2023: Added support for header icons in 7.1

August 2024: TikTok added