TreeView Icons

Premium

Updated on Dec 19, 2025

The TreeView provides the option to add an icon for each node in the component. To render an icon you need to:

• Set a value for the iconField property.
• Once the iconField is set, use its value as a property in the definition of each node for which you want to display an icon.

If the value of the iconField is set to myIcon the data passed to the TreeView should look similar to the following; each node definition has a myIcon property that receives an icon.

js

const tree = [
  {
    text: "My Documents",
    myIcon: starIcon,
    expanded: true,
    items: [
      {
        text: "KendoReact Project",
        myIcon: xIcon,
        expanded: true,
        items: [
          {
            text: "about.html",
            myIcon: imageIcon,
          },
          .............

The following example demonstrates how to use the iconField property:

Change Theme

Theme

Loading ...

Suggested Links

• TreeView Custom Rendering
• React TreeView Overview
• API Reference of the TreeView