New to KendoReactLearn about KendoReact Free.

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 children 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.

Change Theme
Theme
Loading ...

Built-in SVG Icons customization

Using the IconsContext.Provider you can also customize the SVG icons which are already embedded into the components. In the example below you can see how to replace the arrow icon of the SplitButton component with:

  • an icon from the @progress/kendo-svg-icons package
  • a custom SVG object
  • a FontAwesome icon
Change Theme
Theme
Loading ...
In this article
Built-in SVG Icons customizationSuggested Links
Not finding the help you need?
Contact Support