How to add custom icons images to Squarespace 7.1 navigation

Adding custom icon images to your site navigation in Squarespace 7.1 is a great way to visually enhance your menu, especially if you're aiming for a more branded, interactive, or modern look. Whether you want to display social icons, category visuals, or simple graphics next to menu items — you can do this with a combination of HTML in your page titles and custom CSS.

In this tutorial, we’ll show you how to add custom image icons next to your navigation links in Squarespace 7.1.

Table of Contents

• Why Add Custom Icons to Navigation

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Add Custom Icons to Navigation?

• To enhance visual branding

• To create a more engaging, modern feel

• To support accessibility and quick visual recognition

• To make navigation more mobile-friendly or user-intuitive

Complexity: Moderate

---

Step-by-Step Instructions

Step 1

First thing we need to do is upload your icons onto Squarespace. From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS editor box > Custom CSS and at the bottom click on the 'MANAGE CUSTOM FILES' button and then click on the 'Add image or font' button to upload your icon images.

---

Step 2

The next step will be to add the basic styles for all the links for both desktop and mobile devices.

/*BASIC STYLES FOR ALL LINKS*/
.header-nav-item a::before,
.header-menu-nav-item a::before {
  content: '';
  height:30px;
  width: 30px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  vertical-align: middle;
  margin-right: 5px;
  display: inline-block;
}

---

Step 3

Add code for specific link. To select only the specific link then we can use :nth-child.

.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item:nth-child(1) a::before {
  background: url('');
}

* change the number depending on which link you want to select 1, 2 ,3 etc.

---

Step 4

Assign icon to link.

To do this place your cursor in between ' ' in background: url (' '); line.

Then click the ‘MANAGE CUSTOM FILES’ to show the icons. Then click on the icon to be assigned to the link once.

---

Step 5

Different icon for each link.

Repeat steps 3 and 4. Below are the codes for link 2 and link 3.

.header-nav-item:nth-child(2) a::before,
.header-menu-nav-item:nth-child(2) a::before {
  background: url('');
}

.header-nav-item:nth-child(3) a::before,
.header-menu-nav-item:nth-child(3) a::before {
  background: url('');
}

---

Key Takeaways

• You can use HTML tags inside Navigation Titles to add styling hooks.

• Custom CSS lets you attach background images to those tags.

• This method is perfect for branded icon navigation or unique menu visuals.

• Works on both desktop and mobile menus, though you may want to adjust size for responsiveness.

FAQs

Will this affect SEO or menu functionality?
No. The icons are added via CSS and won’t interfere with navigation behavior or search indexing.

Can I use SVGs?
Yes! SVGs are great for sharp resolution, but be sure they’re hosted securely (preferably on your site or a trusted CDN).

What if I want the icon above the text?
You can adjust the layout using flex-direction: column; in CSS for a stacked effect.

---

---

Conclusion

Custom navigation icons add a thoughtful design touch and elevate the user experience on your Squarespace 7.1 site. With just a bit of CSS and careful image use, your site navigation can become a more interactive and visually compelling element of your site’s design.

---

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.