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

SVG Icons

As of the R3 2020, Kendo UI delivers more than 500 Scalable Vector Graphics (SVG) icons.

Currently, you can use the predefined set of SVG icons with the Kendo UI for Angular SVG Icon component only.

What Are SVG Icons

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

Why Use SVG Icons

If you need to display vector graphics within a webpage, you can use font icons and SVG icons.

SVG icons are best suited to be used in terms of:

  • Rendering and scalabilityThey 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.
  • FlexibilityYou can control individual parts of an SVG icon with CSS (font-size, color, animation). Also, you can use available SVG-specific CSS filters and stroke properties. Multi-color SVG icons are supported.
  • AccessibilityUsing semantic elements and attributes, such as <title>, <desc>, aria-labelledby, and so on, makes them accessible to screen readers, search engines, and other devices.

Basic Usage

To use the Kendo UI SVG icons, refer to the Kendo UI for Angular SVG Icon component.

List of SVG Icons

For the full list of the available predefined Kendo UI SVG icons, refer to this section.