Migrating Font Icons to SVG Icons

With the R2 2023 release, the default icon type in the KendoReact components and Kendo UI themes is changed from font to svg. This change marks the next milestone in a series of improvements related to Content Security Policy (CSP).

In this article, you will find more details about how to:

For more information on using SVG and font icons, visit their dedicated articles:

With the R3 2023 release, the fonts will no longer be delivered with the KendoReact and Kendo UI themes.

Switching to SVG Icons

Migration from font to SVG icon type requires some changes when:

Replacing Standalone Kendo Font Icons

In case you have a standalone icon that uses an HTML element with a dedicated CSS icon class selector or Icon component like:

<span class="k-icon k-i-camera"></span>
<Icon name="camera"></Icon>

In R2 2023 release and later versions, use the SvgIcon component instead.

import { SvgIcon } from '@progress/kendo-react-common';
import * as svgIcons from '@progress/kendo-svg-icons';

const App = () => {
  const allIcons = svgIcons;
  return <SvgIcon icon={allIcons.cameraIcon} />;

Customizing Standalone Kendo Font Icons

The following example demonstrates a standalone font icon with a CSS rule that customizes the color of the font icon prior R2 2023 release:

<span class="k-icon k-i-camera"></span>
.k-icon.k-i-camera {
    color: red;

To customize an SVG icon in R2 2023 and later versions, use .k-svg-icon CSS selector and the respective SVG icon selector.

<SvgIcon icon={allIcons.cameraIcon} />
.k-svg-icon.k-svg-i-camera {
    color: red;

Continue Using Font Icons

To continue using Kendo font icons as the default icon type, use the KendoReact IconsContext provider and set the icon type to font.

import { IconsContext } from '@progress/kendo-react-common';

const App = () => {
  return (
    <IconsContext.Provider value={{ type: 'font' }}>
      {/* Your app code goes here */}