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.

A screenshot of the social icons block filled with social icons

How to add Social Icons block

  1. 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.
How to quickly add Social Icons block
  1. Once you add the Social Icons block, you will see the following placeholder where you can add social icons.
Placeholder o add social media icons to the Social Icons block

Detailed instructions on adding blocks can be found here.

Top ↑

  1. Select the Social Icons block and click on the (+) icon at the rightmost corner to show the list of available social media platforms.  
Showing the list of social media platforms
  1. If you do not find the platform you are looking for in the menu, type the name of the platform in the search box.
Searching for an available platform
  1. Select the icon from the menu to add it to the Social Icons block. 
  1. Click on the icon within the block to show the Email address input field.
Enter address for the social icons in the Social Icons block
  1. Add the URL for the social media profile in the input field and press Enter
  1. Repeat these steps for each of the social media profiles you want to add. 

Top ↑

Available social media icons

  • WordPress
  • 500px
  • Amazon
  • Bandcamp
  • Behance
  • Link
  • CodePen
  • DeviantArt
  • Dribbble
  • Dropbox
  • Etsy
  • Facebook
  • RSS Feed
  • Flickr
  • Foursquare
  • Goodreads
  • Google
  • GitHub
  • Instagram
  • Last.fm
  • LinkedIn
  • Mail
  • Mastodon
  • Meetup
  • Medium
  • Patreon
  • Pinterest
  • Pocket
  • Reddit
  • Skype
  • Snapchat
  • SoundCloud
  • Spotify
  • Telegram
  • TikTok
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • VK
  • Yelp
  • YouTube

Top ↑

Block Toolbar

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. One is the parent toolbar that appears when you select the Social Icons block. The other toolbar appears when you click on the individual social icons in the block.

The block toolbar for the Social Icons block 

The Social Icons block toolbar has five buttons: 

Block toolbar in the Social Icons parent 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.

Transform tool in the Social Icons block

Drag icon

Drag icon in the Social Icons block toolbar

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move handles

Move handles in the Social Icons block

The up and down arrow icons can be used to move a block up and down on the page.

Detailed instructions on moving a block within the editor can be found here.

Change items justification

Change items justification in the Social Icons block

The change items justification tool lets you change the horizontal placement of the items inside the Social Icons block. There are four options to choose from:

  • Justify items left will move the items towards the left side of the block.
  • Justify items center will move the items towards the center of the block.
  • Justify items right will move the items towards the right side of the block.
  • Space between items will distribute all items across the block and automatically adjust the space between them.

Change alignment 

The change alignment tool allows you to change the alignment of the social icons in the block. Here are the options available : 

  • None
  • Align left – Make the block left-aligned.
  • Align center – Make the block alignment centered.
  • Align right – Make the block align right.
Change alignment in the Social Icons block

Size

You can change the size of the icons by choosing one of the 4 preset icon sizes:

  • Small
  • Normal
  • Large
  • Huge
Size option in the Social Icons block

More options

More options in the Social Icons block

Hide more settings

The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert before

Insert a new block before the selected block(s).

Insert after

Insert a new block after the selected block(s).

Move to

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line, up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the block.

Lock

Since WordPress 6.0, you can lock the block to disallow moving and/or removing. If you lock the block, the “Lock” icon will be shown in the Block Toolbar.

Lock in the Social Icons block

For more details about Lock, refer More Options.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Social Icons

With the Remove Social Icons option, you can delete the selected block from your content.

The block toolbar for the individual social icons

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

The block toolbar for the individual social icons within the Social Icons block

Select Social Icons

Select social icons block

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

Drag

With the drag button, you can drag the block and place it anywhere in the post.

Move handles 

These buttons allow you to move the social icons left or right within the block. 

Change item justification and change alignment

These buttons let you change the justification and alignment for the whole Social Icons block.

More options:

More options for the individual social icons within the Social Icons block

Hide more settings

The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Select parent block

The Select parent block lets you navigate to the parent block (Social Icons block) inside which the selected block is nested.

Copy

Copy can be used to copy the icon to the clipboard.

Duplicate

Duplicate can be used to duplicate the social icon.

Move to

If you select Move To, you will get a blue line above the icon. You can then use the up and down arrows on your keyboard to move the line to the spot where you want to place the icon. To place the icon in the selected spot, press Enter.

Lock

The Lock option allows you to restrict the movement of the social icon or prevent removal of the icon within the Social Icons block.

Remove

With the Remove option, you can delete the selected icon from the block.

Top ↑

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, simply click the ‘cog’ icon.

Cog icon to display the Block sidebar

There are two different 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.
Block settings  for the Social Icons block

The block settings for the Social Icons block 

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

Styles settings

The Styles settings allow you to change the style of the icons in the block. You can choose among three styles: Default, Logos only, and Pill shape. Hover over the Styles buttons to get a preview of the styles.

Layout settings

With Layout settings, you can add justification to the social icons within the Social Icons block.

  • left (default)
  • center
  • right
  • space-between – will take up to 100% width and place icons at an equal distance in between

You can also change the orientation of the social icons to horizontal or stack vertically one below the other, if you have multiple social icons within the Social Icons block.

Allow to wrap to multiple lines toggle button lets you display the social icons in multiple lines when needed. 

Link settings

Open links in a new tab: Using the toggle switch you control whether the linked profile will open in a new browser tab or not. 

Show labels: Using this toggle switch you can choose to show or hide the labels for the social icons.

Sample social icon with label
Sample social icon with label

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.

Color settings in the Social Icons block

Dimension settings

The Block spacing setting impacts the space between social icons in the block. You can choose to set block spacing using different values: PX, %, EM, REM, VW, VH.

Image showing the various block spacing options.

You can also unlink the block spacing settings and change the spacing for the top and botton of the social icons.

Setting the block spacing for the top and bottom

Advanced settings

The HTML Anchor is a useful tool for creating page jumps. If you toggle the block to its HTML view, you’ll see that the HTML Anchor input is added as a CSS ID to the heading tag. You can also see the CSS class in the block HTML.

The advanced tab lets you add a CSS class 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 in the Styles settings, WordPress automatically adds a CSS class to the Social Icons block in the Advanced settings panel under Additional CSS class(es).

Advanced settings with the default Styles CSS classes added by WordPress based on the Styles chosen.
Block settings for individual social icons

The block settings for individual social icons

When you click on the individual social icons in the Social Icons block, you get a different set of Block settings in the sidebar. 

Link label 

In the Social Icon sidebar settings, you can add a Link label. The label helps screen reader users understand the context of the link. 

Advanced 

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

Top ↑

Changelog

  • Updated 2022-08-17
    • Added screenshots for 6.0
    • Updated content for 6.0 – Change items justification, block settings items, dimension control
    • Added ALT tags for the images
    • Reformatted the article, corrected spellings
    • Converting Reusable blocks to regular block
  • Update 2022-03-01
    • Add icon sizes
    • Add icon background and foreground color
    • Add justification settings
  • Update 2022-02-28
    • Add Available icons section
  • Update 2022-02-24
    • Update screenshots for 5.9
  • Created 2020-11-13

Was this article helpful? How could it be improved?