---
sidebar_position: 1
keywords:
- EventCatalog visualizer nodes 
sidebar_label: Customize nodes
title: Customize visualizer nodes
description: Customize the color, label and icon of the visualizer nodes.
---

import AddedIn from '@site/src/components/MDX/AddedIn';

<AddedIn version="2.33.8" />

Every node in the visualizer has a color, label and icon. 

The example below shows the default node for a **Service** resource.

<!-- Image image -->
![Visualizer Node](./img/customize-node.png)

By default the icon, color and label in the node is generated by EventCatalog. Helping you maintain consistency across your catalog.

You can use the `styles` property to customize the icon, color and label of the node, if you want to customize the node to be more specific to your use case.

```md title="/domains/MyDomain/services/MyService.md"
---
id: NotificationService
version: 0.0.2
name: Notification Service
summary: |
  Service that handles orders
styles:
  icon: "BellIcon"
  node: 
    color: purple
    label: "Custom"
---
```

#### Rendered output

![Customized Node](./img/customize-node-example.png)

### Configuration

| ID | Required | Default | Description |
| --- | --- | --- | --- |
| `styles.icon` | No | Depends on resource type | The icon to use for the resource. Icons are from [hero icons](https://heroicons.com/). <br/> You can find a list of icons [here](https://unpkg.com/browse/@heroicons/react@2.1.5/24/outline/). |
| `styles.node.color` | No | Depends on resource type | The color to use for the node. These are tailwind colors and you can find a list of them [here](https://tailwindcss.com/docs/colors). |
| `styles.node.label` | No | Depends on resource type | The label to use for the node (side label). |