Social Icons block

Go back to the list of Blocks

The Social Icons block allows you to add icons linking to your social media profiles or sites. This helps to increase the visibility of your social media profiles and drive traffic to them.

Add a Social Icons block

The Social Icons block can be added to a page by clicking on the Block Inserter (+) icon button. This will open the block inserter pop-up window. Search for the Social Icons block and add it to the page or post. 

You can also type /social and hit enter in a new paragraph block to quickly insert a Social Icons block.

Detailed instructions on adding blocks

Once you add the Social Icons block, you will see the following placeholder where you can add social icons.

How to add Social Icons and links to the block

1. Select the Social Icons block and click on the (+) button to show the list of available social media platforms.  

2. If you do not find the platform you are looking for in the menu, type the name of the platform in the search box or choose the Browse all button.

3. Select the icon from the menu to add it to the Social Icons block. 

4. Click on the icon within the block to show the URL input field.

5. Add the URL for the social media profile in the input field and press Enter. If omitted, WordPress will automatically set the default protocol to https.

6. Repeat these steps for each of the social media profiles you want to add. 

Note: when adding email icon you only need to enter an email address. WordPress will automatically create link which will, when clicked on, open new email screen in email client.

Available social media icons

Block toolbars

Each block has its own block-specific controls that allow you to manipulate the block right in the editor. 

The Social Icons block has two toolbars:

• The parent toolbar that appears when you select the Social Icons block
• A second toolbar appears when you select an individual Socal Icon inside the parent block

Social Icons Block toolbar

Transform to

You can transform the Social Icons block into a Group or Columns. You can also transform the style of the Social Icons block. There are three styles available: Default, Logos only, and Pill Shape. Your theme may have different style variations available for this block.

Block moving tools

The block-moving tools allow you to move the block in the editor. Use the six dots icon to drag and drop the block and place it anywhere on the page. Alternatively, click on the up and down arrows to move the block up or down.

Get more information about moving a block within the editor.

Align

Using the alignment drop-down from the toolbar, you can align the file block to the left, make it center-aligned, or align it to the right.

Change items justification

The items justification setting allows justifying the icons to the left, center, or right. There is also an option to “Space between items”. If it is selected, the Social Icons will appear with equal spacing between them.

More options

These controls give you the option to copy, duplicate, and edit your block as HTML.

Read about these and other settings.

Individual Social Icons block toolbar

The toolbar that appears when you press on the individual icons has four buttons:   

Select Parent Block: Social Icons

This will take you to the parent Social Icons block toolbar.

Tranforms

There are no transforms for individual Socal Icon blocks

Block moving tools

The block-moving tools allow you to move the block in the editor. Use the six dots icon to drag and drop the Social Icon inside the Social Icons Block. Alternatively, click on the left and right arrows to move the Social Icon horizontally.

Get more information about moving a block within the editor.

Align and Justify buttons

If you make changes to the align and justify buttons at the Social Icon level, the settings will be applied to the Social Icons block (parent block). See align and justify button descriptions above.

More options

The More options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate or remove the block.

Read about these and other settings.

Block settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click on the Settings button next to the Save/Publish button.

There are two sets of block settings for the Social Icons block:

• The settings for the whole block that appear when you select the Social Icons block
• The settings for the individual icons that appear when you click on an individual Social Icon

Social Icons block settings

When you select the Social Icons block, you will see the following settings in the settings sidebar:

Layout

Justification – allows you to move the block to the left, right or center. You can also choose space between items to distribute space between Social Icons eaqually.

Orientation – allows you to change the horizontal list of icons into a vertical format

Allow to wrap multiple lines toggle – this setting helps ensure the block works on a small screen, especially when a Social Icon block has many icons

Settings

Icon size – Choose the size you wish your icons to display

Show text toggle – Choose to show or hide the labels for the Social Icons

Open links in a new tab toggle – Control whether the linked profile will open in a new browser tab or not.

Advanced

HTML anchor allows you to make a unique anchor text for the block and link it to another web page. For more detail, refer to Page Jumps.

The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.

Based on which style you choose for the Social Icons block, WordPress automatically adds a CSS class to that block. You can find the class in the Advanced settings panel under Additional CSS class(es). You can also add additional classes with spaces.

Social Icon Block Settings – Styles options

When you click on the Styles icon within the Block Settings sidebar, you will see the following options:

Styles

It’s possible to change the individual button style depending on your theme. Hover over a particular style to see how a style such as fill or outline will look.

Color settings

Default icons have their respective brand colors. With the Color settings, you can change the background and foreground color for all icons in the block to match your website branding. Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code.

See this guide for more information about changing colors.

Dimension settings

Dimension controls are used to control how groups of blocks are placed alongside one another, by changing the values for padding, margin, and other dimensions

Learn more about dimension controls.

Border

The Social Icons block provides border settings options to add border color, width, and radius. If there are custom border settings, custom border will be visible on image placeholder.

Learn more about border and shadow settings

Individual Social Icons block settings

Text

You can customize the text label for buttons by choosing an individual Social Icon and adding your prefered text into the the settings box.

Advanced

The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.

You can add a Link relation attribute to each button in the block. This is a more advanced feature that enables to control the button link’s rel attribute, The rel attribute defines the relationship between a linked resource and the button. Examples: nofollow, external, preload, prefetch