How to Add Custom Icons to Menus and Social Links in Gutenberg

Many WordPress users building sites with Full Site Editing (FSE) want to enhance their navigation menus and social links with custom icons, such as from Font Awesome, or add support for platforms like Bluesky or Weibo. This is a common request that can be tricky to implement directly within the block editor. This guide explains the limitations and provides the most common, effective solutions.

Why You Can't Directly Add Icons in Some Areas

The core Gutenberg block editor, by default, does not natively support uploading custom SVG files for logos or social icons due to WordPress's security policies regarding SVGs. Furthermore, the Social Icons block comes with a predefined set of platforms. Adding HTML or shortcodes for icons (e.g., <i class="fa-brands fa-vk"></i>) directly into a Navigation or Social Links block often does not work because these blocks are not designed to render raw HTML code in that manner. The display and functionality of these blocks are also heavily influenced by your active theme.

Common Solutions for Adding Icons

1. For Social Media Icons (Adding New Platforms)

The built-in Social Icons block does not currently allow for uploading custom icons or natively support every international platform. Community feedback suggests two primary approaches:

• Use a Dedicated Plugin: The most straightforward solution is to use a third-party plugin designed for this purpose. Plugins like SVG Support can enable SVG uploads across your site, while others like The Icon Block provide a block specifically for adding custom icons with links.
• Provide Feedback on GitHub: You can raise a feature request for new icons on the Gutenberg project's GitHub repository. This helps the Gutenberg development team understand demand for specific platforms.

2. For Navigation Menu Icons

If you have successfully added an icon to a menu item but find it is duplicated in the sub-menu, this is a common styling issue. As seen in community threads, a small snippet of CSS can often resolve this. You can add the following CSS to your theme's "Additional CSS" section (Appearance > Customize > Additional CSS) or in a custom CSS plugin:

.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container:before {
    display: none;
}

This CSS targets and hides a specific pseudo-element that may be causing the icon to repeat in the sub-menu dropdown.

Important Considerations

• Theme Compatibility: The success of these methods can depend on your theme. Some themes may have styles that conflict with custom icons.
• Plugin Solutions: Using a well-maintained plugin is often the most reliable and code-free method for the average user to add this functionality.
• Child Theme: If adding custom code, always use a child theme to prevent your changes from being overwritten during theme updates.

While the core editor may not support every icon implementation natively, the flexibility of WordPress and its plugin ecosystem provides several viable paths to achieve the desired design for your menus and social links.