Did You Know …

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 way to add custom social icons for those, too.

First, 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?

---

How to Create Custom Social Icons in Squarespace

Jump to Code Jump to Icon Files

---

Follow These Instructions 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 click, save, and go!