Built-in social icons

Display, style, and remove social icons on your site.

Last updated January 9, 2025

You can display built-in social icons on your site after adding social links. In most cases, icons appear in your site’s header automatically or after you enable them in style settings. This guide reviews how to enable, style, and hide built-in social icons.

To learn how to rearrange icons, or add and remove the services these icons link to, visit Adding social icons. To add icons to other areas of your site, use Social links blocks.

Accessing this feature

If your site is on version 7.0, the ability to display built-in social icons and their location depends on your template.

Built-in social icon display by version

How your built-in social icons display depends on which version your site is on.

All version 7.1 sites can display built-in social icons in the site header. To display them, you may need to enable them:

  1. Open the Pages panel and click Edit on any page on your site.
  2. Hover over the header and click Edit site header.
  3. Click Add elements and switch the Social links toggle on.
  4. If you haven't added social links to your site yet, hover over the header and click Social links when it appears, then click the pencil icon. You can add social links in the Content tab. Keep in mind, your social links are site-wide.
  5. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

To learn more about your site header, visit Building a site header.

Here's a list of where built-in social icons display in version 7.0 template families. In some templates, you may need to enable them for them to appear. For more help, visit your template's guide.

Template Computer Mobile
Adirondack None None
Avenue Footer Footer

Aviator

Top-right or bottom-center, depending on the layout. Bottom-center

Bedford

None None

Brine

Header None

Farro

Header Icons don't display
Five Header and/or Footer Only footer icons display
Flatiron Footer Footer
Forte Header Navigation overlay
Galapagos None None
Ishimoto Footer Footer
Momentum Navigation bar Navigation overlay

Montauk

Info footer Info footer
Native Footer Footer

Pacific

None None

Skye

Header Footer
Supply Navigation sidebar Navigation overlay

Tremont

Header Header
Wells Navigation sidebar Header
Wexley Footer Footer

York

None None

Style social icons

You can customize the size, border, and color of your site's built-in social icons.

Size and border

To change the size and border of your social icons:

  1. Click Edit on a page, then click Edit Site Header.
  2. Click the social links, click the pencil icon, then click Design.
  3. Use the Social Icon Size slider to change the size.
  4. Select a Border shape and choose Outline or Solid for the border style.
  5. If you choose Outline, use the Thickness slider to change the border's width.
  6. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Color on Solid or Gradient headers

To change the color of your social icons when your header's background style is set to Solid or Gradient:

  1. While editing a page, open the header editor
  2. In the header editor, click Edit Design, then click Color.
  3. Click Navigation color to edit the color of your navigation links and built-in social icons.

To change the hover color of social icons on Solid or Gradient headers, edit the Primary Button Background tweak in your site's default color theme. Keep in mind, this also changes the color of buttons using the primary button styling on the default color theme.

Color on Adaptive headers

To change the color of your social icons when your header's background style is set to Adaptive:

  1. While editing a page, open site styles, then click Colors.
  2. Click the pencil icon on the color theme selected for your site header.
  3. Change the Navigation links tweak.
  4. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

To change the hover color of social icons on Adaptive headers, edit the Primary Button Background tweak in the top section's color theme. Keep in mind, this also changes the color of buttons using the primary button styling on sections using this color theme.

To style your social icons:

  1. Open the Site styles panel.
  2. Click on the social icons in the site preview.
  3. Change the style of the icons using the style tweaks that appear.
  4. Click Save.

Some templates have more options, which may include:

Style tweak Options
Social Icon Style

Change the shape of the social icons. Options usually include:

  • Round
  • Square
  • Normal - The default shape of the service's branding. For example, the Facebook icon will be in the shape of an "f."
Color Overlay / Alternate Color Choose a second color for display on banners
Standard Color Use the default color of the service's branding.

Hide built-in icons

To hide built-in social icons:

  1. Open the Pages panel and click Edit on any page on your site.
  2. Hover over the header and click Edit site header.
  3. Click Add elements and switch the Social links toggle off.
  4. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
  1. Open the Site styles panel.
  2. Look for Social tweaks. The tweak name varies by template, but look for options like Hide social icons, Show social icons, and Social position: hide. You can click the icons in the preview to help find the tweak.
  3. Click Save.

Note

Built-in social icons can't be hidden in the Flatiron or Native templates.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.