How to Replace the “Login” or “Account” Text with an SVG Icon in Squarespace 7.1

Squarespace Tutorial
Written By Walid Hasan

Modern website design trends lean towards minimalism, interactivity, and user navigation. In this interchange, using a clean, responsive SVG icon in place of Squarespace 7.1’s default “Login” or “Account” text means your site not only looks better, but also it’s easier to navigate, particularly on mobile.

In this full guide, you will learn what it takes to implement this upgrade in 3-4 lines of CSS and JavaScript – no third-party plugins necessary.

Why Replace the Default Account Text?

Below are some of the reasons a lot of Squarespace users instead use an icon for the login/account links/icons on their site: Reasons Squarespace websites use icons for login/account links:

  • Modern, minimal look: Icons provide a cleaner interface, especially in header navigation.

  • Responsive design: Icons are easier to scale and align across different screen sizes and devices.

  • Ease of use: Recognizable icons make it easy for users to find their way around.

  • Brand alignment: A visual language that is in keeping with the look and feel of your site is more professional and cohesive.

Implementation Steps

We’ll walk through the three core steps:

  1. Hide the default login/account text

  2. Inject a scalable SVG icon

  3. Style the icon for consistency

Step 1: Hide the Default “Account” or “Login” Text

In many Squarespace 7.1 templates, the login link appears as a simple anchor element with a class like .user-accounts-text-link. To hide the text while preparing to insert the icon, follow these instructions.

Navigate to:
Pages → Custom code → Custom CSS

Then paste the following code:

Copied!

/* Hide the text and insert a placeholder image as fallback */
a.user-accounts-text-link {
  background-image: url(https://static.vecteezy.com/system/resources/thumbnails/005/545/335/small/user-sign-icon-person-symbol-human-avatar-isolated-on-white-backogrund-vector.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  color: transparent !important;
  font-size: 0;
  width: 24px;
  height: 24px;
  display: inline-block;
}

This CSS hides the text content and replaces it with a fallback image for users with JavaScript disabled.

Note: If the class name user-accounts-text-link doesn’t exist in your template, right-click the login link on your live site, click Inspect, and use the class you see in the <a> tag.

Step 2: Inject an Inline SVG Icon with JavaScript

To add a fully responsive SVG icon, we’ll use JavaScript. This ensures the icon can scale perfectly on any screen, and it’s accessible across browsers.

Navigate to:
Settings → Advanced → Code Injection → Footer
Paste the following code snippet:

Copied!

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const loginLink = document.querySelector('.user-accounts-text-link');
    if (loginLink) {
      loginLink.style.visibility = "visible";
      loginLink.style.width = "auto";
      loginLink.style.fontSize = "inherit";
      loginLink.innerHTML = `
        <a href="/account" style="display:inline-flex; align-items:center; text-decoration:none;">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round" class="feather feather-user">
            <path d="M20 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M4 21v-2a4 4 0 0 1 3-3.87"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </a>`;
    }
  });
</script>

This script runs once your page loads, replacing the login text with a crisp SVG icon and linking it directly to the /account page.

Step 3: Style the SVG Icon for a Seamless Look

Finally, let’s make the icon look polished and aligned with your site’s color scheme.

Return to:
Pages → Custom code → Custom CSS
Paste this styling:

Copied!

/* Style the user icon */
.feather-user {
  color: white; /* Match your site's nav color */
  transition: color 0.3s ease;
  cursor: pointer;
}
/* Hover state */
.feather-user:hover {
  color: #cccccc; /* Lighten on hover for interaction */
}

This ensures your icon looks modern, responds to hover states, and blends beautifully with your site’s design.

SEO & Accessibility Tip

Although we’re visually replacing the login text with an icon, it’s still best practice to keep the functionality accessible. You can insert a hidden text span for screen readers:

Copied!

<span class="sr-only">Account</span>

If accessibility is a priority, wrap this inside your icon link to ensure screen readers still announce "Account".

Final Result

After taking these steps, your Squarespace 7.1 website will:

  • Add a simple SVG user icon to the navigation bar

  • Hyperlink directly to the member login or account section

  • Keep your design and content responsive and device-proof

This upgrade can not only add stylistic flair to your visual design, but it can also enhance the user experience, particularly for mobile users who benefit from easy-to-use navigation icons.

Frequently Asked Questions (FAQ)

1. Can the login text be changed to an icon in Squarespace 7.1 in any of the templates?

Yes, but there might be funny-named classes for the login or account link in some templates. To ensure it works:

  • Right-click the login link

  • Choose Inspect Element

  • Look at the class name (e.g., .user-accounts-text-link)
    Update CSS/JS if you have a different class.

2. What kind of replacement icon would you like to use: Image or SVG?

You can use either:

  • A fallback image (PNG/JPG) via CSS

  • A scalable inline SVG icon via JavaScript
    The SVG method is preferred because it scales better and loads faster.

3. Would I need a plugin to add an SVG icon to be my header?

No. In this post, I walk through how to do it all, no plugin required, with some custom CSS and a JavaScript snippet that can be added by way of Squarespace’s native settings.

4. Does it work on mobile and tablet?

Yes. The SVG icon is also responsive and adjusts in size as you resize the screen. It also serves as per your site header layout for devices.

5. How can I change the color of the icon to match my brand?

Update this CSS rule in Design → Custom CSS:

Copied!

.feather-user {
  color: white; /* Change to your brand color */
}

You can also modify the :hover color to create subtle interactivity.

6. How did this impact screen readers' accessibility?

Replacing text with an icon might be a little less accessible by default. To work around this, include a hidden Account inside your SVG link.

This makes it easier for screen readers to narrowly interpret that icon.