Why Did Social Media Icons Disappear on Squarespace?
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;
}
.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
-
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.
-
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.
-
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!
-
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.
-
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.
