# How to apply different style for tree component in individual item

**URL:** <https://forum.inductiveautomation.com/t/how-to-apply-different-style-for-tree-component-in-individual-item/105215>\
**Category:** Ignition\
**Created:** [April 17, 2025, 7:30am UTC](https://forum.inductiveautomation.com/t/how-to-apply-different-style-for-tree-component-in-individual-item/105215 "2025-04-17T07:30:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![senthilpandi.v](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@senthilpandi.v](https://forum.inductiveautomation.com/u/senthilpandi.v)\
**Post date:** [April 17, 2025, 7:30am UTC](https://forum.inductiveautomation.com/t/how-to-apply-different-style-for-tree-component-in-individual-item/105215/1 "2025-04-17T07:30:09Z")

</div>

**Hi Team,**

I am using the Tree component in one of my applications. I need to apply different fonts for parent items and their child items. However, the Tree component currently supports only one common style, which applies to all items.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/5/f54bac83183d58cc35b1b3b996052d98ba162146.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 17, 2025, 8:39am UTC](https://forum.inductiveautomation.com/t/how-to-apply-different-style-for-tree-component-in-individual-item/105215/2 "2025-04-17T08:39:53Z")

</div>

> [@Style Tree Items programmatically](https://forum.inductiveautomation.com/t/style-tree-items-programmatically/102894/4):
>
> Yes, but not without some stylesheet CSS. Some examples: Note: these examples will apply to ALL Tree components if used as. To limit these to Trees with a specific Perspective Style applied, prefix the selectors with the Perspective Style path like this: /\* Applies this style to Tree components with the "Components/EndNodeOpacity" Perspective Style applied \*/ .psc-Components\/EndNodeOpacity .tree-item[data-label\*="UPDATE"] { background-color: aliceblue; } /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/ /\* Tree Vi…

---

<div class="post-metadata">

**Author:** ![senthilpandi.v](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@senthilpandi.v](https://forum.inductiveautomation.com/u/senthilpandi.v)\
**Post date:** [April 21, 2025, 5:15am UTC](https://forum.inductiveautomation.com/t/how-to-apply-different-style-for-tree-component-in-individual-item/105215/3 "2025-04-21T05:15:34Z")

</div>

Thank you for your response. This is great. I would like to assign different icons to individual parent and child items—would it be possible to customize the icons accordingly?

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [April 21, 2025, 3:14pm UTC](https://forum.inductiveautomation.com/t/how-to-apply-different-style-for-tree-component-in-individual-item/105215/4 "2025-04-21T15:14:27Z")

</div>

You should be able to define the icons for each item in the tree structure. You have to specify it per item when building the `items` property.

Each item in `items` needs to have the `icon` key added, and then you can provide the path to the icon that you want to use there.

```json
{
  "data": {
  },
  "icon": {
    "color": "#005EB8",
    "path": "material/apartment",
    "style": {}
  },
  "label": "Place A",
  "expanded": false,
  "items": []
}

```

> **Different icons per tree item**
>
> ![TreeSearchExample](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/f/bfcf64abc29203bf2df757b885207d9f8fbe90ea.png)