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

Custom SVG Icons

The SvgIcon component allows you to display custom SVG icons (not available in the KendoReact default icons set). You could provide the inner SVG elements as icons to the SvgIcon. SVG element has default viewBox set to 0 0 24 24. This can be customized with the viewBox property.

Custom SVG icons also allow setting all predefined appearance options such as different sizes, theme colors and flipping.

View Source
Change Theme:

Built-in SVG Icons customization

You can also customize the SVG icons which are already embedded into the components by replacing the values of the desired icons in the returned kendoIcons collection.

  kendoIcons: {
    type: 'svg',
    icons: {
      bold: customBold,
      'caret-alt-down': starIcon,

In the example below you can see how to replace:

  • the arrow icons of the DropDownList components with an icon taken from the @progress/kendo-svg-icons package and
  • the Bold icon of the Editor's toolbar with a custom SVG object.
View Source
Change Theme:

In this article

Not finding the help you need?