Blocks, Widgets Blocks

Blocks » 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:

Table of Contents

Video Tutorial

↑ Table of Contents ↑

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.

↑ Table of Contents ↑

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.

↑ Table of Contents ↑

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

↑ Table of Contents ↑

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

↑ Table of Contents ↑

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

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Click on the ⚙️ icon to open the block settings
Styles

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

  • Default
  • Logos Only
  • Pill Shape
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
Color Settings

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.
  • 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.)

↑ Table of Contents ↑

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.

Not quite what you're looking for?

Get Help