Back to Support Content and Media Blocks Social Icons Block

Social Icons Block

The Social Icons block allows you to add social media icons to any page or post and direct people to your social media profiles.

Here’s an example:

Video Tutorial

Video Transcript

In this video, we’ll take a look at the Social Icons block, which allows you to add social media icons to any page or post on your site, so your visitors can easily find your social media profiles.

To add a social icons block, click the Add Block button, and then search for the social icons block, or type a forward slash on a new line, followed by the word “social.” Then, press Enter to add the social icons block. 

Next, click the plus button to add your first icon. You’ll see a few icons to help you get started, but there are dozens of icons available, representing just about every major service. You can select the one you want from the list or search for a specific icon, like Facebook. 

Next, you’ll need to link the icon to your social media profile. To do this, click on the icon, and a box will appear for you to enter the address. Type or paste the link to your social media profile and click the arrow icon to apply it. 

To add additional icons, first, click to select the social icons block again. Then, click the plus button to the right and search for the icon you want. When you find it, select the icon to add it to the list. Click the icon again to enter the address, and click the arrow icon to apply it. 

You can repeat this process to add as many icons as you like. And if the icon you want isn’t there, you can add a generic link button instead. 

To remove an icon, click on it to bring up its individual toolbar. Then, click the ellipsis button and select the option to remove this icon. 

When you’re finished adding icons, you can adjust the settings for the entire block. First, click the button to the left of the toolbar to select the social icons block. With the block selected, you can change the justification of the icons within the block or change the alignment of the entire block itself. You can also define a different size for the icons if you like. 

To view even more options for the Social Icons block, click the Options button and select Show More Settings. Here, you can choose from three different styles for your icons; Default, Logos Only, or Pill Shape. 

In the layout options, you can change the justification of the icons and also choose between horizontal or vertical orientation. And if you have a lot of icons, you might want to wrap around to multiple lines on smaller screens. 

In Link Settings, you can also choose to open the links in a new tab when your visitors click an icon, and you can show the name or label of each icon. icon. If you want, you can also modify the colors used in the icons themselves, or the background color, which will override the default colors used for each icon. 

And finally, you can change the spacing between the icons by entering a specific number of pixels here. 

With these options in place, your social icons will help your visitors find your social media profiles or other sites. For more help with blocks, please visit WordPress.com/support.

Insert the Social Icons Block

To add the Social Icons block, click on the + Block Inserter icon and search for “social icons”. Click it to add the block to the post or page.

💡

Using your keyboard, you can also type /social on a new line and press enter to quickly add a new Social Icons block.

When you add the block for the first time, you will also see a Size setting that will help you define the size of your icons:

An empty Social Icons block with the Size option in the Block Toolbar expanded to display the different icon sizes.

For more, visit our detailed instructions on adding blocks.

Add Your Social Profiles

When you first add the block, you’ll see a + button. Click the + button to add your first icon.

The Social Icons block with no social icons and a plus icon to add your first icon.

A list of all the available icons will appear. You can select the one you want from the list, or use the search option to search for an icon like “Facebook”. You can add the icons to all your social networks this way.

The plus icon expanded to show the different icons that can be added, as well as a search option.
Facebook entered into the Search Field to find the Facebook Social Media icon.

Next, you can link the icon to your social media profile. To do this, click on the icon once, and a box will appear for you to enter your address. Type or paste the link to your social media profile, and click the arrow icon to enter it.

GIF showing the process of clicking on the social icon and adding the link to your social media profile.
How to link your social icon

⚠️

If you do not add a link to the icon you will not see the icon on your preview or the live site.

Add New Icons

Click the + Block Inserter button to the right of the current icons. This will open a list of all the available icons. You can search for the icon to select the one you want.

Gif: Click the Add Icon button to open the list of available social icons.
Adding a new icon.

If the icon you want isn’t there, there’s a generic link button that can be used instead:

Add a new Icon and search for Link to add a custom social network not in our default list.
The generic Link icon

List of Supported Icons

The following icons are available to use:

  • 500px
  • Bandcamp
  • Behance
  • CodePen
  • DeviantArt
  • Dribbble
  • Dropbox
  • Etsy
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Goodreads
  • Google
  • Instagram
  • Last.fm
  • LinkedIn
  • Email (mailto: links)
  • Mastodon
  • Meetup
  • Medium
  • Patreon
  • Pinterest
  • Pocket
  • Reddit
  • RSS Feed (URLs with /feed/)
  • Skype
  • Snapchat
  • Soundcloud
  • Spotify
  • Telegram
  • TikTok
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • VK
  • WordPress
  • Yelp
  • YouTube

Remove an Icon

To remove an icon, click on it to bring up its individual toolbar. Click the ellipsis (three-dots) button for that icon and select Remove:

Gif: Click the ellipsis (three-dot) button above an individual icon to reach the Remove Block option for that icon.
Removing a social media icon

Block Settings

You will find additional block settings in the right sidebar when you click on the block. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:

The settings icon in the Editor with a black background and the tooltip "Settings" below it.
Click the Settings icon to open the block settings
Layout

You can choose the justification of the icons, from left, center, right, or space between items.

You can display the buttons vertically (i.e., stacked in a column) using the Orientation setting in the sidebar of the parent Buttons block.

By turning on the Allow to wrap to multiple lines setting, the buttons will move to the next line when there isn’t enough space on a mobile device (recommended). With this setting off, all the buttons will stay on the same line no matter what.

You can also choose to open the social links in a new tab by toggling the Open links in new tab option.

  1. Click on the space next to the last icon to select the whole Social Icons block.
  2. In the right sidebar, turn on the option to Open links in new tab.
How to set links in the Social Icons block to open in a new tab.
Open links in the Social Icons block in a new tab
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. Learn more.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Each social media icon can also have its own individual class. Add a class to an icon by selecting it, and modify the Additional CSS Class field for that icon.

Block Styles

Styles

In the block settings, you can choose from three different styles for your icons:

  • Default
  • Logos Only
  • Pill Shape
Block settings
Color

There are two options in Color Settings that you can modify.

The Color Settings panel from the Social Icon block's Block Settings is displayed.

If you do not select a color, the icon will be used in the color of that social network (example: blue for Facebook, red for YouTube.)

Dimensions

On certain themes, the block will include a setting for Dimensions, with options for padding or margin.

An arrow points to the + button next to dimensions, revealing clickable options for padding and margin.

Click on the + icon next to Dimensions to select and activate the Padding and Margin dimension settings.

The Padding setting affects the space around the block’s content, inside of its borders.

The Margin setting affects the space outside of the selected block’s borders.

You can type in a custom value in the text field if you want the same spacing all around the block.

For more specific control, click the link icon to set different spacing values for the top, right, bottom, and left of the block.

An arrow points to the link icon next to Padding and Margin, which opens up the controls for top, right, bottom, and left dimensions.

To change the unit for the margin or padding setting, click on PX to display a dropdown with the other supported units: %, EM, REM, VW, and VH.

An animated GIF shows the process of clicking on PX to open up a dropdown of other units.
Block Spacing

Adjust the distance between any two blocks. You can customize your block spacing as described below:

Block spacing settings.
  1. Click the dotted lines to increase or decrease the spacing between your block items.
  2. Click on the settings icon to set a custom value for your block spacing.
  3. Click on the link icon to unlink your block spacing settings. This means that you can set different values for each side of the block, instead of having the spacing be equal all around the block.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!