Back to Community
Home / Community / Theme → Twenty twenty-two

How to Add Custom Icons and Modify Existing Ones in the Twenty Twenty-Two Theme

16 threads Sep 16, 2025 Theme → Twenty twenty-two

Content

Many users of the Twenty Twenty-Two theme want to customize their site's icons, whether it's adding a missing social media platform like WhatsApp or Untappd, changing the mobile menu's hamburger icon, or integrating a WooCommerce cart. A common thread across the support forums is the search for ways to extend the theme's built-in iconography without relying on plugins.

Why This Happens

The Twenty Twenty-Two theme is a block-based theme that uses the WordPress Site Editor. Its set of social icons is predefined, and features like the WooCommerce cart icon are not natively included in the theme's header patterns. The mobile navigation icon is also hardcoded into the navigation block's design. This design philosophy prioritizes core stability and performance but can limit customization options that require specific, non-standard icons.

Common Solutions for Custom Icons

1. Adding a New Social Media Icon

If the social icon you need (e.g., Untappd, WhatsApp) is not in the block's list, you can use the generic "Link" icon and then style it with a custom image.

  1. Add a Social Icons block and select the "Link" option.
  2. Enter the URL for your social profile.
  3. Upload your custom icon image to your site's Media Library.
  4. Use custom CSS to replace the default gray circle with your image. You will need to target the specific link using its URL and use the background-image property. Providing a link to your site is often necessary for others to help craft the precise CSS.

2. Changing the Mobile Hamburger Icon

The two-line mobile menu icon is part of the navigation block's structure. To change it to a three-line icon or another symbol, CSS is the most common solution. This typically involves hiding the default icon and using the ::before or ::after pseudo-elements to generate a new one. The exact CSS required can vary, so searching for community-shared snippets is a good approach.

3. Adding a WooCommerce Cart Icon

Integrating a cart icon from WooCommerce directly into the menu is a functionality provided by the WooCommerce plugin itself, not the theme. For a code-based solution, it is recommended to seek help from the WooCommerce support community, as they can provide guidance tailored to the plugin's current codebase.

4. Using Font Awesome Icons

While plugins can load the Font Awesome library, they may not create a dedicated block in the Site Editor. A common workaround is to use an HTML block and insert the icon using its appropriate HTML class (e.g., <i class="fas fa-icon-name"></i>). Note that this method may not be available in all blocks within the full site editor.

Important Considerations

  • Custom CSS: Adding CSS is a powerful way to modify appearance. You can add it through the Customizer (www.yoursite.com/wp-admin/customize.php) under "Additional CSS."
  • Child Theme: For more extensive changes, especially to theme files, using a child theme is highly recommended to preserve your modifications after theme updates.
  • Community Help: For complex customizations, providing a link to your site allows others to inspect the code and offer more precise solutions.

The need for custom icons is a frequent topic among Twenty Twenty-Two users. While the theme doesn't include every possible icon by default, the flexibility of WordPress and CSS often provides a path to a solution.

Related Support Threads Support