How to Display Social Media Links Vertically in Squarespace
If you’ve ever wanted to display social media icons in a vertical format instead of the default horizontal layout, you may have noticed that Squarespace doesn’t provide a built-in option for this. The good news? With a little CSS, you can easily customize your social media links and arrange them in a vertical stack anywhere on your website.
In this tutorial, I’ll walk you through step by step how to make your social media links display vertically using CSS, whether you want to apply the change to a single section or across your entire website.
Watch the video
Check out the YouTube video below. 👇🏼
Why Display Social Links Vertically?
There are a few reasons why you might want your social media icons to be vertical instead of horizontal:
Better design flexibility – Works well alongside images or long-form content.
Improved mobile experience – Stacking social icons vertically can make them easier to tap.
Custom styling options – You can adjust spacing, size, and positioning more freely.
Since Squarespace doesn’t offer a built-in setting for this, we’ll achieve it using custom CSS.
Step 1: Locate Your Social Links Block
To start, navigate to the section where you have added your social media links.
Go to your Squarespace website and click Edit on the page where your social icons are located.
Identify the Social Links Block that you want to adjust.
If you want to apply this change to just one block, you’ll need to find its Block ID (we’ll cover that in the next step).
Step 2: Open the Custom CSS Editor
In your Squarespace dashboard, go to Website > Pages > Website Tools > Custom CSS.
If you can’t find the CSS panel, press the forward slash key ( / ) and type “CSS” in the search bar.
Open the Custom CSS Editor, where we’ll add the styling code.
Step 3: Apply CSS to Stack Social Icons Vertically
Now, let’s add CSS to change the display of the social media icons from horizontal to vertical.
If You Want to Target a Specific Social Links Block
To apply the vertical layout only to one block, you’ll need to use a Block ID Finder (a Chrome extension found here or Squarespace Developer Mode can help with this).
Use the Block ID Finder to locate the unique ID of the Social Links Block.
Copy the Block ID and replace it in the following CSS code:
#block-id .sqs-svg-icon--list {
display: flex;
flex-direction: column;
}
#block-id .sqs-svg-icon--wrapper {
margin-bottom: 10px; /* Adjust space between icons */
}
Paste this code into the Custom CSS Editor and click Save.
This CSS will only apply to the selected block while keeping other social media sections unchanged.
If You Want to Apply This Change to ALL Social Links Blocks
If you want all social links on your website to be displayed vertically, simply remove the block id from your code. This means your CSS would now look like this:
.sqs-svg-icon--list {
display: flex;
flex-direction: column;
}
.sqs-svg-icon--wrapper {
margin-bottom: 10px; /* Adjust space between icons */
}
Once saved, this will update every social links block across your entire website.
Step 4: Adjusting Spacing and Layout
Now that your social icons are stacked vertically, you may want to tweak the spacing between them.
Locate the
margin-bottomvalue in the CSS code.Increase the number to add more space between each icon (e.g.,
margin-bottom: 20px;).Decrease the number to make them closer together (e.g.,
margin-bottom: 5px;).Save your changes and refresh the page to preview the new layout.
Step 5: Testing and Refining the Layout
Once you’ve applied the CSS, test your changes:
✔ Check multiple pages to make sure the layout looks correct.
✔ Preview on mobile and desktop to ensure proper spacing.
✔ Adjust the styling if needed, tweaking padding and alignment in CSS.
If you ever want to revert the changes, simply remove the CSS code and save your settings.
Final Thoughts
By adding a few lines of CSS, you can easily display social media icons in a vertical layout on your Squarespace website. Whether you want to apply this to one block or site-wide, this method gives you full control over how your social links appear.
If you found this tutorial helpful, be sure to subscribe to my newsletter for more Squarespace tips and tricks. And if you’d like professional help designing or customizing your website, feel free to reach out.
📨 Join my mailing list to get Squarespace tips & tricks right in your inbox
Your Designer
I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
