Iconography

Clearly and effortlessly communicate your message and visually enhance your app with the simple, yet effective icon graphics.

SVG Icons Overview

SVG icons are vector images defined in XML format. Because they are blocks of XML tags, they allow a webpage to display vector graphics. Their major advantage is that you can scale them to any size without any quality degradation.

Advantages

When it comes to displaying vector graphics on a webpage, you have several options. Two of them are font icons and SVG icons.

The main benefits of using SVG icons are:

  • Rendering and Scalability—SVG icons are treated by the browsers as images, so anti-aliasing issues are avoided. This ensures that SVG icons are sharp at all resolutions, without losing quality.

  • Flexibility:

    • You can control the individual parts of an SVG icon through CSS (font size, color, animation).
    • You can apply SVG-specific CSS filters and stroke properties.
    • You can create SVG icons that include multiple colors.
  • Accessibility—Using semantic elements and attributes, such as title, desc, and aria-labelledby makes them accessible to screen readers, search engines, and other devices.

Usage

The Telerik and Kendo UI SVG icons are available as an NPM package that contains the definitions and metadata of the icons.

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

Download

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

Download.svg

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:

Feedback