Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add Social Media Icons to WordPress Menus (Easy Way)

Do you want to add social media icons to your WordPress menu?

While WordPress doesn’t have a built-in social media section, you can easily add these icons to your navigation menus. This allows you to promote your social media accounts in any widget-ready area.

In this article, we will show you how to add social media icons to WordPress menus.

How to Add Social Media Icons in Menu

Why You Should Add Social Media Icons to Menus?

By adding social media icons to your navigation menus, you can encourage people to visit your different social networking profiles. This can get you more followers and engagement across Facebook, Twitter, Instagram, and more.

You use third-party plugins to display social media icons in your sidebar. However, it’s also possible to add these social icons using the built-in WordPress features.

This means you don’t have to install and manage a separate WordPress plugin. It’s also an easy way to add social media icons to any widget-ready of your WordPress blog including the sidebar, footer, header, and more.

You can even add social media icons to a menu you’ve already created, and combine the social icons with links to your other posts and pages.

That being said, let’s take a look at how to easily add social media icons to WordPress menus.

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, just keep reading.

Adding Social Media Icons to WordPress Menus

First thing you need to do is to install and activate the Menu Image plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you may want to start by changing the size of the social media icons. To do this, select Menu Image from the left-hand menu and then type new dimensions into any of the boxes on this screen.

Changing the size of the social media icons in a WordPress navigation menu

After that, click on ‘Save Changes’ to store your settings.

Once that’s done, you’re ready to add social media icons to your menus, by going to Appearance » Menus.

To make a new menu, simply click on the ‘Create a new menu’ link.

How to add social media icons in WordPress

Next, give the menu a name by typing into the ‘Menu Name’ field. This is just for your reference so you can use anything you want.

With that done, click on ‘Create Menu.’

How to create a new navigation menu with social media icons

Next, click on ‘Custom Links’ to expand this section.

You can then enter the URL of your social media page, add link text, and click on the ‘Add to Menu’ button.

Adding custom links to a social media menu

When that’s done, click the ‘Save Menu’ button.

Now, hover over the custom link and you’ll see an option that says ‘Menu Image’. Simply go ahead and click this option.

Click the Menu Image option

After that, a popup will appear with all the settings for your social media icon. To start, you can choose whether to use your own image or a ready-made icon.

If you select ‘Image,’ then you can click on ‘Set image’ and then choose a file from the WordPress media library. After that, you can make the picture bigger or smaller using the ‘Image size’ dropdown.

Upload image for social media icon

On the other hand, you can choose from a ready-made library of dashicon or fontawesome icons, by selecting the ‘Icon’ radio button.

After that, simply click on the icon you want to use.

Choose an icon

To learn more about these icons, please see our guide on how to easily add icon fonts in your WordPress theme.

By default, the ‘Link Text’ will appear after the social media icon. To change this, simply select any of the other options under ‘Title position.’

If you prefer to hide the link text, then select ‘Hide’ instead.

Menu title position

Once you’re done, click the ‘Save’ button. You can now add more social icons to the menu by repeating the same process described above.

You can also add other posts and pages to the menu, change where the menu appears on your site, and more. For more information, please see our guide on how to add a navigation menu in WordPress.

Now, you can visit your WordPress website to see the social media icons live.

Social media menu

You can also add the social icon menu in your WordPress sidebar.

Simply go to Appearance » Widgets page and drag the ‘Navigation Menu’ widget to the sidebar widget area.

Social menu in widget

Then, open the ‘Select Menu’ dropdown and choose the social menu you created earlier.

With that done, click on the ‘Save’ button.

Social menu in sidebar

Note: The above image is an example. To get the widget to look exactly like that, you’ll need to add custom CSS.

We hope this article helped you learn how to add social media icons to WordPress menus. You may also want to see our guide on how to embed a Facebook video in WordPress, or see our expert pick of the best social media plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

