Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Add Custom WordPress Social Media Icons to Your Website

How to Add Social Media Icons to WordPress (3 Methods) 

Written By: author avatar Stacey Corrin
author avatar Stacey Corrin
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.
    
Reviewed By: reviewer avatar Turner John
reviewer avatar Turner John
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

Want to add social media icons to your WordPress site? With the right tools, you can place follow buttons in your header, footer, sidebar, or landing pages, even for newer platforms like Threads, Mastodon, or Bluesky.

This guide shows you three easy methods, including my favorite way with SeedProd, so visitors can find and follow you anywhere you’re active online.

Why Add Social Media Icons to Your WordPress Site?

Social media icons make it easy for visitors to follow you on other platforms. With people spending an average of 2 hours and 21 minutes a day on social media, adding icons helps you reach them where they’re already active.

Moreover, social media icons are small, allowing you to display them in many parts of your website, including:

Here’s a screenshot of how WPBeginner displays social media links in its WordPress sidebar.

WordPress social media icons displayed in the WPBeginner sidebar

When adding social media icons to your site, it’s helpful to remember that social media follow buttons are different from social share buttons or social sharing icons. Instead of asking users to share content, they encourage visitors to follow your social media profiles.

How to Add Social Media Icons to WordPress: 3 Methods

I use SeedProd on this site, so that’s my go-to. But the right method depends on your setup:

Your setupBest method
Block theme (Twenty Twenty-Four, Kadence, Blocksy)Method 2: WordPress Social Icons block
Classic theme (Astra, GeneratePress, Divi, OceanWP)Method 3: Widgets
Want custom icon brands or landing page placementMethod 1: SeedProd

1. Adding WordPress Social Media Icons with SeedProd

The easiest way to add custom icons anywhere on your site is with SeedProd.

SeedProd Drag-and-drop WordPress website builder

SeedProd is a drag-and-drop WordPress builder that lets you design headers, footers, sidebars, and landing pages without touching code. Its Social Profiles block makes it simple to add and customize icons for any network, including newer platforms like Threads, Mastodon, or Bluesky.

Step 1. Install and Activate SeedProd

First, visit the SeedProd pricing page, choose your plan, and create your account. For this guide, we’re using SeedProd Pro for its advanced features.

Next, log into your account dashboard and visit the Downloads tab. From there, you can download the plugin zip file and copy your license key.

SeedProd account dashboard Downloads tab showing the license key

Now head to your WordPress admin area and upload the SeedProd plugin. If you need help with this step, follow this guide on installing and activating a WordPress plugin.

Once you’ve activated the plugin, go to SeedProd » Settings and paste the license key you copied earlier. Click the Verify Key button to save the settings, then move on to the next step.

SeedProd Settings page with license key field to activate the plugin

Step 2. Create a WordPress Theme or Landing Page

The next step is to create a landing page or WordPress theme design; however, this will depend on which SeedProd license you chose in Step 1.

Basic and Plus users can build landing pages with SeedProd, while Plus and Elite users can create landing pages and WordPress themes with this plugin.

Follow the steps in these tutorials to build your SeedProd design:

After creating a landing page or WordPress theme, move to Step 3 to add your custom WordPress social media icons.

Step 3. Add Your Custom Social Media Icons to WordPress

SeedProd allows you to add custom social media icons anywhere in WordPress with its easy and powerful Theme Builder. After choosing your Website Kit, it’s simply a case of opening each theme part and adding the Social Profiles block.

Adding Social Media Icons to WordPress Header

Let’s start by adding social profile icons to your WordPress menu. To do this, go to SeedProd » Theme Builder, hover over your Header template, and click the Edit Design button.

SeedProd Theme Builder showing Edit Design button on the header template

On the following screen, you’ll see a 2-column layout like this:

SeedProd header builder with default 2-column logo and menu layout

By default, the template we’re using has a 2 column header with a logo and navigation menu. In order to add your social profile icons, you’ll need to change it to a 3-column section.

First, hover over the header section until it has a purple outline, then click the duplicate section icon.

Duplicating a header section in SeedProd to add a column for social media icons

