Built-in social icons

false

Built-in social icons

Last updated April 28, 2025 18:41

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

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.

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.

• Version 7.1
• Version 7.0

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.

Style social icons

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

• Version 7.1
• Version 7.0

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:

Hide built-in icons

To hide built-in social icons:

• Version 7.1

• Version 7.0

• Open the Pages panel and click Edit on any page on your site.

• Hover over the header and click Edit site header.
• Click Add elements and switch the Social links toggle off.

• Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

• Open the Site styles panel.

• 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.
• Click Save.

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

Was this article helpful?

Yes No

40 out of 306 found this helpful

Yes No

Built-in social icons