SVG Icons in the Telerik and Kendo UI Design System

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.

Variants

The Telerik and Kendo UI SVG icon set provides three style variants: Outline (default), Solid, and Duotone. Each variant applies a different visual treatment to the same icon geometry:

Outline—Renders stroke-based paths with a lighter visual weight. This is the default variant and the primary standard for resting states.
Solid—Renders filled shapes with a heavier visual weight. Use this variant to indicate active or selected states.
Duotone—Combines a stroked foreground layer with a semi-transparent filled background layer to add subtle depth.

To browse the available icons and switch between their variants, see the List of Icons. For guidelines on how each variant is constructed, see the Design Guidelines.

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

Runtime Customization

The SVG icons expose their size, color, rotation, and stroke width as CSS custom properties (variables). This enables you to override the defaults at runtime, without recompiling the theme.

:root {
  --kendo-icon-size: 16px;
  --kendo-icon-color: currentColor;
  --kendo-icon-rotation: 0deg;
  --kendo-icon-stroke-width: 1.5;
}

CSS Variable	Description
`--kendo-icon-size`	Sets the base width and height of an icon.
`--kendo-icon-size-{size}`	Overrides a specific predefined size, for example, `--kendo-icon-size-lg`.
`--kendo-icon-color`	Sets the fill and stroke color of an icon.
`--kendo-icon-rotation`	Sets the rotation angle that is applied to an icon.
`--kendo-icon-stroke-width`	Sets the stroke width of the Outline and Duotone variants.

To customize a single icon instance, set the CSS custom properties directly on its wrapping element:

.my-icon {
  --kendo-icon-color: #ff6358;
  --kendo-icon-stroke-width: 2;
}

The --kendo-icon-stroke-width custom property applies only to icons that use the k-svg-icon-outline or k-svg-icon-duotone CSS class because these variants rely on stroked paths.