Social media icons are one of those small things that make a big difference. They tell visitors where to find you, build trust, and can drive serious traffic to your profiles. But Squarespace's built-in options are... limited.
In this guide, we will cover three approaches: the built-in social links, a floating sidebar that follows users as they scroll, and fully custom-styled icons with CSS. Pick the one that fits your needs.
Method 1: Built-in Social Links
Squarespace has a native social links feature that is dead simple to set up. It automatically adds icons in your footer (and optionally your header) based on the URLs you provide.
- Go to Settings → Social Links
- Click Add Link and paste your social media URL
- Squarespace auto-detects the platform and shows the right icon
- Reorder by dragging. Toggle visibility in Design → Footer
The catch: You cannot control the size, color, or position much. They show up where Squarespace puts them. For more control, keep reading.
Method 2: Floating Social Sidebar
A floating sidebar sticks to the side of the screen as visitors scroll. It is always visible without being intrusive — perfect for blogs, portfolios, and service pages.
Add this to Settings → Advanced → Code Injection → Footer:
<div class="floating-social">
<a href="https://instagram.com/yourhandle" target="_blank" aria-label="Instagram">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
</svg>
</a>
<a href="https://twitter.com/yourhandle" target="_blank" aria-label="X (Twitter)">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
<a href="https://facebook.com/yourpage" target="_blank" aria-label="Facebook">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
</div>
<style>
.floating-social {
position: fixed;
left: 20px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 12px;
z-index: 999;
}
.floating-social a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: #000;
color: #fff;
border-radius: 50%;
transition: transform 0.2s, background 0.2s;
text-decoration: none;
}
.floating-social a:hover {
transform: scale(1.1);
background: #333;
}
@media (max-width: 768px) {
.floating-social {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
transform: none;
flex-direction: row;
justify-content: center;
background: #000;
padding: 12px;
gap: 16px;
}
.floating-social a {
background: transparent;
}
}
</style>Replace the URLs with your actual social profiles. The CSS handles responsive behavior — on mobile, the sidebar collapses into a bottom bar so it does not block content.
Method 3: Custom Styled Icons with CSS
Want icons that match your brand colors and sit exactly where you want them? Use a Code Block in any page section with this CSS:
/* Custom social icons - add to Design > Custom CSS */
.custom-social-icons {
display: flex;
gap: 16px;
justify-content: center;
padding: 20px 0;
}
.custom-social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 2px solid #000;
color: #000;
border-radius: 0; /* Square icons - use 50% for circles */
transition: all 0.3s ease;
text-decoration: none;
}
.custom-social-icons a:hover {
background: #000;
color: #fff;
}Customization ideas:
- Change
border-radius: 0to50%for circles, or8pxfor rounded squares - Use brand colors: Instagram gradient, Facebook blue, etc.
- Add
box-shadow: 0 2px 8px rgba(0,0,0,0.1)for a subtle lift
Which Method Should You Use?
Do not want to write code from scratch? Our Floating Social Links tool lets you pick your platforms, choose colors and position, and generates ready-to-paste code in seconds. Our Code Snippet Library also has pre-built social icon sets you can grab instantly.
