How to Change Slideshow Arrows with Icons in Squarespace
Slide arrows may be a little thing, but they have a massive impact on how your users engage with your galleries and image sliders. Squarespace 7.1 comes with plain white SVG arrows by default, which look fine and are fully functioning, but don't necessarily match your brand aesthetic. The good news? With a teensy bit of CSS, you can swap those default icons for custom arrows, whether playful, minimalist, or on-brand. In this tutorial, you’ll get a step-by-step guide to hide the standard arrows from Squarespace and add your own PNG or SVG icons and style them professionally without affecting other sections of your website.
In this guide, you’ll find out how to:
How to delete Squarespace’s default SVG carousel arrows
Include your own custom arrow icons (in PNG or SVG format)
Flip and style them professionally
Work on specific areas (without touching the entire site)
Why Customize Your Slideshow Arrows?
Image Slider arrows in Squarespace. By default, Squarespace loads image sliders with boring, white SVG arrows. Functional, though not always on brand. You can even style this so that they look like:
Branded
Playful or modern
Fully customized for specific sections
Before You Start
Choose or upload your custom arrow icon (e.g., PNG or SVG with transparent background)
Host the image using:
Squarespace's Manage Custom Files, or
Any secure CDN (like Canva, Dropbox direct links, or your own server)
The CSS You’ll Use
This CSS will:
Hide default arrows
Apply a custom red arrow icon
Flip the icon for the left arrow using scaleX(-1)
Apply everything only to a specific section (so your other slideshows remain untouched)
Paste this into: Pages → Custom code → Custom CSS
/* Target slideshow arrows only inside specific section */
section[data-section-id="6858f4e79169120523edc1d7"] button[class*="arrow-button"] svg {
display: none !important; /* Hide default Squarespace arrow icon */
}
section[data-section-id="6858f4e79169120523edc1d7"] [class*="arrow-icon-background"] {
background-image: url('https://marketplace.canva.com/RmqAQ/MAFyWZRmqAQ/1/tl/canva-cute-red-arrow-icon-MAFyWZRmqAQ.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent !important;
width: 40px;
height: 40px;
}
/* ◀ Flip left arrow */
section[data-section-id="6858f4e79169120523edc1d7"] button[class*="arrow-button--left"] [class*="arrow-icon-background"] {
transform: scaleX(-1);
}
How It Works
The section[data-section-id="..."] selector ensures this style only applies to one slideshow.
The background-image applies your custom arrow.
The scaleX(-1) flips the same image horizontally for the left direction, eliminating the need for two separate icons.
The width and height ensure the arrow appears at the right size.
Optional: Hover Effect
Want a nice interaction when someone hovers over the arrows?
Add this:
section[data-section-id="6858f4e79169120523edc1d7"] button[class*="arrow-button"]:hover [class*="arrow-icon-background"] {
filter: brightness(1.2);
}
How to Find Your Section ID
Visit your live site.
Right-click on the section where the slideshow lives → Inspect.
Look for something like:
<section data-section-id="6858f4e79169120523edc1d7">
Replace that ID in the CSS to match your section.
Final Result
Modifying the slideshow arrows in Squarespace is one of those subtle design quirks that can help your site feel more intentional and professional. You don’t need to use Squarespace’s standard white icons that are the same on everyone’s website; instead, you can easily replace them with arrows in your brand personality, scattering, minimal, playful, or fancy.
But by applying them to individual sections using CSS, you have a degree of control over which galleries they’re applied to, and can let your style flourish in the galleries that deserve it without compromising the rest of your site. Switching from one arrow set to another might sound like a small change, but it will improve your user experience and enhance your brand consistency.
Frequently Asked Questions
-
The default arrows are simple but may not match your brand’s look and feel. Replacing them with custom icons allows you to create a cohesive, polished, and branded user experience.
-
Yes. You can either upload two separate icons or use one icon and flip the left arrow horizontally with CSS. This ensures consistency while saving you the trouble of designing two separate files.
-
No, not if you target a specific section ID. This keeps your custom arrows limited to one gallery or carousel, leaving the rest of your site unchanged.
-
PNG and SVG files with transparent backgrounds work best. PNGs are easier for simple designs, while SVGs scale perfectly without losing quality.
-
Yes. You can make the arrows brighten, change color, or even animate slightly when hovered. This improves interactivity and gives users clear feedback when navigating.
