How to add custom social icons - Squarespace 7.1

Incorporating social icons into your Squarespace site is an effective means to engage with your audience and highlight your presence across various platforms. Squarespace identifies multiple platforms and seamlessly integrates their logos into your header.

You can see a list of which platforms are supported here.

However, when you are using a site that is not supported, Squarespace will show a link icon instead.

---

Add the following code to Custom CSS to resolve this.

Note:

• You will need to have uploaded a custom icon into Custom CSS > Custom Files

• Got the static image URL link

How to use:

• The number within the brackets eg. (1) is referring to which number icon you are wanting to target. Change the number to override the default icon.

• Replace “IMAGEURL” with the static image URL of your choice

.sqs-svg-icon--list a:nth-of-type(1) {
  svg {      
    display:none;   
  }   
  background-image: url(IMAGEURL);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}