Add Social Media Icons with Squarespace Blocks
TL;DR:
- Social links blocks let you add social media icons anywhere on your Squarespace site
- All blocks sync their icons via the Social Links Panel, keeping everything consistent
- You can customise icon shapes, sizes, alignments, and colours to match your brand
- Deleting an icon from one block removes it from all blocks across your site
Social links blocks are the easiest way to add clickable social media icons to your Squarespace site. You can drop them anywhere that accepts blocks, and they'll all stay in sync automatically.
How to Add Social Icons
Here's how to get your social media icons set up:
Setting Up the Block
- Edit the page where you want to add social icons
- Click 'Add Block' and select 'Social links'
- Click the pencil icon to open the block editor
Adding and Managing Icons
To add new icons: Go to the Content tab, click 'Add social link', paste your social media URL, and press Enter. Squarespace will automatically recognise the platform and add the right icon.
To edit existing icons: Click any icon in the Content tab to change its URL or temporarily hide it using the 'Display Social Icon' toggle.
To reorder icons: In the Content tab, click 'Edit', then drag and drop icons using the handle on the right of each link.
To delete icons: Remove any social link to delete it from all blocks across your site. This can't be undone, so double-check before deleting.
Styling Your Icons
The Design tab gives you control over how your icons look:
Design Options
- Shape: Choose between circles, squares, or other border shapes
- Size: Adjust icon dimensions to fit your layout
- Alignment: Position icons left, centre, or right
- Spacing: Control the gap between icons
- Colours: Customise through Site Styles to match your brand
Most social icons keep their original colours by default (Facebook stays blue, Twitter stays light blue, etc.), but you can override these in your site's colour settings.
Pixelhaze Tip
The Social Links Panel keeps all your social blocks in sync. When you add a new social account to one block, it appears in all of them. This saves time but means you can't have different social icons in different blocks.
FAQs
Can I have different icons in different social links blocks?
No, all social links blocks use the same Social Links Panel, so they'll always show identical icons.
How do I change the order of social icons?
In the Content tab, click 'Edit', then drag and drop the icons using the handle to the right of each social link.
What happens when I delete a social icon?
Deleting removes the icon from every social links block on your site. This can't be undone, so be careful.
Can I temporarily hide specific icons?
Yes, use the 'Display Social Icon' toggle in the Content tab to hide icons without deleting them.
Jargon Buster
Social Links Block: A Squarespace block that displays clickable social media icons
Social Links Panel: The central system that keeps all your social links blocks showing the same icons
Design Tab: The section of the block editor where you customise how your icons look
Wrap-up
Social links blocks make it simple to connect your website visitors with your social media profiles. The automatic syncing means you set up your social accounts once and they appear consistently across your site. Remember that any changes you make affect all social links blocks, so plan your icon selection carefully before adding them to multiple pages.
Ready to make your Squarespace site work harder for your business? Join Pixelhaze Academy for step-by-step guides and expert support.