Now, in the new section, hover over the contents until it has a blue border, then click the Trashcan icon to remove it.

Deleting an empty row in the SeedProd header builder

After that, click on the 3-column layout option to add it to your new section.

Selecting a 3-column section layout in SeedProd to place WordPress social media icons

Next, move the elements from the old section into your new section by dragging and dropping.

Moving WordPress blocks into the new 3-column header section in SeedProd

When you’ve finished, you should have 1 empty column left where you can add your social profile icons. Before you do that, hover once more over your old section and click the trash can icon to delete it.

Deleting the original 2-column header section after moving blocks to the new layout

To add your custom social profiles to your header, find the Social Profiles block from the left-hand sidebar and drag it onto your empty column. Now you can click the block to see its customization options.

Dragging the Social Profiles block into the header column in SeedProd

By default, the Social Profiles block will display icons for Facebook, Twitter, Instagram, and YouTube. You can change the icons by clicking each one and choosing a social media network from the dropdown menu.

SeedProd Social Profiles block showing the dropdown of available social media networks

The platforms you can choose from include:

  • Discord
  • Email
  • Facebook
  • Facebook Messenger
  • GitHub
  • IMDB
  • Instagram
  • LinkedIn
  • Medium
  • Phone
  • Pinterest
  • RSS
  • Slack
  • Snapchat
  • SoundCloud
  • Telegram
  • TikTok
  • Twitter
  • Vimeo
  • Weibo
  • Whatsapp
  • WordPress
  • YouTube
  • Custom

To add a custom social media profile button, click the Custom option and the gear icon to open the settings.

Custom social media profile settings panel in SeedProd for adding a non-default icon

Next, click the Choose Icon option and search for a different icon using Font Awesome that fits your social media needs. For example, you can add custom social icons for Spotify, Skype, Tumblr, Behance, Airbnb, Audible, Playstation, and many more.

Searching Font Awesome for a custom WordPress social media icon in SeedProd

After choosing your custom social profile icon, you can change the icon color and add your custom link.

Setting a custom color and profile URL for a social media icon in SeedProd

Further down the settings panel are options to change your icon style, size, and alignment.

WordPress social media icon size, style, and alignment settings in SeedProd

In the Templates tab, you can add a custom style to your icons with 1 click.

One-click style templates for social media icons in SeedProd

The Advanced tab offers settings to customize icon styles at a granular level. For example, you can change icon background color, size, space, shadow, margin, and padding.

You can also show or hide your social profile icons on mobile or desktop devices, which is an excellent way to improve mobile optimization for visitors using a smartphone or tablet.

Mobile and desktop visibility settings for WordPress social media icons in SeedProd

Before saving your changes, hover over your Social Profiles block and click the Save icon. This will allow you to re-use it on other areas of your website without manually adding each social link and custom icon again.

Saving the social icons block in SeedProd to reuse it across header, footer, and sidebar

So in the popup window, give your block a name like “Custom Social Icons,” and save.

Naming a saved social media icons block in SeedProd for reuse

When you’re happy with your WordPress social media icons, click the Save button in the top-right of your screen.

Save button in the SeedProd header builder after adding social media icons

Now, let’s add your social media icons to your website’s footer.

Adding Social Media Icons to WordPress Footer

To add social icons to your footer, go to the SeedProd theme builder dashboard, hover over the Footer template, and click the Edit Design link.

Editing the footer template in SeedProd Theme Builder to add social media icons

Next, open the Saved Blocks heading in the left sidebar, and drag over the custom social icons block you saved in the last step to a column in your footer area.

Dragging a saved social icons block from SeedProd Saved Blocks panel into the footer

If your WordPress footer has a similar background color to your icons, you can click the Advanced tab and choose a new icon color with the color picker.

Advanced color settings panel for social media icons in the SeedProd footer

When everything looks suitable, click the Save button to store your changes.

Adding Social Media Icons to WordPress Sidebar

To add custom social icons to your WordPress sidebar, go back to the theme builder dashboard, hover over the Sidebar template, and click the Edit Design link.

Editing the sidebar template in SeedProd to add WordPress social media icons

