How to add custom icons to Squarespace 7.1 Accordion block
The Squarespace 7.1 Accordion block is a great way to organise content such as FAQs, services, features, and product information.
However, one limitation of the standard Accordion block is that you can only customise the text and the default expand/collapse icon. If you want to add a visual icon next to each accordion title such as a checkmark, star, service icon, or custom graphic Squarespace does not provide an option within the editor.
In this tutorial, we will show you how to add custom icons to your Squarespace 7.1 Accordion block while keeping the original arrow or plus/minus indicator.
This allows you to create more visually engaging accordions without losing the built-in expand and collapse functionality.
Table of Contents
Why add custom icons to an Accordion block?
Custom icons can help visitors quickly understand your content and improve the overall design of your website.
Some examples include:
Adding service icons to a pricing section
Using question icons for FAQs
Adding feature icons to product descriptions
Creating a more visual process section
Matching your brand style throughout your website.
Step-by-Step Instructions
Step 1: Copy the code below and from the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
The easiest method is to add your icons using CSS.
This means:
No changes to your page content are required.
No additional blocks are needed.
The accordion remains fully editable inside Squarespace.
For example, we can target specific accordion items and add icons using the ::before pseudo-element.
.accordion-item:nth-child(1) .accordion-item__title::before { content:"🌐"; margin-right:12px; }
.accordion-item:nth-child(2) .accordion-item__title::before { content:"📈"; margin-right:12px; }
.accordion-item:nth-child(3) .accordion-item__title::before { content:"🎨"; margin-right:12px; }
How This Code Works
The CSS uses:
::beforeto insert content before each accordion title.
For example:
content:"🌐";adds the icon.
The:
margin-right:12px;creates spacing between the icon and your accordion title.
The existing Squarespace expand icon is not changed, meaning your accordion still works exactly as expected.
-
Description text goes here
-
Description text goes here
-
Description text goes here
Step 2: For a more professional result, you can replace emoji icons with image icons.
Example:
.accordion-item__title::before {
content:"";
display:inline-block;
width:24px;
height:24px;
margin-right:12px;
background-image:url("YOUR-IMAGE-URL/YOUR-SVG-URL");
background-size:contain;
background-repeat:no-repeat;
}
This allows you to use:
Brand icons
Line icons
Custom illustrations
Font Awesome icons
Your own SVG designs
Adding Different Icons to Each Accordion Item
If every accordion item needs a different icon, you can target each item using:
.accordion-item:nth-child()Example:
.accordion-item:nth-child(1)targets the first accordion item.
.accordion-item:nth-child(2)targets the second accordion item.
.accordion-item:nth-child(3)targets the third accordion item.
This gives you complete control over the appearance of each section.
/* =====================================================
Custom SVG Icons for Squarespace Accordion
===================================================== */
/* Base icon styling */
.sqs-block-accordion .accordion-item__title::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 12px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
/* 1st accordion item */
.accordion-item:nth-child(1) .accordion-item__title::before {
background-image: url("https://cdn.jsdelivr.net/gh/tabler/tabler-icons/icons/outline/world.svg");
}
/* 2nd accordion item */
.accordion-item:nth-child(2) .accordion-item__title::before {
background-image: url("https://cdn.jsdelivr.net/gh/tabler/tabler-icons/icons/outline/device-desktop.svg");
}
/* 3rd accordion item */
.accordion-item:nth-child(3) .accordion-item__title::before {
background-image: url("https://cdn.jsdelivr.net/gh/tabler/tabler-icons/icons/outline/photo.svg");
}
Key Takeaways
Works with Squarespace 7.1
Keeps the native accordion functionality
No JavaScript required
Fully editable in Squarespace
Lightweight solution
Compatible with mobile devices
Easy to customise
Improves visual hierarchy
FAQs
Will this remove the existing plus or arrow icon?
No. This method adds an additional icon before the accordion title while keeping Squarespace's default expand/collapse indicator.
Does this work with Squarespace 7.1 Fluid Engine?
Yes. The CSS targets the Accordion block structure used by Squarespace 7.1.
Can I use my own icons?
Yes. You can use emojis, SVG icons, image URLs, or custom icon libraries.
Do I need JavaScript?
No. This solution only requires CSS.
Will it affect accordion animations?
No. The accordion functionality remains controlled by Squarespace.
Conclusion
Small design improvements can make a big difference to the overall feel of a website.
Adding custom icons to the Squarespace Accordion block is a simple way to make FAQs, services, and feature sections more engaging while keeping the reliable functionality of the native Squarespace component.
By combining custom icons with the existing accordion controls, you can create a more polished and branded user experience without adding unnecessary code or plugins.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, you can book our consultation services.
