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

Icons

Updated on Jan 22, 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.

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 or CDN

Display font icons by loading the precompiled CSS file or through a CDN link.

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 or a CDN

You can display font icons by loading the precompiled CSS file or by using a CDN.

CDN Precompiled CSS

To use the font icons through a CDN, add a <link> tag to the <head> section of your index.html file:

html

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.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: