Table of contents
Social media icons with the site editorSocial media icons with a pluginSocial media icons with a widgetBenefits of social media icons on WordPressChange the color of social media iconsSocial media icons in a WordPress headerSocial media icons in a WordPress footerNext stepsAdditional resources
Get the industry’s fastest hosting for WordPress◦ 99.999% uptime
◦ Comprehensive security
◦ 24/7 support
Explore options

WordPress Guide → Build → Slug

WordPress social media icons: Headers, footers, colors, & more

Want to grow your online presence beyond your site? Social media icons are one of the easiest ways to do that. They help your visitors find and follow your accounts on platforms like Instagram, Facebook, YouTube, and X — straight from your WordPress site.

In this guide, you’ll learn how to add, customize, and place social media icons exactly where you want them.

Get fast, reliable hosting for WordPress

Power your site with the industry’s fastest, most optimized WordPress hosting

WordPress.org hosting

How to add social media icons with the site editor

If you’re using a block-based WordPress theme like Twenty Twenty-Four, you can add social media icons directly using the Site Editor.

Add social icons to your template

  • Go to Appearance > Editor in your WordPress dashboard.
  • Select Templates or Template Parts, depending on where you want the icons to go (header, footer, etc).
  • Click Edit on the section you want to customize.
  • Add the Social Icons block where you want it.
  • Click the + icon inside the block to add a social platform (e.g. Facebook, Twitter, LinkedIn).
  • Add the URL to your profile when prompted.

Customize the icons

  • Use the right-side panel to adjust alignment, icon color, and style (e.g. logos vs. plain icons).
  • Rearrange icons by dragging them inside the block.

Tip: If your theme doesn’t support the Site Editor, use a plugin or widget instead.

How to add social media icons with a plugin

Social media plugins are a solid option if you want more control over styling, placement, or animation.

Popular social media icon plugins

Here are a few trusted options:

How to use a plugin like Simple Social Icons

  • Go to Plugins > Add New and search for “Simple Social Icons.”
  • Click Install, then Activate.
  • Go to Appearance > Widgets and drag the Simple Social Icons widget into a sidebar or footer area.
  • Fill out the fields for each social network and adjust the colors, alignment, and icon size.

Most plugins let you control:

  • Which platforms to display
  • Icon shape (square, circle, rounded)
  • Icon size and color
  • Open links in new tabs

How to add social media icons with a widget

Widgets are the old-school way to add social icons, but they still work great — especially with classic themes.

Steps to add icons using a widget

  • Go to Appearance > Widgets.
  • Drag a Custom HTML or Text widget to your preferred widget area (sidebar, footer, etc).
  • Paste your social media icon HTML. For example:

<a href=”https://facebook.com/yourpage” target=”_blank”>
  <img src=”https://example.com/facebook-icon.png” alt=”Facebook”>
</a>

Or, use a plugin like Simple Social Icons that adds a ready-made widget to this screen.

Tip: If your theme uses a block-based widget editor, you can also use the Social Icons block directly here.

Benefits of social media icons on WordPress

Adding social icons isn’t just about looking good. They actually help your site in a few key ways:

  • Increase your social following – Visitors who like your content can follow you instantly.
  • Cross-promote content – Push traffic between your blog, YouTube channel, or Instagram page.
  • Build trust and credibility – A strong social presence shows you’re active and legitimate.
  • Improve user experience – Users don’t have to hunt down your social profiles.

How to change the color of social media icons in WordPress

Depending on how you added your icons, there are different ways to change their color.

If you’re using the block editor:

  1. Click the Social Icons block.
  2. In the right-hand sidebar, find the Color settings.
  3. Change the Icon Color and Background Color as needed.

If you’re using a plugin:

Look for color settings within the plugin’s widget or settings area. Most plugins allow you to:

  • Use brand colors automatically
  • Choose custom colors for icons and backgrounds
  • Adjust hover colors

If you’re using HTML manually:

You’ll need to style them with CSS:

.custom-icon img {

  filter: grayscale(100%) sepia(100%) hue-rotate(190deg);

}

Or upload pre-colored icons instead.

How to add social media icons in a WordPress header

The header is prime real estate for social icons.

Using the Site Editor:

  1. Go to Appearance > Editor.
  2. Open your Header template part.
  3. Add the Social Icons block next to your logo or menu.
  4. Choose alignment and size so it doesn’t overcrowd the design.

Using a plugin or theme settings

Some premium themes (like Astra or GeneratePress) include header icon options under Customize > Header > Social Icons. You just enable the icons and add your profile URLs.

How to add social media icons in a WordPress footer

Footers are the most common spot for social links — and for good reason. They’re out of the way but always visible.

Add icons with the Site Editor

  1. Go to Appearance > Editor.
  2. Open the Footer template part.
  3. Add a Social Icons block where you want it.
  4. Adjust icon style and alignment to match your design.

Add icons with widgets

If your theme uses widgets:

  1. Go to Appearance > Widgets.
  2. Add a Social Icons, Text, or Custom HTML widget to the Footer area.
  3. Paste your links or icons.

Additional resources

How to build a WordPress site →

A complete beginner’s guide that covers 9 key steps to a successful launch

Website builders vs. WordPress →

With website builders and WordPress at your disposal, you don’t need to expend your energy or savings to build a website that suits your brand.

How to use WordPress Gutenberg blocks →

A complete beginner’s guide to Gutenberg blocks