Now repeat the instructions from the previous step, and click the Save button when you’re finished.

Social media icons added to a WordPress sidebar using SeedProd

You can also repeat this process for any page on your website, including your landing pages and content pages, such as your about, services, and contact pages.

Step 4. Publish Your Changes

The last step is to publish your new WordPress theme so your website visitors can see your new social media profile icons. To do that, go to the Theme Builder dashboard and turn the Enable SeedProd Theme toggle to the “Yes” position.

Enabling the SeedProd theme to publish social media icons across the WordPress site

Now you can take a look at your changes. Here are a few examples from this tutorial:

Header

WordPress social media icons displayed in the website header

Footer

Social media icons in a WordPress website footer built with SeedProd

Sidebar

Social media icons in a WordPress sidebar built with SeedProd

2. Using the Built-in WordPress Social Icons Block

If you’re running WordPress 5.4 or newer, you already have access to the Social Icons block. It’s the fastest free way to add icons, and it works best with block themes.

First, go to Appearance » Editor to open the Site Editor, or open any page or post where you want icons.

Click the + button, search for “Social Icons,” and insert the block.

Adding the Social Icons block in the WordPress block editor

Click + Add icon inside the block. You’ll see a list of built-in networks like Facebook, Instagram, LinkedIn, and X (Twitter). Select the ones you need.

Selecting social media platforms in the WordPress Social Icons block, including Threads

Each icon has a field for your profile URL. Paste your link, and it will connect instantly.

Entering a profile URL for a social media icon in the WordPress Social Icons block

To add icons to your header or footer, go to Appearance » Editor and select the Header or Footer section of a template.

Click +, search for “Social Icons,” and add the block where you want it.

Adding social media icons in the header in WordPress block editor

If you don’t see Appearance » Editor, you’re on a classic theme. Use Method 3 below.

The native block covers most major networks. For landing page placement or advanced custom branding, SeedProd gives you more control.

3. Adding Social Media Icons to a Classic WordPress Theme

Classic themes don’t have a Site Editor, but widget areas work well for sidebars and footers.

Go to Appearance » Widgets. Click + in any widget area, search for “Social Icons,” and add the block.

Adding social icons to classic theme in WordPress sidebar

Click + Add icon, select each network, and paste your profile URL. Click Update to save.

One note: widgets place icons in sidebars and footer areas. For header placement on a classic theme, SeedProd’s Theme Builder handles that through its drag-and-drop editor.

FAQs on Adding Social Media Icons to WordPress

Can I add social media icons to my WordPress header and footer?
Yes. On a block theme, go to Appearance → Editor → Templates and open the Header or Footer template. Add the Social Icons block there. On a classic theme, footer widgets work well for the footer. For full header and footer control on any theme, SeedProd’s Theme Builder handles both.
Should social media icons open in a new tab?
Yes. Opening links in a new tab keeps visitors on your site while still letting them check out your profile.
What size should my social media icons be?
Keep them large enough to click easily on mobile (at least 32px) but not so big they distract from your content. Most builders let you adjust size with a slider.
Where’s the best place to display icons?
Common spots are your header, footer, and sidebar. Many site owners also add them to About or Contact pages where visitors expect to find social links.
Why are my social media icons showing as empty boxes?
The icon font failed to load. This often happens when a caching or optimization plugin (like Autoptimize or WP-Optimize) strips out the required CSS. Clear all caches, disable CSS minification, and reload the page.
My social icons aren’t clickable. What’s wrong?
Check that each URL starts with https://. A missing prefix creates a broken link. Verify you can open each URL in a browser tab before saving.
I see social icons on my site but I didn’t add them. How do I remove them?
Check three places: Appearance → Widgets, Appearance → Menus, and your theme’s settings panel. Some themes display icons automatically based on URLs set in Appearance → Customize → Social Links.

I hope this article has helped you learn how to add social media icons to your WordPress site.

You might also like these other helpful guides from our blog:

Thanks for reading! We’d love to hear your thoughts, so please feel free to join the conversation on YouTubeX and Facebook for more helpful advice and content to grow your business.

author avatar
Stacey Corrin Writer
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.