Skip to content
WordPress Guide

How to Add Social Media Icons in WordPress

A neat row of icons linking to your profiles, without a plugin. Where to put them, how to style them and the settings that are easy to miss.

A woman working on a tablet with a keyboard at a cafe table
9 sections · 7 min read
In this article · 9 sections

Your business has a Facebook page, an Instagram account and a LinkedIn profile, and customers keep asking whether you are on them. The website does not say. You want a neat row of small icons in the footer, or perhaps beside the menu, that take people straight to each profile.

You do not need a plugin for this. To add social media icons in WordPress, the built-in Social Icons block does the job in block themes and in the widget areas of most classic themes, and many themes have their own social option too. Which one you use matters less than using only one.

First, decide which profiles get an icon

An icon is a promise that there is something worth seeing behind it. A visitor who taps a Twitter bird and lands on an account last used four years ago learns something about your business, and not something good.

So list only the profiles you actually keep up: ones you post on, answer messages on, or where reviews and photos are current. Three active profiles look better than seven half-forgotten ones. Copy the full web address of each profile from the browser while logged out, so you know it is the public page and not an admin screen.

How to add social media icons in WordPress with the Social Icons block

The block works the same way wherever you place it: on a page, in a header or footer template part, or in a widget area.

  1. Open the place you want the icons. For a block theme footer, go to Appearance → Editor and open the footer. For a classic theme, go to Appearance → Widgets and expand a footer area.
  2. Click + and add the Social Icons block.
  3. Click the + inside the block and choose a network, such as Facebook, Instagram, LinkedIn or YouTube. The list is long and includes WhatsApp, Mail, X, Threads, Yelp and more.
  4. Click the new icon and paste the profile address into its link box.
  5. Repeat for each profile. Drag the icons, or use the arrows in their toolbar, to put them in order.
  6. Save, or click Update on the Widgets screen, and check the live site.

A detail worth knowing: an icon with no address is simply left out of the live page. That is useful while you wait for a link from a colleague, but it also means an icon you see in the editor may not be there for visitors. If one is missing, click it and check its link.

If you add the icons in a classic theme’s widget area, our beginner’s guide to WordPress widgets explains how those areas work and how to move blocks between them.

Choosing how the icons look

Select the Social Icons block itself (not one icon) to see its options.

  • Styles. Default shows coloured circles in each network’s brand colour. Logos Only drops the circle and shows the bare symbol. Pill Shape gives rounded rectangles, which suit icons with text.
  • Icon size. A choice running from Small to Huge. Normal or Large usually works; remember that people tap these on phones.
  • Colours. You can set one icon colour and background for the whole set, for example white icons on your footer’s dark background. Check the contrast. Pale grey on white is hard to see.
  • Show text. This toggle prints the network’s name beside each icon. When labels are hidden, WordPress still includes the name as text for screen readers, so the icons are not silent to people who cannot see them.

Both work, and the right answer depends on what the header already holds. If you are unsure how your header is put together, our guide to headers, footers and menus shows how to find out.

The footer is the usual home. Visitors who scroll to the bottom are often looking for ways to follow or contact you, and there is room. Our guide on changing your WordPress footer covers the rest of what belongs there.

The header is worth it when social media is genuinely how customers find you, such as a restaurant, salon or event business that lives on Instagram. Keep the icons small and to one side, and make sure they do not crowd the menu or the phone number. In a block theme, place the Social Icons block inside the same Row as the Navigation block in the header template part.

On phones, header space is tight. Check how the header looks on a real phone after adding icons. If they push the menu button onto a second line, keep them in the footer only, or put them inside the mobile menu if your theme allows it.

Theme and page builder social options

Before adding a block, check whether your theme already has a place for social links. Many do.

  • Header and footer builders. Themes such as Astra and Kadence include a social element you can drag into a header or footer row in the Customizer, with fields for each profile.
  • A social menu location. Some classic themes have a menu location meant for social links. You create a menu of custom links to your profiles under Appearance → Menus, assign it to that location, and the theme swaps each link for the matching icon.
  • Page builders. Elementor has a Social Icons widget for its header and footer templates.

Use one method, not several. If the theme’s own social element and a Social Icons block both appear in the footer, visitors see two rows of icons and you have two places to update when an address changes.

The Social Icons block has an Open links in new tab setting, off by default. Many businesses turn it on so visitors who wander over to Instagram still have your site open in the original tab. Others leave it off, because unexpected new tabs can confuse some people, particularly on phones and for screen reader users.

Either choice is reasonable. If you turn it on, WordPress adds the attributes that stop the new tab from interacting with your page and tells search engines not to treat the link as an endorsement. You do not need to add anything yourself.

WhatsApp and email icons

The Social Icons block includes WhatsApp and Mail icons, which are often more useful than any social network.

  • Mail: type your email address as the link. WordPress turns it into a mail link automatically.
  • WhatsApp: use WhatsApp’s click-to-chat address, https://wa.me/ followed by your full number in international format, with no plus sign, spaces or dashes.

If WhatsApp is a main way customers reach you, a single clear button often works better than a small icon in a row. We compare the options in our post on click-to-call and WhatsApp buttons.

Keep the icons honest

Social icons break quietly. A handle gets renamed, a page is merged, an account is closed, and the icon now leads to an error page. Add the icons to a simple check you do every few months: click each one from the live site, logged out of the social networks. It slots easily into the routine checks our WordPress help guide suggests for the rest of the site.

Icons only link out. If you want your latest posts to appear on the site itself, that is a different job, covered in our guide to adding an Instagram feed to WordPress.

Frequently asked questions

What is the difference between social icons and social sharing buttons?

Social icons link to your own profiles, so visitors can follow you. Sharing buttons let a visitor post the page they are reading to their own account. They look similar but do different jobs. The Social Icons block only does the first; sharing buttons come from a plugin or a theme feature.

The icons come with WordPress, so updated artwork normally arrives with a WordPress update and you do not need to do anything. When a network is renamed, a new icon may be added alongside the old one, as happened when X joined the existing Twitter icon. In that case, switch the icon yourself.

Can I use my own icon for a network that is not listed?

The block’s list is fixed, though it includes a generic link icon for anything else. For a custom icon, use a small Image block linked to the profile, or a theme or plugin that supports custom icons. Give any image icon alt text naming the network so screen reader users know where it goes.

Can I add an icon for my Google Business Profile?

Yes. The block includes a Google icon, and you can point it at your profile’s share link, which Google Maps and Google Search let you copy. Some owners prefer a plain text link such as Read our Google reviews, because a bare G icon does not tell visitors they will find reviews behind it.

On most sites, tidy and working social icons are a one-sitting job. If yours keep appearing twice, refuse to change colour or vanish on phones, ask our WordPress support team to look; often the theme and the block are both trying to style the same icons.

Next in this series: How to Add a Phone Number to Your WordPress Header

Is Your Website Working Properly?

Get a free website health check from WebMaintor. We'll review your website's speed, security, forms, and technical health — and tell you exactly what needs attention.

No obligation. No automated reports. A real review by our team.