Custom Header Social Link Icon

Code Toolkit

Jan 18

What You'll Create

A custom icon that replaces a social link in your header navigation. The default social icon becomes invisible while your custom image appears in its place using CSS pseudo-elements. Works for both desktop and mobile navigation.

The Problem It Solves

Squarespace offers a limited set of social icons, and there's no way to add custom icons for platforms they don't support or to use your own branded icons. If you want a search icon, TikTok logo, or any custom graphic in your social links area, you need this CSS technique.

Perfect For

Custom search icons in navigation, TikTok or newer platform icons, branded social graphics, icon-based CTAs in header, custom navigation elements.

What Makes This Different

Targets specific social links by identifying URLs containing keywords like "search". Hides the default icon at 0% transparency, then displays your custom image in its place. Includes separate targeting for desktop and mobile navigation to ensure consistent appearance across all devices.

Details

Section Type: Fluid Engine
Code Type: CSS
Prerequisites: Social link added with specific URL containing target keyword
Toolkit Title: Custom Header Social Link

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

The complete, copy-paste code
Video walkthrough explaining how it works
The principles behind the technique so you can customize it
Access to our private community for support

Get Access to Standout Squarespace →

Squarestylist Support