Use the Bluesky Icon in Squarespace (No Code Needed)
Are you looking to add the Bluesky social media icon to your Squarespace site? Good news, Squarespace now supports Bluesky links in the Social Links block!
In this post, we’ll show you how it works, how to add it, and why you no longer have to use custom code or CSS to have this integration.
What Is Bluesky?
Bluesky, a social media project to decentralize the web, is becoming a hit on an already existing network called Twitter – an adamantly centralized platform known by all! While more and more creators and businesses are joining Bluesky, linking their icon on your site’s header/footer is crucial for brand visibility.
The good news: Bluesky has official support in Squarespace
Previously, Squarespace didn't include Bluesky in its built-in Social Links Block. Users had to:
Upload a custom icon manually
Use HTML code blocks or SVGs
Write extra CSS to style it
But that’s no longer necessary.
Now, anytime you add a link with https://bsky.app, Squarespace will recognize it and add the official Bluesky logo to your Social Links block, alongside Facebook, Twitter, and Instagram.
How to Add the Bluesky Icon in Squarespace 7.1
Here’s a quick, step-by-step guide:
Step 1: Go to Edit Mode
Navigate to the page or section where you want to display your social icons.
Click Edit, then click the “+” icon to add a new block.
Step 2: Add a Social Links Block
Select Social Links from the block menu.
You’ll see the default list of social icons.
Click the pencil icon to edit the URLs.
Step 3: Insert Your Bluesky Profile URL
Paste your Bluesky profile link in the URL field:
https://bsky.app/profile/yourusername
✔ As long as the domain contains bsky.app, Squarespace will automatically detect it and show the Bluesky icon.
Step 4: Style as Needed
The icon will now appear in your:
Website header
Footer
Anywhere else you’ve added the Social Links block
The styling (color, hover effect, spacing) will automatically match the rest of your theme. No additional CSS is needed.
Bonus Tip: Why This Is Better Than Manual Embeds
| Manual Method (Old) | Official Integration (New) |
|---|---|
| Add custom image/icon | Native Bluesky icon display |
| Write extra HTML/CSS | No code required |
| Slower page loads are possible | Fast and optimized |
| Not mobile responsive | Fully responsive and clean |
Troubleshooting
If the Bluesky icon doesn’t show up:
Double-check that the link begins with https://bsky.app/
Ensure there are no typos or redirects
Make sure you’re using the Social Links Block, not a Button or Image block
Final Thoughts
With the increasing rollout of Bluesky, it is good to be proactive and make sure that your brand is visible where your audience will soon be. And now, with Squarespace’s native support, adding your Bluesky icon is simple, fast, and without needing a single line of code.
FAQ: Bluesky Icon in Squarespace
1. Why isn't Squarespace showing my Bluesky icon?
Make sure that your link’s beginning is https://bsky.app/. The Social Links block only recognizes Bluesky icons when the right domain is in use. And, make sure you are using the Social Links block and not some kind of image or button block.
2. Is it possible to change the colour of the Bluesky icon or its size?.
The icon will automatically inherit your site's style, such as color, hover effect, and size. You can adjust these in Site Styles → Social Icons as required.
3. Is this function in every version of Squarespace?
This built-in integration is validated for Squarespace 7.1 and the Fluid Engine sections. With older versions, you may still require a manual fix.
4. Can I add multiple Bluesky icons for different pages?
Yes, assuming each social link block has a value of bsky. app link: The icon will show up where the block is (footer, header, page content), wherever you've put that block.
5. Is this a better approach than inserting custom SVG code?
Absolutely. Now with this native solution, you get something quicker, lighter and mobile-optimised directly, without the need for any custom uploads, styling, or maintenance.