How to Use Your Own Icon for the Accordion Block in Squarespace
If you’re looking to make your Squarespace site even more unique, you’re going to love this tutorial. Today, I’ll show you how to use your own custom icons for the accordion block. Whether you want something fun, professional, or quirky, this simple customization can elevate your design in no time!
In this post, I’ll walk you through the steps to upload your images and update your custom code. Don’t worry—this is easier than it sounds, and I’ll guide you every step of the way. Plus, the code snippets are listed below, so you can copy and paste them into your site. Let’s dive in!
Step 1: Prepare Your Custom Icons
Before we get started with the code, you’ll need two images:
One for the closed accordion state
One for the open accordion state
You can use any design you like—just make sure the icons are clear and visually distinct. Once you’ve got your icons ready, it’s time to upload them to Squarespace.
Step 2: Upload Your Images in Squarespace
Navigate to your Squarespace Pages menu.
Select Website Tools and then Custom CSS.
Right above the CSS panel, you’ll see an option to upload files. Click there to upload both your closed and open state icons.
💡 Pro Tip: Always upload two separate images to make the open & closed state clear to your users.
Step 3: Add the Custom Code
Now it’s time to add some CSS magic! Paste the following code into your Custom CSS panel:
/* custom accordion block icon code from insidethesquare.co */
.accordion-icon-container div {
visibility: hidden;
}
[aria-expanded="false"]
.accordion-icon-container {
background-image: url(closed-icon-url);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
[aria-expanded="true"]
.accordion-icon-container {
background-image: url(open-icon-url);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
When you first paste this code, you’ll notice the icons disappear—that’s expected. Let’s fix that in the next step!
Step 4: Update the Code with Your Icon URLs
Replace the placeholder text (Closed Icon URL and Open Icon URL) with the actual file URLs for your uploaded images. Here’s how:
In the Custom CSS panel, locate the placeholder text
Closed Icon URL.Delete it and select the closed icon file from your uploaded images.
Repeat this process for
Open Icon URL, selecting your open icon file.
Once updated, your accordion block will display your custom icons for both open and closed states. 🎉
Step 5: Save Your Changes
After customizing the code with your image URLs, click Save to lock in your changes. Head back to your site and test the accordion block—you should now see your unique icons in action!
Additional Resources
Want to take it even further? Check out these additional tutorials on customizing your accordion block:
Free icon collection from Google: you can export any of these as a PNG in a custom color & size for your accordion icon!
The possibilities are endless, and I’m here to help you explore them all!
Thank you so much for following along! If you found this tutorial helpful, you can BuyMeACoffee to say thanks & help support my blog. Most importantly, have fun customizing your Squarespace website. You’ve got this!
