How to customize dropdown icons in Squarespace

page section

May 27

A new feature for 2025, dropdown icons are a great way to add a little creativity to your website menu! We have 16 icons to choose from, and a variety of size settings. That’s about all we can do with the editor, but we can get even more creative with CSS. 😉

n this tutorial, you’ll learn how to change the dropdown icon to a different color, how to add a background shape, and how to change it to your own custom image!

You’ll find all the steps and codes you need under the video, but be sure to watch the tutorial so you can understand which aspects of the code you’ll want to make uniquely yours.

🔧 Code 1: Change the Dropdown Icon Color

What it does: This code updates the color of the default arrow icon shown next to your dropdown items.

How to add it:

Open the program serach to access your custom CSS file
Paste this code
Change red to any hex code or CSS color you’d like (e.g. black, white, #333333).

.header-dropdown-icon svg,
.header-dropdown-flip svg{
  fill:red!important;
  stroke:red!important
}

Code 2: Change the Arrow Background

What it does: Adjusts the shape and background of the arrow

How to use it:

Add this code to your custom CSS.
Change the background to a color you want to use.
Use border-radius to create rounded corners, or remove it for a perfect square
Adjust or remove the border to create a unique look for your site.

.header-dropdown-icon svg,
.header-dropdown-flip svg{
  background: yellow!important;
  border-radius: 50%!important;
  border: 1px solid red!important
}

Code 3: Customize the flip

What it does:
This snippet adjusts how the dropdown icon looks when a menu is opened, specifically controlling the opacity and the colors.

How to use it:

Add this code to your custom CSS.
Change the color values to the colors you want to use.
Adjust the .5 in the opacity to make the icon more or less transparent

.header-dropdown-flip svg{
  opacity: .5;
  background:#efefef!important;
  fill: #333!important;
  stroke: #333!important;
  border-color:#333!important
}

Let’s combine your codes!

What it does: This code uses the color changes, border, and shape from code 1 and pairs it with the unique style for the open state from code 3.

How to use it:

Add this code to your custom CSS.
Change the color values to the colors you want to use.
Adjust the .5 in the opacity to make the icon more or less transparent

/* closed state - standard */
.header-dropdown-icon svg{
  fill: red!important;
  stroke: red!important;
  background: yellow!important;
  border-radius: 50%!important;
  border: 1px solid red!important
}
/* open state */
.header-dropdown-flip svg{
  opacity: .5;
  background:#efefef!important;
  fill: #333!important;
  stroke: #333!important;
  border-color:#333!important
}

Replace the Dropdown Icon with Your Own Images in Squarespace

Step 1: Upload your icon images to your custom files, located directly above your custom css.

Pro tip: Make sure you label them so you know which icon is for the open state and which is for the standard closed state. I recommend that you use PNG images with a transparent background that are a 1:1 ratio (perfect square) that are no larger than 100px in width/height. I like to use the free Google material icons collection for my projects: fonts.google.com/icons

Step 2: Add this custom code to your Custom CSS.

.header-display-desktop .header-dropdown-icon svg,
.header-display-desktop .header-nav-item--folder:hover .header-dropdown-flip svg{
  fill:transparent!important;
  stroke:transparent!important
}
.header-display-desktop .header-dropdown-icon svg{
  background-image:url(image-url-here);
  background-size:contain;
  background-position: center;
}
.header-display-desktop .header-nav-item--folder:hover .header-dropdown-flip svg{
  background-image:url(image-url-here);
  background-size:contain;
  background-position: center;
}

Step 3: Remove the placeholder text for the first instance of image-url-here Squarespace should show you a list of the images you have uploaded so you can click on the closed state icon image. If it doesn’t show the list, open your custom files and click on the icon file to place the image url into the code.

Step 4: Remove the placeholder text for the second instance of image-url-here Squarespace should show you a list of the images you have uploaded so you can click on the open state icon image. If it doesn’t show the list, open your custom files and click on the icon file to place the image url into the code.

Step 5: Save your work and give yourself a high five for customizing your site with code!

gallery