Talk 6: How to Add Custom Social Media Icons on Squarespace
How to Add Custom Social Media Icons as Rectangles with Light Backgrounds on Squarespace.
Customizing your Squarespace site is one of the best ways to make it stand out and reflect your unique brand. While Squarespace has many built-in options, adding custom social media share buttons with a sleek rectangle design and light background on your front page is something you’ll need to code yourself.
In this blog, I’ll guide you through adding beautifully styled social media icons using Code Blocks and CSS—no plugins needed. As a bonus, if you’d like to learn how to give these buttons the actual colors of each social media platform, I’ve linked a special guide at the end!
Step 1: Insert a Code Block
First, we’ll add a Code Block to the section where you want the social media icons to appear.
1. Go to the page where you’d like the icons to show (e.g., your homepage).
2. Click Edit and hover over the section where you want to add the icons.
3. Click the + button and select Code from the menu.
4. In the Code Block, paste the following HTML:
<div class="social-icons">
<a href="https://facebook.com" class="social-icon facebook" target="_blank">Facebook</a>
<a href="https://twitter.com" class="social-icon twitter" target="_blank">Twitter</a>
<a href="https://pinterest.com" class="social-icon pinterest" target="_blank">Pinterest</a>
<a href="https://linkedin.com" class="social-icon linkedin" target="_blank">LinkedIn</a>
<a href="https://tumblr.com" class="social-icon tumblr" target="_blank">Tumblr</a>
<a href="https://instagram.com" class="social-icon instagram" target="_blank">Instagram</a>
</div>
Step 2: Style the Buttons with CSS
Now, we’ll add CSS to give the buttons their rectangle shape, light background, and clean hover effect.
1. Go to Design > Custom CSS in your Squarespace dashboard.
2. Paste this CSS:
/* Container for the social icons */
.social-icons {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
/* Style for each icon */
.social-icon {
display: inline-block;
padding: 10px 20px; /* Rectangle shape */
border-radius: 8px; /* Rounded corners */
background-color: #f0f0f0; /* Light gray background */
color: #333; /* Dark text */
font-size: 16px;
text-decoration: none; /* Remove underline */
font-weight: bold;
transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Hover effect for all icons */
.social-icon:hover {
background-color: #e0e0e0; /* Slightly darker gray on hover */
transform: scale(1.05); /* Subtle grow effect */
}
What You’ll See
After saving your changes:
• The social media icons will appear as sleek rectangles with a light gray background.
• When hovered over, the buttons will darken slightly and grow subtly, providing a polished, interactive feel.
Customization Ideas
You can easily tweak the design to fit your brand:
• Change the background color by adjusting background-color: #f0f0f0;.
• Modify the text size by changing font-size: 16px;.
• Add spacing between icons with the gap property in the .social-icons class.
Take Your Buttons to the Next Level
If you’d like to learn how to style your social media buttons with the actual colors of each platform (e.g., Facebook blue, Twitter teal)and add hover effects specific to each one, check out our exclusive blog post! It’s packed with advanced tips and tricks, available to subscribers of our paid blog for just €35/year.
👉 Subscribe here and unlock this bonus guide, along with other in-depth tutorials to make your Squarespace site truly shine.
Happy designing! 🚀
