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:

Insert the Social Icons Block

You can add the Social icons block by selecting it from the Add Block button. Alternatively, you can type /social on a new line and press enter. 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:

Social icons size selector

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 series of circles and a + button. Click the + button to add your first icon.

Image showing the + icon to click to add a social 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.

GIF showing the process of clicking the + icon, searching for Facebook, and clicking the Facebook option to add the icon.
How to add a social 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

↑ Table of Contents ↑

Add New Icons

Click the + Add Icon 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:

Image: Highlighting the generic Link option.
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 Block:

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

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 the ‘cog’ icon next to the Publish button.

↑ Table of Contents ↑

Styles

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

  • Default
  • Logos Only
  • Pill Shape
Block settings

↑ Table of Contents ↑

You can also choose to open the links in a new tab by toggling the “Open in a new tab” option. When this is turned on, the links in the social icons will open in a new tab.

↑ Table of Contents ↑

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.

The Icon background color option is not available when using the “Logos only” style. When you change to Logos only, it will remove any previously selected background color. Both the Icon color and Icon background color will affect all active icons in the Social Icons block.


↑ 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 modifying the Additional CSS Class field for that icon:

Image: Additional CSS Class field for individual icon
CSS class field for an individual icon

Not quite what you're looking for?

Get Help