Custom Search Icon

What does this code do?

This code snippet will allow you to add a custom search icon in both Squarespace 7.0 and 7.1.

Video Tutorial

Create Your Custom Icon

The first step is to create your custom icons. You will need one for light backgrounds and one for dark backgrounds. I suggest using Canva.com to create a 100px by 100px icon. Make sure to download it as a PNG with a transparent background.

Upload Your Custom Icons

Then go to Design > Custom CSS > Manage Custom Files and upload you images.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Light Color Search Icon */
.sqs-search-ui-button-wrapper.color-light .search-input {
  background-image: url();
  background-size: 2vw 2vw;
}

/* Dark Color Search Icon */
.sqs-search-ui-button-wrapper.color-dark .search-input {
  background-image: url();
  background-size: 2vw 2vw;
}

Then place your cursor between the brackets () and click on the image you uploaded. This will place the image’s URL in between the brackets.

How To Use It

1. Create your custom icons and upload them to Squarespace.

2. Copy and paste the code as indicated above.

3. Add in your image links and customize the icon size.