How to add TikTok icon for social links in Squarespace 7.1

Squarespace 7.1 offers a sleek and streamlined way to add social links to your website. However, one commonly requested icon—TikTok—is not included by default in the built-in social icon set. So we have to use a work around. This solution is credited to bangank36.

If you’re active on TikTok and want to add a TikTok icon to your social links section, this tutorial will walk you through exactly how to do that using custom code.

Table of Contents

• Why Add TikTok to Your Squarespace Social Links

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Add TikTok to Your Squarespace Social Links?

Adding TikTok to your site helps you:

• Build your social presence and drive traffic to your TikTok profile

• Maintain brand consistency across platforms

• Provide visitors with a direct link to more of your content

• Stay relevant with modern audiences

Complexity: Easy

---

Step-by-Step Instructions

Step 1

Once you have created your TikTok link, from the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below.

@font-face {
    font-family: 'icomoon';
    src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Footer */
.sqs-svg-icon--wrapper[href*=tiktok] .sqs-svg-icon--social {
  display: none;
}
.sqs-svg-icon--list:hover .sqs-svg-icon--wrapper[href*=tiktok] {
  background: transparent;
}
.sqs-svg-icon--wrapper[href*=tiktok] > div {
  display: none;
}
.sqs-svg-icon--wrapper[href*=tiktok]:after {
    content: "\e900";
    display: inline-block;
    font-family: 'icomoon';
    width: 100%;
    height: 100%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    position: absolute;
    color: #000;
}

/* Header */
.header-actions-action--social [href*=tiktok] svg {
  display: none;
}
.header-actions-action--social [href*=tiktok] {
  background: transparent;
}
.header-actions-action--social [href*=tiktok]:hover {
  background: transparent !important;;
}
.header-actions-action--social [href*=tiktok]:after {
  content: "\e900";
  display: inline-block;
  font-family: 'icomoon';
  width: 80%;
  height: 80% ;
  top: 50%;
  left: 50%;
  color: #000;
  transform: translate(-50%, -50%) !important;
  position: absolute;}

---

STEP 2

For the Footer options, you can adjust the following values within the /* Footer * / css codes, to suit your site.

top: 60%;
left: 50%;
width: 80%;
height: 80%;
color: #000;

The same also applies to the /* Header */options

top:60%;
left:50%;
width: 80%;
height: 80%;
color: #000;

---

Key Takeaways

• Squarespace 7.1 doesn’t include a TikTok icon by default

• You can add TikTok by uploading a custom SVG and using CSS

• This allows you to fully customize the appearance and placement of the icon

• Your site can now promote TikTok just like any other social platform!

FAQs

Can I use Font Awesome for the TikTok icon?
Not directly in Squarespace’s built-in system. It’s best to upload your own SVG or PNG icon.

Will this work in the header and footer?
Yes! This method applies to all instances where your social links are displayed using Squarespace’s native social icons block.

Can I change the icon color on hover?
Yes! Add this CSS: a[href*="tiktok.com"]:hover::before { filter: brightness(0.8); }

---

---

Conclusion

TikTok is a vital platform for creators, brands, and businesses. Adding a TikTok icon to your Squarespace 7.1 site ensures that visitors can easily connect with you across all channels.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.