How to Add Custom Social Icons to Your Squarespace Site

Did you know that Squarespace makes it really easy to link your site visitors to your social media accounts with a handy social links block? The social links block in Squarespace comes preloaded with tons of icons for popular social platforms (here’s a list of platforms and icons included). If you happen to use a social platform that doesn’t come standard in Squarespace (Like Threads, Band Camp, or WhatsApp), there’s a custom option to add those in, too.

---

How To use the Squarespace social links Block

1. Add a social links section to any page or even the footer of your site.

2. Customize your list with the social channels you use.

3. Link each network to your particular social account.

4. Tweak the design settings within the section until it matches the look of your site.

Easy peasy lemon squeezy, right?

---

there’s Just one hitch in the social links giddy-up …

Custom social channels, by default, are represented by a generic link icon 🔗, and it’s not very intuitive or clear for users where those generic icons go.

🛑 Generic social icons … Bad.
👌 Custom social icons … Good.
💪🏾 Let’s fix that, shall we?!

---

How to create custom social Icons in squarespace

Watch the custom icon process on-screen, or skip the video and follow text instructions below step-by-step.

STEP 01:

Prep your icon graphic. A 100 pixel square PNG with a transparent background should work. (If you need a custom icon for Threads, you’re in luck. There are two downloadable files below 👇 in this post.)

STEP 02:

Add a new link for whichever social platform you’re connecting to your social links block. The default chain link icon will be visible … but not for long!

STEP 03:

Navigate to the Custom CSS section of your site, and paste the CSS snippet provided below 👇 into your site’s custom CSS.

STEP 04:

Change the number in parentheses (1) to reference which social link your new icon will represent.
(Squarespace numbers each icon from left to right, and whichever icon number you put in the code will temporarily disappear from your strip at this point. That should help you figure it out to pick the right digit.)

STEP 05:

Delete the IMAGE URL GOES HERE text within the code snippet, and keep your cursor between the parentheses for the next step.

STEP 06:

With your cursor between the parentheses, click the Manage Custom Files button at the bottom of the window, and use the “+” to add your icon graphic from Step 01 as a custom file.

STEP 07:

Now, just click on your file thumbnail in the Managed Files window. Once that’s done, you should see a URL generated between the parentheses where your cursor was in the code—hooray!

STEP 08:

Check your social strip. No more generic link icons for socials (hey-oh!), and your site looks super profesh!

---

Here’s the code snippet to customize your social icons

/* CUSTOM SOCIAL ICON */


.sqs-svg-icon--list a:nth-of-type(1) {
  svg {      
    display:none;   
  }   

  background-image: url(URL GOES HERE);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}

---

… And Some Threads Icons Ready to rock ‘N’ Roll

Both versions are 100 px square on a transparent background—just download and go!

---

Reach Out

〰️

Give Us a Shout

〰️

Reach Out 〰️ Give Us a Shout 〰️

Looking for a friendly, knowledgeable design + dev Crew to build the Squarespace website of your dreams?

Schedule a consultation – We’d love to meet in-person or online to tour your existing site, talk about your needs, and see if a custom Divi site is right for your business.

Book a design sprint - If you already have a Divi site, you can reserve a full or half-day work session to knock out whatever website updates have been stuck on your to-do list.

Get a custom website - Our Squarespace Website Express Package includes messaging guidance, design, development, and hands-on training!