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

SVG Icons (Scalable Vector Graphics)

As of the R3 2020, Kendo UI delivers more than 500 SVG icons.

Currently the predefined set of SVG icons can be used with the Kendo UI for Angular SVG Icon component only.

What Are SVG Icons

SVG icons are vector images defined in XML format. They are basically blocks of XML tags and allow vector graphics to be displayed into a webpage

Why Use SVG Icons

If vector graphics should be displayed within a webpage, there are some options - two of those options are font icons and SVG icons.

The main benefits of using SVG icons are in terms of:

  • Rendering / Scalability - they 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 - individual parts of an SVG icon can be controlled via CSS (font-size, color, animation). There are also SVG-specific CSS filters and stroke properties. Multi-color SVG icons are supported.
  • Accessibility - using semantic elements and attributes (such as <title>, <desc>, aria-labelledby etc.) makes them accessible to screen readers, search engines and other devices.

Basic Usage

To use the Kendo UI SVG icons, please check the Kendo UI for Angular SVG Icon component.

List of SVG Icons

All predefined Kendo UI SVG icons can be found in this list.