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:
In this guide
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.
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:
For more, visit our detailed instructions on adding blocks.
When you first add the block, you’ll see a + button. Click the + button 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.
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.
⚠️
If you do not add a link to the icon you will not see the icon on your preview or the live site.
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.
If the icon you want isn’t there, there’s a generic link button that can be used instead:
The following icons are available to use:
- 500px
- Bandcamp
- Behance
- CodePen
- DeviantArt
- Dribbble
- Dropbox
- Etsy
- Flickr
- Foursquare
- GitHub
- Goodreads
- Last.fm
- Email (mailto: links)
- Mastodon
- Meetup
- Medium
- Patreon
- RSS Feed (URLs with /feed/)
- Skype
- Snapchat
- Soundcloud
- Spotify
- Telegram
- TikTok
- Tumblr
- Twitch
- Vimeo
- VK
- WordPress
- Yelp
- YouTube
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:
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:
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.
- Click on the space next to the last icon to select the whole Social Icons block.
- In the right sidebar, turn on the option to Open links in new tab.
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.
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.
In the block settings, you can choose from three different styles for your icons:
- Default
- Logos Only
- Pill Shape
There are two options in Color Settings that you can modify.
- Icon color: Changes the color of the icons in the Social Icons block.
- Icon background color: Changes the background color of all of the icons.
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.)
On certain themes, the block will include a setting for Dimensions, with options for padding or 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.
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.
Adjust the distance between any two blocks. You can customize your block spacing as described below:
- Click the dotted lines to increase or decrease the spacing between your block items.
- Click on the settings icon to set a custom value for your block spacing.
- 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.
