# Customize visualizer nodes

Copy as Markdown[View as Markdown](/docs/development/customization/customize-visualizer/visualizer-nodes.md)

***

**Added in** `eventcatalog@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.

![Visualizer Node](/assets/images/customize-node-7aa3fc6b26a49d870406c7042b1d9ed9.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.

/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[​](#rendered-output "Direct link to Rendered output")

![Customized Node](/assets/images/customize-node-example-5452e0a1442b5cab4277094514ae63b7.png)

### Configuration[​](#configuration "Direct link to 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).                                                                                                                                                   |