
A Guide to Adding and Customizing Social Icons on Your Website
Social icons can enhance your site's header by providing easy access to your social media profiles. Here's how to manage them effectively:
Displaying Social Icons
Version 7.1:
- Open Page panel and click Edit
- Click Edit Site Header
- Click Add Element
- Toggle Social Links to ON
- Add social links through the Content tab if needed
- Save changes
Version 7.0: Built-in social icons appear automatically in compatible templates (Aviator, Bedford, Brine, Farro, Montauk, Pacific, Skye, Tremont, York)
Styling Your Social Icons
Size and Border Adjustments:
- Edit Site Header
- Click social link > pencil icon > Design
- Adjust Social Icon Size slider
- Choose border shape (Outline or Solid Line)
- Set border thickness if using Outline style
Color Customization:
For Solid/Gradient Headers:
- Open header editor
- Click Edit Design > Color
- Adjust Navigation Color
- Modify Primary Button Background for hover effects
For Adaptive Headers:
- Open site style > Color
- Edit selected color theme
- Adjust Navigation Link settings
- Update Primary Button Background for hover effects
Additional Style Options:
- Icon shapes: Rounded, Square, or Standard (brand-specific)
- Size variations
- Border styles
Hiding Social Icons
Version 7.1:
- Edit Site Header
- Click Add Element
- Toggle Social Links to OFF
- Save changes
Version 7.0:
- Open Site Style panel
- Locate Social fine-tuning option
- Select Hide Social Icons or equivalent setting
- Save changes
For additional customization, use the social link block to add icons in other areas of your site.
Related Articles

Choose the Perfect Template for Your Squarespace Website
