How to Change the Logo on a Squarespace Membership Area (Step-by-Step Guide)
Quick Overview:
To change the logo in the Squarespace membership area:
Create or source a simple icon (PNG or SVG, max 500×500px)
Upload it to Squarespace Custom Files
Copy the file URL from the Custom CSS area
Paste the CSS code into Design → Custom CSS
Replace the image URL placeholders for desktop and mobile
To change the login text to an icon:
Add CSS in Design → Custom CSS
Replace text with a background image
Apply separate styling for desktop and mobile
How to Change the Logo on Squarespace Membership Pages
If you're using Squarespace memberships, you may have noticed there’s no built in way to change the logo in the member area. This can be frustrating if you’re running sub brands, creating a separate membership experience, or simply want your members area to feel more on brand.
Squarespace doesn’t currently offer a native setting for this, but the good news is you can customise the membership area logo using a simple CSS workaround.
When Would You Want to Change the Membership Area Logo?
You might want to customise your Squarespace membership area logo if:
You’re running a sub brand or course platform
You want a more premium, branded member experience
Your membership area has a different name or identity
You want consistency across your customer journey
Step-by-Step Instructions
Go to your Membership Page/s
Add a Code Block anywhere on the page
Paste the code below
Replace the image URL with your logo
Important! Repeat this for every membership page as the logo will only show up on the page that has the code block installed.
Troubleshooting: Why Your Logo Might Not Be Showing
If your logo isn’t appearing, check the following:
Your image URL is correct and publicly accessible
You’ve used straight quotes " " instead of curly quotes
The code block is added to the correct membership page
Your logo file isn’t too large
You’ve cleared your browser cache
Frequently Asked Questions
-
No. Squarespace doesn't currently offer a native setting to change the logo in the member area. The only way to customise it is by adding CSS inside a Code Block on each membership page.
-
Yes. This CSS method targets classes specific to Squarespace 7.1. If you're on version 7.0, the class names and page structure are different and this code won't work as written.
-
Squarespace applies Code Block CSS only to the page it's placed on. Unlike Custom CSS (which is site-wide), a Code Block is scoped to a single page — so you'll need to repeat the step for each membership page in your area. goes here
-
PNG or SVG work best. PNG is widely supported and renders crisply, while SVG scales perfectly at any size. Avoid JPEG for logos as it doesn't support transparency. Keep the file size small (ideally under 200KB) to avoid any loading delay.
-
The most common causes are: the image URL isn't publicly accessible, curly/smart quotes have replaced straight quotes in the code, or the Code Block was added to the wrong page. Also try clearing your browser cache, as Squarespace aggressively caches CSS changes.
-
No. The CSS targets the .header-title class which only exists within the membership area header. It won't interfere with your main site navigation or global header logo.
BONUS! How to Change the Login Text to an Icon in Squarespace
If you want a cleaner, more modern header, you can replace the default “Login” text with a custom icon.
This is a great way to:
Create a more polished, minimal design
Improve visual consistency across your site
Save space in your navigation
Step 1: Create Your Login Icon
Use canva or similar to create your icon. I recommend no bigger than 500×500 px here’s an example:
Add your icon into the custom files area. Then click on the image, a link will then appear in your custom CSS area, copy the link to use in the code later.
Where is the custom CSS area?
Go To Pages → Scroll Down To The Bottom → Custom Code → Custom CSS.
Step 2: Add The CSS Code
Paste the code below in your custom CSS area
Replace the image URL with your chosen icon
Save your changes
Important Notes
Use straight quotation marks (" ") around your image URL
Make sure your icon is uploaded to Squarespace and publicly accessible
SVG or PNG icons work best for sharp, clean results
Keep your icon simple so it’s clear at smaller sizes
Troubleshooting
If your login icon isn’t showing correctly, check:
The image URL is correct
You’ve replaced both desktop and mobile image URLs
Your browser cache has been cleared
The icon isn’t too large or stretched
Optional Tweaks
Once it’s working, you can refine it further:
Adjust the icon size (width and height values)
Use a different icon for mobile vs desktop
Align it perfectly with your navigation spacing
Did I help you? Consider buying me a coffee as thanks!
The easiest Squarespace filter plugin - smart filtering for portfolio pages, blogs, and events.
This filter plugin shows a simple and effective filtering system without over complicating the user. Its easy to install and comes with 4 different plugin types for portfolio pages, gallery blocks, event pages and blogs. No code knowledge required – just follow the guide - copy, paste, and customise!
NEW Addition! Gallery Block Filter Demo ➜
Key Features:
Simple to Install & Customise
4 x Plugin options for portfolio pages, gallery blocks, blog & events
Add as many filters as you like
Ideal for Squarespace sites needing more in depth filtering options with a simple UX
This plugin is only compatible with Squarespace 7.1 sites.
