Adding Custom Social icons to Squarespace

Squarespace simplifies displaying social media links with built-in social icons that automatically match the URL to recognized platforms like Facebook, Instagram, and X (formerly Twitter). But what happens when the icon you need isn’t supported natively? That’s where custom icons come into play.

Let’s explore the process of adding and customizing social icons for your Squarespace site.

How to Add Social Icons in Squarespace

1. Access the Social Links Panel

   • Navigate to your website  Setting → Website and click Social Links.
     

2. Add URLs for Your Social Accounts

   • Paste the URL of your social media profile or website. For instance:
     • Instagram: https://instagram.com/yourhandle
     • Email: mailto:yourname@example.com
   • If Squarespace recognizes the platform, it will automatically display its logo.

3. Reorder Icons

   • Drag and drop icons to change their order in most templates.

Supported Icons

Squarespace supports logos for many popular platforms. You can find the full list of supported social icons here.
If the URL is unrecognized:

• Generic Link Icon is used for unsupported platforms.
• Mail Icon is used for email links.

Adding Custom Social Icons

To add custom social icons to your Squarespace site, follow these steps:

• Copy the given CSS snippet in the thread
• Modify as you wish
• Go to Custom css panel to add the code in css panel

If a platform is unsupported or you want a unique look, you can add custom social icons with CSS. Here’s how:

Custom Icon Example: Linktree

To replace the default link icon for Linktree, use this CSS code:

.sqs-svg-icon--wrapper[href*="linktr.ee"] .sqs-svg-icon--social {
  display: none;
}
.sqs-svg-icon--wrapper[href*="linktr.ee"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  box-sizing: border-box; 
  background-repeat: no-repeat;
  background-position: center center;

  background-size: 50% 50%;
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m13.736 5.853l4.005-4.117l2.325 2.38l-4.2 4.005h5.908v3.305h-5.937l4.229 4.108l-2.325 2.334l-5.74-5.769l-5.741 5.769l-2.325-2.325l4.229-4.108H2.226V8.121h5.909l-4.2-4.004l2.324-2.381l4.005 4.117V0h3.472zm-3.472 10.306h3.472V24h-3.472z'/%3E%3C/svg%3E");
}

Customizations

• Background Color: Change background-color: #000; to your desired hex code.
• SVG Fill Color: Edit the fill='white' to your preferred color. For example, replace white with %23b96464 for a muted pink shade, some icon require to edit value of stroke='white' instead

Custom Social Icons collection

Here’s a collection of custom social icons added with CSS:

* TikTok icon (recently added to built-in icons)

* Threads icon

* Bluesky icon

* Linktree icon

Pro Tip: Test the size and alignment of your icons across all devices to ensure consistency.

Let us know if you need help with CSS tweaks or creating a custom icon for a specific platform. 🎨

Houzz.com icon, reference here

a[href*="houzz.com"] svg {
  display: none;
}
a[href*="houzz.com"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  box-sizing: border-box; 
  background-repeat: no-repeat;
  background-position: center center;

  background-size: 50% 50%;
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M1.27 0v24h8.05v-7.56h5.36V24h8.05V10.37L6.61 5.75V0z'/%3E%3C/svg%3E");
}

Buymeacoffe icon - Transparent bg - white icon

On 11/17/2024 at 11:17 PM, Beyondspace said:

Squarespace simplifies displaying social media links with built-in social icons that automatically match the URL to recognized platforms like Facebook, Instagram, and X (formerly Twitter). But what happens when the icon you need isn’t supported natively? That’s where custom icons come into play.

Let’s explore the process of adding and customizing social icons for your Squarespace site.

---

How to Add Social Icons in Squarespace

1. Access the Social Links Panel

   • Navigate to your website  Setting → Website and click Social Links.
     

2. Add URLs for Your Social Accounts

   • Paste the URL of your social media profile or website. For instance:
     • Instagram: https://instagram.com/yourhandle
     • Email: mailto:yourname@example.com
   • If Squarespace recognizes the platform, it will automatically display its logo.

3. Reorder Icons

   • Drag and drop icons to change their order in most templates.

---

Supported Icons

Squarespace supports logos for many popular platforms. You can find the full list of supported social icons here.
If the URL is unrecognized:

• Generic Link Icon is used for unsupported platforms.
• Mail Icon is used for email links.

---

Adding Custom Social Icons

 

To add custom social icons to your Squarespace site, follow these steps:

• Copy the given CSS snippet in the thread
• Modify as you wish
• Go to Custom css panel to add the code in css panel

If a platform is unsupported or you want a unique look, you can add custom social icons with CSS. Here’s how:

Custom Icon Example: Linktree

To replace the default link icon for Linktree, use this CSS code:

