BugWP logo BugWP
Back to Community
Home / Community / Plugin → Gutenberg blocks with ai by kadence wp – page builder features

Troubleshooting Common Icon Display Issues in Kadence Blocks

19 threads Sep 7, 2025 Plugin → Gutenberg blocks with ai by kadence wp – page builder features

Content

Icons are a fundamental part of modern web design, and the 'Gutenberg Blocks with AI by Kadence WP' plugin provides a robust set of icon options. However, users occasionally encounter issues where icons don't display correctly, appear off-center, or cause other unexpected behavior. This guide will help you diagnose and resolve the most common icon-related problems.

Common Icon Issues and Their Solutions

1. Icons Appear Off-Center or Decentralized

The Problem: Specific icons, particularly the WhatsApp and Facebook social icons, may not be perfectly centered within their container, especially when placed inside a circular background.

The Cause: This is a known issue with the SVG path data for a small number of icons in the library, causing them to render off-center.

The Solution: While waiting for a permanent fix in a plugin update, you can use custom CSS to nudge the icon into place. Add the following code to your theme's Customizer under Additional CSS:

.kt-svg-icon-fa_whatsapp svg {
    transform: translateX(0.3em);
}
.kt-svg-icon-fa_facebook svg {
    /* Adjust the value as needed */
    transform: translateX(0.2em);
}

2. Icons Not Visible on the Frontend

The Problem: Icons look fine in the Gutenberg editor but disappear or appear as a solid color on the live website.

The Cause: This is often a CSS conflict with your WordPress theme. Many themes apply a global CSS rule like fill: currentColor; to all SVG elements, which can override the specific styles applied by Kadence Blocks.

The Solution: Add more specific CSS to your theme's Customizer to override the theme's style and ensure the icons display properly:

.kt-svg-icon svg {
    fill: none;
}

Note: Test this carefully, as it may affect other SVGs on your site. You may need to make the CSS selector even more specific (e.g., .wp-block-kadence-icon .kt-svg-icon svg) to target only Kadence icons.

3. Editor Crashes or Shows "Invalid JSON" Error with Icon Lists

The Problem: Adding an Icon List block causes the editor to crash, prevent saving, or show an "Updating failed. The response is not a valid JSON response" error.

The Cause: This can be caused by a conflict with other plugins, outdated Gutenberg code, or a server configuration issue (often related to SSL/HTTPS).

The Solution:

  • Update Everything: Ensure WordPress, your theme, and all plugins (especially Kadence Blocks and the Gutenberg plugin if installed) are updated to their latest versions. Many editor compatibility issues are resolved in updates.
  • Check for Mixed Content: If your site uses HTTPS, ensure all resources are loaded securely. A common culprit is an icon or other asset being called via http:// instead of https://.
  • Conflict Test: Temporarily deactivate other plugins to see if the issue resolves. If it does, reactivate them one by one to find the culprit.

4. Custom Icons and Uploading Your Own

The Limitation: The free version of Kadence Blocks does not include a built-in interface for uploading and using custom SVG icons in blocks like the Icon List or Info Box.

The Workarounds:

  • For a limited number of custom icons, you can use an SVG-inline code block or an image block alongside your list.
  • You can convert a PNG or JPG image to an SVG format using online tools like Convertio.co and then use the SVG inline code block to insert it.
  • The Kadence Blocks Pro add-on provides a dedicated Custom Icons feature, allowing you to upload and manage your own icon sets for use in any icon-related block.

General Troubleshooting Steps

If you encounter an issue not listed above, try these steps:

  1. Browser Console: Right-click on your page, select Inspect, and then click on the Console tab. Any JavaScript errors shown here can provide crucial clues. You can search for these error messages online or report them when seeking help.
  2. Cache: Clear your browser cache and any caching plugins or server-level cache you may be using.
  3. Browser Extensions: Temporarily disable browser extensions like AdBlock to see if they are interfering with the editor's interface.

By following this guide, you should be able to resolve the majority of icon display issues. The Kadence WP team is generally active in addressing known bugs, so keeping your plugin updated is the best way to ensure access to the latest fixes.

Related Support Threads Support