Customize your social icons

After adding your social media icons, you can customize their appearance to match your site’s design. The Social Icons block offers several styling options, covered in this guide.

Choose from preset icon style options by following these steps:

1. Select List View in the top-left corner of the editor.
2. Click the Social Icons block in the list view.
3. In the block settings sidebar on the right, click the Styles tab (the icon looks like a black and white circle).
4. Under Styles, choose between:
   • Default: Standard icons.
   • Logos only: Just the social media logos.
   • Pill shape: Icons with rounded corners.
5. Click “Save“ or “Publish” in the top-right to apply your changes.

To change the color of the icon or the background color of the Social Icons block, follow these steps:

1. Select List View in the top-left corner of the editor.
2. Click the Social Icons block in the list view.
3. In the block settings sidebar on the right, click the Styles tab (the icon looks like a black and white circle).
4. Under Color settings, you’ll find options for:
   • Icon color: Changes the color of the social media icons.
   • Icon background: Changes the color behind the icons.
   • Use the (⋮) menu to activate the background option to set the background color of the entire Social Icons block.
5. Click “Save“ or “Publish” in the top-right to apply your changes.

Learn more about the color settings.

You can resize the icons by following these steps:

1. Select List View in the top-left corner of the editor.
2. Click the Social Icons block in the list view.
3. In the block toolbar that appears, click the “Size” setting and choose from:
   • Small
   • Medium
   • Large
   • Huge
4. Click “Save“ or “Publish” in the top-right to apply your changes.

By default, social media icons display without text labels. To add labels:

1. Select List View in the top-left corner of the editor.
2. Click the Social Icons block in the List View.
3. In the block settings sidebar on the right, find the “Show text” option and toggle it on. The name of the social media platform will appear with the icon.
4. If you want to modify the text, click on a single icon and open the block settings sidebar.
5. Enter the text you want to appear in the “Text” field.
6. Click “Save“ or “Publish” in the top-right to apply your changes.

To add a border or a shadow to your Social Icons block, follow these steps:

1. Select List View in the top-left corner of the editor.
2. Click the Social Icons block in the list view.
3. In the block settings sidebar on the right, click the Styles icon. It looks like a black and white circle.
4. Locate the “Border” section.
5. Adjust the border width, color, and radius using the available controls.

Learn more about adding a border.