How to Add Social Media Icons in Squarespace

Are you on Instagram or Facebook? Are you looking for more followers for your social media accounts? Or to give your website visitors more ways to connect with you?

Then you might want to add your social media links to your website.

You can add social media icons to any (or every) page of your Squarespace website. You can even add social links to your header.

Just follow these easy steps.

Table of Contents

---

Connect Your Social Media Accounts to Squarespace

The first step to adding your social media icons to your Squarespace website is to connect your social media accounts by adding your links.

1. From your Home menu click Settings

2. In the Website menu click Social Links

3. Copy & paste your social media profile URL where it says Add a social link or email (ex: https://www.instagram.com/profilename/)

4. Click the Enter or Return key on your keyboard

5. Repeat for all your social media accounts

---

Social Media Icons Available on Squarespace

Squarespace currently has icons available for a large number of social media platforms. Icons for the following platforms will show as you add your links into the connected accounts. For platforms not on this list you will see a link icon instead.

• SmugMug

• Snapchat

• SoundCloud

• Spotify

• Stitcher

• The Dots

• Tidal

• TikTok

• Threads

• TripAdvisor

• Tumblr

• Twitch

• Vevo

• Vimeo

• VSCO

• Yelp

• YouTube

• X or Twitter (Your icon will depend on the address used to connect the account. Twitter.com URLs display the bird icon. X.com addresses display the X icon.)

• 500px

• Apple Podcasts

• Bandsintown

• Behance

• CodePen

• Discord

• Dribbble

• Facebook

• Flickr

• Foursquare Swarm

• GitHub

• Goodreads

• Google Play

• Houzz

• IMDb (only links that end in .com)

• Instagram

• LinkedIn

• Medium

• Meetup

• Pinterest

• Reddit

---

---

Add a Social Links Block to Your Page or Footer

Two of the most common places to add your social link icons are on your contact page and in the footer, so that it appears on every page of your website. To do this in Squarespace 7.1, you simply need to add a social links block.

1. Click EDIT in the top left corner of your webpage

2. Scroll to the section you want your icons and click + ADD BLOCK

3. Choose the Social Links block

4. Drag your block into place

To add social icons to the footer you will need to click EDIT SITE FOOTER before you can add your social links block.

If you are using Squarespace 7.0 you’ll add your block at the insertion point.

---

Style Your Social Media Icons

Now you can choose the style for your icons.

1. Click the pencil icon 🖉 to access the Social Links Editor (you may need to click on the social link block to get the pencil icon)

2. Click the Design tab

3. Use Border to choose the shape, outline and fill of your icon, choose the Alignment and Size

4. Save

If you are using Squarespace 7.0 you can also change the icon colour in the Design tab. You have the choice of a light theme, dark theme or standard, which uses the brand colours of each icon.

---

Change the Social Icon Colour in Squarespace 7.1

To change the colour of your icons in Squarespace 7.1 you need to use the Site Styles.

1. Click on the paintbrush icon in the top right corner of your page to access Site Styles

2. Click Colors

3. Click on the colour theme of the section that has your social media icons

4. Scroll down the list to find the SOCIAL LINKS BLOCK (it’s waaaaay down the list)

5. Choose your colour

6. Click SAVE

*SQUARESPACE QUICK TIP: Before scrolling down the list of all the items in your Color Theme, try clicking on your page section. It will often narrow down the choices to just what is in the section so you don’t have to search through the entire list.

---

Set Your Icon Visibility

When you connect your social media accounts all your icons are by default, set to be visible.  You can however, change the visibility of your icons in each social link block. So you can have all of them visible in the footer, but only the two most important icons next to your contact form.

To hide an icon:

1. Click on the Social Links Block then click the pencil icon 🖉

2. Click on the name or arrow > of the link you want to hide

3. Toggle Display Social Icon to the off position (grey)

---

Add Social Media Icons to the Squarespace Header

Can I add social media icons to a Squarespace header?

If you are using Squarespace 7.1 the answer is yes. For Squarespace 7.0, the answer depends on your template.

To add social media icons to your Squarespace 7.1 header:

1. Click EDIT in the top left corner of your webpage

2. Hover over the header and click EDIT SITE HEADER

3. Click + ADD ELEMENTS   

4. Toggle Social Links to the on position (green)

5. SAVE

To change the style, layout or colours of your header click EDIT DESIGN. You can also change the style, size and alignment of the icons through the social links block editor.

Related Post: How to Style Your Header Navigation in Squarespace 7.1