Iconography

Font Icons Overview

Font icons are icons that are distributed through icon fonts. An icon font is a font that consists entirely of symbol and icon glyphs instead of letter and number glyphs.

All properties, usage guidelines, and behavior specifics that apply to regular text fonts are also applicable to the icon fonts. You can modify their font size, font color, and other properties in the same manner as you do with every other text font.

Advantages

The utilization of icon fonts in a user interface (UI) naturally succeeds the outdated icon sprite technique and provides significant benefits, such as:

• Improved scalability—While icon sprites are bitmap raster images and do not scale well, icon fonts use vector graphics, look perfect on retina displays, and make scaling as easy as setting the font-size configuration option.
• Improved design capabilities—You can easily apply CSS effects on the fly by setting the text color, shadow, or other options for the different interaction states, for example, for the on :hover state.
• Improved browser support—Font icons are browser-agnostic and are supported by all modern browsers.
• Reduced number of HTTP requests—To load an icon font, you need a maximum of a few HTTP requests.
• Reduced file size—A 100KB file contains approximately 500 vector icons.
• Simple application in responsive designs—Changing the size scale for the different viewport sizes is much easier than creating or resizing multiple images.
• Simple monochromatic designs—The icon fonts have a modern and simple look and feel.
• Smaller HTML footprint, compared to SVG icons.

Disadvantages

When using icon fonts, consider the following disadvantages:

• Color limitations—Each font icon can have only one color.

  An exception are the duotone font icons that support two colors. They follow slightly different creation and integration processes.

• Anti-aliasing—Font icons are created for a specific base grid, for example, 16x16, 18x18, 24x24, and so on. They look best in their base size or in multiplied sizes of the base size. If the size differs from the base size, the quality of the icon is affected by anti-aliasing, which makes the shapes look blurry on monitors with lower pixel density.

• Accessibility—Font icons don't work for users who override fonts in their browser settings. A notable group of such users are the ones with dyslexia.

• Positioning challenges—To insert a font icon into the code, you use pseudo-elements, which makes the positioning challenging.

• Animation limitations—You can use only standard transformations, colors, and sizes.

• Maintenance complexity—To convert all icons in your icon set to font icons, you need to add an extra step that you perform in an additional extra tool. This makes adding, removing, or editing multiple icons in your icon set more time-consuming.

Usage

The Telerik and Kendo UI font icons are available as an NPM package. To use them, install the NPM package, reference the icons in your project, and then add them by using the corresponding tags.

1. Install the Telerik and Kendo UI font icons.

   npm install --save @progress/kendo-font-icons

2. To incorporate the installed Telerik and Kendo UI font icons into your project, choose one of the following approaches:

   • Use the precompiled CSS.

     node_modules/@progress/kendo-font-icons/dist/index.css

   • Import the SCSS file with the font icons into your project. Depending on the tooling that you use, you can import the SCSS in two ways:

     • If you use tooling that supports binary file resolution (such as Next.js), import the font icons all.scss.

     @use '@progress/kendo-font-icons/scss/all.scss' as *;

     • If your tooling doesn't support binary file resolution, first provide the path to the TTF icon fonts file, and then import the SCSS file.

     @use '@progress/kendo-font-icons/scss/all.scss' as * with (
        $ki-font-file-url: '@progress/kendo-font-icons/dist/kendo-font-icons.ttf'
     );

     • If the aforementioned scenarios do not apply to your use case, download the kendo-font-icons.ttf file and distribute it as a static asset.

       // Example path to kendo-font-icons.ttf relative to deployment
       @use '@progress/kendo-font-icons/scss/all.scss' as * with (
          $ki-font-file-url: '/kendo-font-icons.ttf'
       );

3. Add the font icons to a document.

   <span class="k-icon k-font-icon k-i-star"></span>
   <span class="k-icon k-font-icon k-i-bell"></span>

Alternatively, instead of installing the NPM package, you can use a link extracted from unpkg, for example:

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />

To browse all available Telerik and Kendo UI font icons, see the List of Icons.

Download

To download the Telerik and Kendo UI Font Icons, click the button below.

Framework-Specific Documentation

For specific information about the font icons in the context of the Telerik and Kendo UI libraries, refer to the official product documentation:

Kendo UI for Angular libraryFind more information about using the Telerik and Kendo UI Font Icons in Angular projects.

Telerik UI for Blazor libraryFind more information about using the Telerik and Kendo UI Font Icons in Blazor projects.

Kendo UI for jQuery libraryFind more information about using the Telerik and Kendo UI Font Icons in jQuery projects.

KendoReact libraryFind more information about using the Telerik and Kendo UI Font Icons in React projects.

Kendo UI for Vue libraryFind more information about using the Telerik and Kendo UI Font Icons in Vue projects.

Telerik UI for ASP.NET Core libraryFind more information about using the Telerik and Kendo UI Font Icons in ASP.NET Core projects.

Telerik UI for ASP.NET MVC libraryFind more information about using the Telerik and Kendo UI Font Icons in ASP.NET MVC projects.