BugWP logo BugWP
Back to Community
Home / Community / Core → Everything else wordpress

How to Fix Broken or Missing Social Media Icons in WordPress

25 threads Sep 17, 2025 Core → Everything else wordpress

Content

Missing or broken social media icons are a common frustration for WordPress users. Whether you're trying to add a platform not included by default, like Nextdoor or Alignable, or your custom icons aren't displaying correctly, this guide will walk you through the most effective troubleshooting steps and solutions.

Why This Happens

Social icon issues typically stem from a few key areas:

  • Theme or Plugin Limitations: Your theme's built-in social links menu or a specific plugin may only support a predefined set of popular platforms.
  • Incorrect Implementation: Manually adding icon code can lead to broken images if the file path is wrong or the code is placed in the wrong part of your theme.
  • Cache or CDN Issues: Sometimes, a recently added or changed icon may not appear immediately due to your site or browser caching the old version.

Common Solutions

1. Use the Built-in Social Icons Block

The block editor includes a dedicated Social Icons block. To use it:

  1. Edit a page or post.
  2. Add a new block and search for "Social Icons."
  3. Add your social profile URLs. WordPress will automatically display the corresponding official icon for many major platforms.

Limitation: This block does not allow for custom icon uploads. If your platform isn't in the predefined list, the block will show a generic placeholder icon (-).

2. Add Custom Icons as Images

For full control, you can add any social icon as an image:

  1. Create or download the icon you want to use in a web-friendly format (e.g., SVG, PNG).
  2. In the block editor, add an Image block.
  3. Upload your custom icon.
  4. Link the image to your social media profile URL.
  5. Repeat and arrange multiple Image blocks in a Row or Group block to create a cohesive set of icons.

3. Check Your Theme's Social Menu

Many themes, like Twenty Seventeen, include a dedicated social link menu location.

  1. Navigate to Appearance > Menus in your WordPress dashboard.
  2. Create a new menu or edit an existing one.
  3. Add your social media links using the "Custom Links" section.
  4. Look for a checkbox labeled something like "Social Links Menu" at the bottom of the menu settings and enable it.
  5. Save the menu. Your theme should now display these links with appropriate icons.

4. Troubleshoot Broken Custom Code

If you've hand-coded your icons and they appear broken:

  • Verify Image Paths: Ensure the src attribute in your <img> tag points to the correct location of your uploaded image file. Using the full URL from the Media Library is often the most reliable method.
  • Use a Code Block: When adding HTML to the block editor, always use the dedicated "Custom HTML" or "Code" block. Pasting code into a standard paragraph block can cause it to break.
  • Clear Your Cache: Clear any caching plugins you have installed and your browser cache to see if the icon appears.

When to Seek Further Help

Since icon display is heavily dependent on your specific theme, you may need to consult your theme's documentation or support forum for precise instructions. If you are using a dedicated plugin for social icons, its support forum is the best place to ask questions about adding custom networks.

By methodically working through these options, you should be able to successfully add and display any social media icon on your WordPress site.

Related Support Threads Support