58 CommentsLeave a Reply

  1. Brilliant article!!! You saved me time to create social menus and add them in the NewsPack Theme header, thank you so much.

  2. I’ve got the social media icons on my website. How do I link those icons to my social media profiles?

  3. Thanks for this, I’ve managed to add the Goodreads logo to my Social Menu and chose the Social Menu location too. However when I view the page it shows the magnifying glass next to the new Goodreads logo, rather than just the logo on it’s own – why is this and how do I get rid of it?

    • You would want to check with your theme’s support to see if this is due to the design of the theme itself.


    • We would first recommend reaching out to the plugin’s support for them to take a look and ensure this isn’t a hiccup with the plugin.


  4. Love this, but the icons are displayed in a column rather than next to each other. How can I fix this?

    • It would depend on your specific theme, you would first want to check with your theme’s support to ensure it is not an issue with how their menu is styled that could be causing that.


    • We do not have a specific set we would recommend at the moment but there are many different options available depending on the style you’re looking for.


  5. Setting up a social link on my site does not match the images in this article (perhaps our parent organization’s customization blocks that).

  6. Hi,

    Once again, a great and helpful tutorial. I’m just facing one issue, though. For the last step, when I try to select the menu location option, I can only see the primary menu option there. How do I get the social menu option as well?

    • Your specific theme may not have a social specific menu location. If you reach out to your theme’s support they can clarify and assist.


  7. I’m trying to get my head round how to add social media accounts to my WordPress blogsite. Any assistance appreciated. If I’ve skipped an earlier step in setting up the site, my apologies in advance for a stupid comment!

    • You may want to check with the support for your specific theme to ensure there isn’t theme-specific CSS changing your colors.


  8. Hello, is there a way to space the icons farther apart from one another? Mine seem to be too close to each other…. Thank you

  9. I tried to hide the title from being shown on the menu. Seems like that function didn’t work. the title is still visible.

    • You would want to check with the support for your specific theme to see if that would be overriding your customizations


  10. Hi! I tried using this method but I didn’t get the “select image” part. I only get to introduce the URL and Navigation Label… any ideas?

    • You may want to ensure the plugin was fully installed and activated for the select image to appear


  11. Thank you! Seems to be a better working solution than with font awesome! Is it allowed though to just use a e.g. facebook icon picture from google pictures then for the image I upload?

    • You would want to be sure to check the image usage rights if you take an image off of Google but if you are allowed to use it you could upload it to your site.


  12. I followed the directions for adding social images to my footer area and the Google & Yelp images aren’t visible. I did them the same way as those displayed. This does not appear to be browser related. Any suggestions

    • Start by reaching out to the plugin’s support to ensure there aren’t any known issues with those icons or how the menu is being added


    • If the urls are structured properly then you would want to let the plugin’s support know about your error to take a look if the error is with the plugin itself.


  13. Hi guys,

    Installed the plug in. Added 3 social accounts and clicked “Main Nav” location box. The widget replaced the existing main menu instead of being added to it, and instead of the icons showing, the social account titles show instead. I’m looking forward to the benefits of this plug in. Hope you guys can help.


  14. Thank You Very Much for Essential Information that I was Seeking on the Internet.
    Highly Appreciated.

  15. My current theme has social media icons on the main top header in the desktop version, but when switched to mobile version the social icons are gone. how can I get them to stay and possibly my header links also?

  16. Thanks for the advice, I use Simple Social Icons now and I like them very much. Any advice on what plugin to use to display a “share on twitter” or “share on facebook” button above and/or below a post, similar to what you have under the title of this article?

    • Yes, you can easily open the links in a new window. If you’re not seeing the option in your Custom Links by default, then you will have to click on the “Screen Options” tab on the top right of the screen and make sure that “Link Target” option is checked.


  17. Hello,

    Can I get the custom code for the widget to look similar to what it is on WPbeginner?

    I like the widget look for social media icons on WPBeginner so can I get the code.

    Thank you.

Leave a Reply to Danielle Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.