[BUG] SVG Icons are not displayed when using @progress/kendo-svg-icons v5.4.0 with Kendo Theme Default 14.x

[Stepron-Suraj-Singh]

[BUG] SVG Icons are not displayed when using @progress/kendo-svg-icons v5.4.0 with Kendo Theme Default 14.x

Bug Description

When using @progress/kendo-svg-icons version 5.4.0 together with older versions of @progress/kendo-theme-default (14.0.0–14.3.0), SVG icons are not rendered at all.

The issue appears to be caused by an incompatibility between the SVG icon package and the older 14.x theme versions.

Steps to Reproduce

1. Create a project using Kendo UI for React.

2. Install:

   • @progress/kendo-svg-icons@5.4.0

3. Reference an older Kendo Default Theme (14.0.0–14.3.0) via CDN. For example:

<link href="https://www.unpkg.com/@progress/kendo-theme-default@14.0.0/dist/default-main.css" rel="stylesheet" />

4. Use any Kendo SVG icon in the application.

5. Run the application.

Expected Behavior

The SVG icons should render correctly regardless of the theme version, or a compatibility warning should clearly indicate that the package versions are incompatible.

Actual Behavior

No SVG icons are rendered. The icon placeholders remain empty, and the SVGs are not visible.

Environment Information

Affected Theme(s)

• All themes

Affected Component(s)

SVG Icons (@progress/kendo-svg-icons)

Affected Suites

• Kendo UI for React

Browser Information

• All browsers

Reproduction Case

Sample Code

import { SVGIcon } from "@progress/kendo-react-common";
import { gearIcon } from "@progress/kendo-svg-icons";
<SVGIcon icon={gearIcon} />;

Workaround

Upgrading the Kendo Default Theme CDN to a newer version resolves the issue.

However, this is not always possible for projects that intentionally remain on the 14.x theme versions.

Additional Context

The issue is reproducible when using the following theme versions via CDN:

@progress/kendo-svg-icons	Theme CDN Version	Result
5.4.0	14.0.0	❌ Icons not visible
5.4.0	14.1.0	❌ Icons not visible
5.4.0	14.2.0	❌ Icons not visible
5.4.0	14.3.0	❌ Icons not visible

For example, changing the CDN from:

<link href="https://www.unpkg.com/@progress/kendo-theme-default@14.0.0/dist/default-main.css" rel="stylesheet" />

to a newer version such as:

<link href="https://www.unpkg.com/@progress/kendo-theme-default@14.4.0/dist/default-main.css" rel="stylesheet" />

makes the SVG icons render correctly.

It would be helpful to know:

1. Whether this version combination is officially unsupported.

2. If so, whether the package should declare a compatibility restriction.

3. If not, whether this is a regression introduced in @progress/kendo-svg-icons v5.4.0.

Thank you!

[epetrow]

Hi @Stepron-Suraj-Singh, thanks for the detailed report!

What's causing this

@progress/kendo-svg-icons v5.4.0 introduced a redesign of the outline and duotone icons, switching them to a stroke-based drawing style (instead of solid fills) so they support new customization options like runtime color, size, rotation, and stroke width.

This new style needs matching CSS support from the theme package to render correctly. That support was added starting in @progress/kendo-theme-default (and other Kendo themes) v14.4.0. Versions 14.0.0–14.3.0 predate this update, so they don't know how to style the new icon markup — which is why the icons appear blank when paired with kendo-svg-icons@5.4.0.

Is this supported?

No — kendo-svg-icons v5.4.0+ and the theme packages need to be upgraded together. Pairing v5.4.0 icons with a theme older than 14.4.0 isn't a supported combination.

What you can do

You have two options, depending on what fits your project best:

1. Upgrade your theme to @progress/kendo-theme-default (or your theme of choice) v14.4.0 or later. This is the recommended path going forward, since it gets you the new icon customization features too.
2. Downgrade the icons package and pin @progress/kendo-svg-icons to v5.3.0, which is the last release compatible with theme versions 14.0.0–14.3.0.

We'll also look into whether we can add a clearer safeguard (e.g. a peer dependency range or console warning) so this kind of version mismatch is easier to catch early. Thanks again for flagging it!

[Fotiman]

This was an incompatible change in the kendo-svg-icons package, so it really should have been a new major version instead of a minor version update. Please keep semver in mind when releasing updated versions of these packages.