Social Tools, Widgets & Sidebars

Widgets »Social Icons Widget

Many themes offer social media buttons in the header or footer area, but others do not. Even if your theme does have this feature, you might want a different placement for your buttons, or you might want to use different icons that match your header. There are a few different ways to add social icons to your site!

This guide will walk you through how to add social media buttons to your sidebar or footer, using whatever icons you prefer.

Table of Contents

Social Icons Widget

The Social Icons Widget displays small graphics linked to your social media accounts, in any widget area of your theme. After adding links to your social profiles, icons are automatically displayed on your site, letting your visitors connect with you through your preferred networks.


↑ Table of Contents ↑

Add the Social Icons Widget

  1. Head to My Sites → Design → Customize → Widgets
  2. Select the widget area to which you’d like to add social icons and click Add a Widget.
  3. Find the Social Icons widget and click the title to add it.
    Social Icons Widget - Add WidgetNote: if you’ve installed plugins, you will see (Jetpack) at the end of the Social Icons widget title.
  4. Choose a title for your Widget.
  5. Choose a size for your social icons: Small, Medium, or Large.
    Social Icons Title and Size
  6. Add a full link (URL) to your first social network profile. For example,
    Add Social Media URL
  7. If you’d like to add more social icons, click Add an icon and add your next social network profile URL.
  8. When you’ve finished adding your social profile links, click Publish to save your changes.
Publish Social Widget

Your shiny new Social Icons are now on your site!

Social Icons Widget

↑ Table of Contents ↑

Reorder the Icons

You can change the order of your icons anytime by dragging and dropping them into your desired sequence. Your new order will be reflected live in the Customizer’s preview pane.

Reorder Icons

↑ Table of Contents ↑

Available Icons

We support icons for a variety of networks.

Check here for a list of available icons.











Email addresses (if your email is, type on the Account URL field)

















RSS feeds















↑ Table of Contents ↑

Add Custom Social Icons

The color of the social icons on your site is dependent on the theme you are using. If you want to add icons with a specific color or want more control over how the icons appear, you can add custom icons using the Text Widget or a Custom HTML Widget and a bit of HTML. This is also helpful if you want to add icons for less popular social networks.

Step 1. Find some social media icons that you like, and upload them to your Media Library.

You might already have some icons you would like to use, but if not you can Google “free social media icons.” When choosing images, be careful to not violate any copyright. Once you’ve found some that you like, download them to your computer.

Then, go to My Site → Site → MediaAdd New then upload all of the icons to your site.

Step 2. Add a Text widget or Custom HTML widget and format your buttons using HTML.

Go to My Sites → Design → CustomizeWidgets Select the widget area to which you’d like to add social icons and click Add a Widget. Find the Text Widget or Custom HTML Widget and click the widget name to add it.

Add a title to your widget if you like, and then add HTML to your widget following the structure below:

<a href="">
<img title="Facebook" alt="Facebook" src="" width="35" height="35">

Replace the address in the above example with your specific social profile link. For the full links, paste the link that you want the button to point to. Make sure each link begins with http:// or https://. For example, for your Facebook page, the link would be:

For the image URLs, find the Social Icon in your Media Library by going to My SiteSite → Media and then click on the image of your social icon and choose Edit. Then click Copy to save the URL and choose Back or Done to exit the image.

Social Icons - Finding URL of Image for custom icons

Repeat the code for links and image URLs for each social icon you want to add. If you’d like to add or remove services or display them in a different order, you can edit the code as necessary. You might need to tinker with the width and height values to make all of your icons display neatly in your sidebar. We’ve provided 35×35 above as an example, but you can replace that with any values you like.

Step 3. Once you are finished, click Publish and check out your pretty new social media buttons!

Example of Social Icons Widget

↑ Table of Contents ↑

Examples & Sample Images

If you are having trouble finding social media icons on the web and would like some examples to use, you can find more on this site.

To use these icons in your widget first, create a blank Text Widget from Design → Customize → Widgets.

Next, copy the block of code from the Social Media Widgets page for the icon style that you prefer:

Social Icons Source Code Example

↑ Table of Contents ↑

Frequently Asked Questions

Why doesn’t the social media icon display?

If you are using a localized version of your social media page’s address, the social media icons may not appear. Instead, try replacing the local section of your social media link with the global version.

Example: should be replaced with

Not quite what you're looking for?

Get Help