New to Kendo UI for Angular? Start a free 30-day trial

Icons

Updated on May 21, 2026

Kendo UI for Angular provides a large set of built-in icons. There are two ways to consume and render them—either as Font icons or as SVG icons.

In general, font icons produce a smaller HTML footprint and the glyph can be overridden with CSS. On the other hand, SVG icons provide better accessibility and can use multiple colors in a single icon.

Read more about the definition and advantages of using the font icons and SVG icons.

Kendo UI Icons version ^5.x.x requires Kendo UI for Angular v24.0.0 or later.

Icon Package Compatibility

Starting with v24.0.0, Kendo UI for Angular supports both version ^4.x.x and version ^5.x.x of the @progress/kendo-font-icons and @progress/kendo-svg-icons packages.

Version 5.0.0 of the icon packages introduces breaking changes. The icon set is streamlined and updated with new icons and variants, and the default icon variant is changed to outline. The update also includes icon removals and renames, and font icon aliases are removed and no longer supported.

What is affected:

Removed icons with replacements (renamed or consolidated icons in v5).
Icons removed without replacement.
Deprecated font icon aliases (old alias names no longer resolve).

Review the complete list of deprecations, replacements, and other breaking changes in the Iconography changelog v5.0.0.

Using SVG Icons

Starting with version 13.0.0, introduced in the R2 2023 (June 2023) release, the default icon type in the Kendo UI for Angular components changes from font to svg.

You can render an SVG icon by using the Kendo UI for Angular SVGIcon component. This approach provides a simple way to display SVG icons by specifying the icon name through the icon property of the component.

For example, to display the paperClip SVG icon:

html
<kendo-svgicon [icon]="paperClip"></kendo-svgicon>
ts
import { paperclipIcon } from '@progress/kendo-svg-icons';
export class AppComponent {
    public paperClip = paperclipIcon;
}

For the full list of the available predefined Kendo UI SVG icons, refer to Progress Design System Iconography.

You can also display your own SVG icon by:

Passing a custom SVGIcon object to the icon property of the kendo-svgicon component. For more information, refer to the Adding a Custom SVG Icon article.
Using a CSS solution. For more information, refer to the Override SVG Icons Knowledge Base article.

Using Font Icons

Starting with v14.0.0, introduced in the R3 2023 (October 2023) release, the font icons are no longer delivered with the Kendo UI themes.

You can display font icons in your application in three different ways:

Icon Component

Render font icons using the Kendo UI for Angular Icon component with a simple name property.

Precompiled CSS

Display font icons by loading the precompiled CSS file.

Unicode Characters

Apply custom CSS class names to font icons with Unicode characters for more styling control.

Angular Icon Component

You can render font icons by using the Kendo UI for Angular Icon component.

This approach provides a simple way to display font icons by specifying the icon name through the name property of the component. For example, to display the calendar font icon:

html

<kendo-icon name="calendar"></kendo-icon>

For the full list of the available predefined Kendo UI font icons, refer to Progress Design System Iconography.

Loading Icons through Precompiled CSS

To use the font icons through precompiled CSS:

Install the @progress/kendo-font-icons package in your project:
bash
```
npm install --save @progress/kendo-font-icons
```

Load the font icons CSS in your application. Choose one of the following approaches based on your project setup:

Import in the angular.json file:

json

"styles": [
    ...
    {
        "input": "node_modules/@progress/kendo-font-icons/dist/index.css"
    }
]

Import in the styles.scss file:

scss

@use '@progress/kendo-font-icons/dist/index.css' as *;

Finally, display the font icon in your template by adding a <span> element with the required CSS classes. Assign the k-icon k-font-icon CSS classes followed by a predefined class name of the icon.
html
```
<span class="k-icon k-font-icon k-i-calendar"></span>
```

The list of font icon class names can be found at the Progress Design System Iconography page. Click an icon to reveal its CSS class aliases.

Rendering Font Icons with Unicode Characters

To have more control over the icon styling or naming, you can apply custom CSS class names to the font icons. This approach also allows you to use alternative font icon libraries (such as Font Awesome or Material) instead of the built-in Kendo icons. For more information, refer to the Override Font Icons Knowledge Base article.

To display a Kendo icon with a custom class:

Find the Unicode character of your desired icon in the list of font icons on the Progress Design System Kit website. Click the icon to reveal its Unicode representation of the font icon glyph. For example, \e11e corresponds to the plus icon.

Add the HTML element with your custom class:

html

<span class="k-icon k-font-icon custom-class"></span>

Use the custom CSS class to define the desired Unicode character for the icon:

css

.custom-class:before {
    content: "\e13a"; /* Unicode for the specific icon */
}

When you define styles in the component @Component metadata, escape the Unicode character with a double backslash:

@Component({
    selector: 'my-app',
    styles: [`
        .k-icon.k-font-icon.custom-class:before {
            content: "\\e13a"; /* Double backslash required in component styles */
        }
    `],
})
class AppComponent { }

Icons List

The Progress Design System website provides a list of all built-in icons in Kendo UI for Angular.

Each icon box in the list is clickable and reveals the following details:

CSS class aliases, if such exist.
Unicode representation of the font icon glyph. For example, \e11e corresponds to the plus icon.
Ability to copy the glyph symbol of the font icon.
Ability to copy the HTML markup (<svg> tag) of the SVG icon.

The icon list may contain icons which are not available in older versions of Kendo UI for Angular or even in the latest one. Such icons will be added in the next product version.

Visual Adjustments

Read the Iconography - Visual Adjustments for Icons page on the Progress Design System Kit website for more information on how to customize the look of the Kendo UI font and SVG icons by using: