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 KendoReact 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 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—You 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.
  • Accessibility—Using 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 KendoReact Svg Icon component.

List of SVG Icons

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