Why Did Social Media Icons Disappear on Squarespace?

Jul 12

You just put the finishing touches on your Squarespace website; everything is looking so polished and beautiful, the layout is nice and clean, and the branding is sharp! But wait, all of a sudden, you notice social media icons that used to be in your header, or somewhere else on the page, are gone. No Facebook, no Instagram, just space.

Don’t panic. It's a problem that a lot of people have when they use Squarespace, and also, luckily, it can be fixed. In this guide, we will share the top reasons why your social icons disappear and how to get them back quickly.

Common Reasons Why Social Media Icons Disappear

1. No Links, Set in the Social Link Options Section

If you haven’t entered social URLs in Settings → Social Links, Squarespace will not show icons.

2. No Content or Deleted Direct content is not allowed.

If you delete the Social Links Block or forget to set the valid URLs, it may look like the block is empty or not visible.

3. Custom CSS Hiding Icons

Some custom CSS or third-party code might be hiding .sqs-svg-icon or .social-icons elements.

4. Template or Section Style Conflict

Some templates or color themes (like “Minimal”) may match icons to the background (white on white, or black on black).

5. SVG Load or CDN Issue

Rarely, SVG icons may not load – it’s known to happen from time to time, typically when services like Squarespace and CDNs have issues.

Step-by-Step Fixes

Step 1: Check Social Links Are Set

Go to Settings → Social Links
Add or re-add your URLs (e.g., https://facebook.com/yourpage)
Refresh the site to see if icons reappear

Icons only show for platforms with valid URLs.

Step 2: Reinsert the Social Links Block

If you removed or accidentally modified a Social Block:

Edit the section where icons were displayed
Click “+” → Add Block → Social Links
Drag it into the header, footer, or any page
Style as needed (alignment, size, spacing)

Step 3: Check for Custom CSS Conflicts

Go to Pages → Custom code → Custom CSS and look for any rules like:


.sqs-svg-icon {
  display: none;
}
Or:
.social-icons {
  visibility: hidden;
}

If found, remove or comment out that CSS code.

Step 4: Adjust Color Theme in Site Styles

If your icons are there but invisible due to styling:

Go to Design → Site Styles → Colors
Find the section where the icons are placed (e.g., Header or Footer)
Adjust the color theme to ensure the icons are visible (e.g., from “White on White” to “Dark on Light”)

Step 5: Clear Cache and Refresh

Sometimes Squarespace or your browser caches styling:

Hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
Or clear your browser cache manually

Final Thoughts

  
        Issue
        Fix
      
        Icons not appearing
        Add links under Settings → Social Links
      
        Icons invisible
        Change the section's Color Theme
      
        Icons hidden by code
        Remove conflicting CSS
      
        Block removed
        Reinsert Social Links Block
      
        Need manual control
        Use HTML Code Block with custom icons

Frequently Asked Questions (FAQs)

1. Why do my social icons only disappear on mobile view?

On the mobile version in Squarespace, styles might override/hide the visibility of the icon. Look for mobile-only CSS or block settings below on mobile breakpoints.

2. Can I swap out Squarespace’s default social media icons with my own branded ones?

Yes! First off, you can drop in your own SVG or PNG icons with Code Block or Image Block, use your Custom CSS, and have complete control over their size, color, and spacing.

3. Why are my icons not appearing even after adding the correct social links?

If the links are right but icons aren’t showing up, it might be a custom CSS conflict, a template color conflict, or a broken social block. Use the full checklist in this blog to find the exact root cause!

4 . How do I change the size and color of social icons?

Navigate to Design → Site Styles and navigate to the section in which your icons are placed, then style the icons using Size, Color, and Spacing settings under the Social Links Block settings.

5. Can I add social media icons to just one page or section?

Absolutely. Rather than add social media links to the site-wide header or footer, you can add a Social Links Block or your icons anywhere on the page using the Edit Page → Add Block system.