Use an SVG Logo in Squarespace

Squarespace doesn’t currently support SVG logos, but you can still use one by using some CSS to replace the main logo. This code will work for Squarespace 7.1 and Squarespace 7 for templates in the Brine family.

Table of Contents

Step 1 - Upload your SVG file

Go to your PAGES menu and click the + symbol (how you add a new page) and click on LINK. Click the gear icon then click FILE. Now click on UPLOAD FILE and upload your SVG logo. The logo file gets the URL “/s/file-name.svg” but if you want the exact URL, you can click on the uploaded file so a checkmark appears beside it then hit SAVE and now in the box at the bottom in the field for LINK, it’ll give you the link to your file.

Step 2 - Add in the CSS

Now we’re going to put in the code to hide the main logo, and add the SVG logo as a background image. If your SVG icon has the same aspect ratio as your normal logo, that would be best, but we’ll set the background to “contain” just in case they are different aspect ratios.

Copy and paste the following CSS into DESIGN → CUSTOM CSS. Pick the one for your specific version of Squarespace.

Squarespace 7.1 Code

/* Hide the normal logo */
.header-title-logo img, .header-mobile-logo img {
  visibility: hidden !important;
}

/* Set background image to be the SVG logo */
.header-title-logo a, .header-mobile-logo a{
  /* Change the "left" below to "center" or "right" if you want the logo positioned in the middle or on the right */
  background: url("/s/link-to-file.svg") no-repeat left center !important;
  background-size: contain !important;
}

Squarespace 7 (Brine family of templates) Code

/* Hide the normal logo */
a.Header-branding img {
  visibility: hidden !important;
}

/* Set background image to be the SVG logo */
a.Header-branding {
  /* Change the "left" below to "center" or "right" if you want the logo positioned in the middle or on the right */
  background: url("/s/link-to-file.svg") no-repeat left center !important;
  background-size: contain !important;
}

---

Video Instructions