.sqs-svg-icon--wrapper[href*="linktr.ee"] .sqs-svg-icon--social {
  display: none;
}
.sqs-svg-icon--wrapper[href*="linktr.ee"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  box-sizing: border-box; 
  background-repeat: no-repeat;
  background-position: center center;

  background-size: 50% 50%;
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m13.736 5.853l4.005-4.117l2.325 2.38l-4.2 4.005h5.908v3.305h-5.937l4.229 4.108l-2.325 2.334l-5.74-5.769l-5.741 5.769l-2.325-2.325l4.229-4.108H2.226V8.121h5.909l-4.2-4.004l2.324-2.381l4.005 4.117V0h3.472zm-3.472 10.306h3.472V24h-3.472z'/%3E%3C/svg%3E");
}

Customizations

• Background Color: Change background-color: #000; to your desired hex code.
• SVG Fill Color: Edit the fill='white' to your preferred color. For example, replace white with %23b96464 for a muted pink shade, some icon require to edit value of stroke='white' instead

---

Custom Social Icons collection

Here’s a collection of custom social icons added with CSS:

* TikTok icon (recently added to built-in icons)

* Threads icon

* Bluesky icon

* Linktree icon

---

Pro Tip: Test the size and alignment of your icons across all devices to ensure consistency.

Let us know if you need help with CSS tweaks or creating a custom icon for a specific platform. 🎨

@Beyondspace I modified your BlueSky code and it's working for my site, but I'd like to replicate the hover functionality that happens for the other social media icons. Are you able to help with that? Here's our site: https://www.biocommons.org.au/

12 minutes ago, PatrickCapon said:

@Beyondspace I modified your BlueSky code and it's working for my site, but I'd like to replicate the hover functionality that happens for the other social media icons. Are you able to help with that? Here's our site: https://www.biocommons.org.au/

That's interesting effect!

Bluesky icon - black filled - fade on hover

a[href*="bsky.app"][class*="icon"] svg {
    display: none
}

a[href*="bsky.app"][class*="icon"] {
    background: none;
    display: inline-block;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='black' d='M5.892 2.93c-1.78-1.06-3.813.446-3.63 2.359l.398 4.185c.176 1.855 1.84 4.026 4.195 3.823C4.5 14 3.132 15.865 4.88 18.145c.286.373.597.745.914 1.062s.69.628 1.062.914c1.88 1.441 4.375-.65 5.055-2.69l.09-.268l.09.269c.68 2.04 3.174 4.13 5.055 2.689c.372-.286.745-.597 1.062-.914s.628-.69.914-1.062c1.747-2.28.379-4.145-1.976-4.848c2.355.203 4.018-1.968 4.195-3.823l.399-4.185c.182-1.913-1.852-3.418-3.631-2.36C15.2 4.66 13.485 7.393 12 9.902C10.515 7.392 8.8 4.66 5.892 2.93'/%3E%3C/g%3E%3C/svg%3E")
}

a[href*="bsky.app"][class*="icon"]:hover {
  opacity: 1 !important;
}
.sqs-svg-icon--list:hover a[href*="bsky.app"][class*="icon"] {
  opacity: 0.3;
  transition: opacity 170ms ease-in-out;
}

19 minutes ago, Beyondspace said:

That's interesting effect!

Bluesky icon - black filled - fade on hover

a[href*="bsky.app"][class*="icon"] svg {
    display: none
}

a[href*="bsky.app"][class*="icon"] {
    background: none;
    display: inline-block;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='black' d='M5.892 2.93c-1.78-1.06-3.813.446-3.63 2.359l.398 4.185c.176 1.855 1.84 4.026 4.195 3.823C4.5 14 3.132 15.865 4.88 18.145c.286.373.597.745.914 1.062s.69.628 1.062.914c1.88 1.441 4.375-.65 5.055-2.69l.09-.268l.09.269c.68 2.04 3.174 4.13 5.055 2.689c.372-.286.745-.597 1.062-.914s.628-.69.914-1.062c1.747-2.28.379-4.145-1.976-4.848c2.355.203 4.018-1.968 4.195-3.823l.399-4.185c.182-1.913-1.852-3.418-3.631-2.36C15.2 4.66 13.485 7.393 12 9.902C10.515 7.392 8.8 4.66 5.892 2.93'/%3E%3C/g%3E%3C/svg%3E")
}

a[href*="bsky.app"][class*="icon"]:hover {
  opacity: 1 !important;
}
.sqs-svg-icon--list:hover a[href*="bsky.app"][class*="icon"] {
  opacity: 0.3;
  transition: opacity 170ms ease-in-out;
}

Thanks @Beyondspace, you got it first go!

I think it must be an effect from our template, I certainly didn't code it to do that

18 minutes ago, PatrickCapon said:

Thanks @Beyondspace, you got it first go!

I think it must be an effect from our template, I certainly didn't code it to do that

Make it more interested, lol

coding newbie here... I added this custom code but I don't see it anywhere. lol Where would I now find the icon? Thanks

8 hours ago, h2obetty said:

coding newbie here... I added this custom code but I don't see it anywhere. lol Where would I now find the icon? Thanks

What is your site URL, and which social account you are using