---
title: "Value to Icon"
slug: "value-to-icon-filter"
updated: 2026-07-31T10:19:53Z
published: 2026-07-31T10:19:53Z
canonical: "learn.servitly.com/value-to-icon-filter"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Value to Icon

A filter printing a colored icon by a given value.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/screenshot(6).png)

# How it works

This filter and its variants can be applied to *metrics* and *properties* template elements. The string case is ignored (e.g., `Critical` → `CRITICAL`).

In case of null or empty values no icon is printed. In case the value has not been registered within the options, the value itself is printed as it is. Without this filter, the values of metrics/properties are printed as they are according to the underlying value type, for instance:

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/noFilter.png)

# Filter Variants

The set of predefined filter variants that can be used to format values.

| *Severity Icon* | Prints out an icon according to the severity (one of INFORMATIONAL, WARNING, CRITICAL). **Name**: *severityIcon* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/severityIcon/_image?owner=AG_Servitly) |
| --- | --- |
| *Threshold Icon* | Prints out a circle whose color depends on a numeric threshold (<50 green, >=50 and <75 orange, >=75 red). **Name**: *thresholdIcon* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/thresholdIcon/_image?owner=AG_Servitly) |
| *Threshold Icon with Value* | Prints out the value with a circle whose color depends on a numeric threshold (<50 green, >=50 and <75 orange, >=75 red). **Name**: *thresholdIcon2* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/thresholdIcon2/_image?owner=AG_Servitly) |

# Custom Variants

New variants can be defined through the following configuration options.

| **Option** | **Description** | **Sample Value** |
| --- | --- | --- |
| *iconStyle* | The style to apply to the printed icon. | font-size:20px;text-align:center |
| *showValue* | The flag indicating whether to display the value after the icon. | true |
| *thresholds* | The optional array of THRESHOLD objects used to convert a numeric value to a specific severity. | 'thresholds':[{...},{...}] |
| *unit* | The optional unit that is displayed within the icon title. | °C |
| *<VALUE_KEY>* | For each possible value, the options that are used to render such a value. | 'fooBar':{...} |

  

### VALUE_KEY

Each can be configured through these properties.

| ***Property*** | **Description** | **Sample Value** |
| --- | --- | --- |
| *icon* | The [Font Awesome (5 free)](https://fontawesome.com/v5/search) icon to be displayed. | fas fa-exclamation-triangle |
| *color* | The icon color. | #f39c12 |

  

### THRESHOLD

The properties of the threshold object to be added in the *thresholds* array.

| ***Property*** | **Description** | **Sample Value** |
| --- | --- | --- |
| *min* | The lower exclusive threshold. | 50 |
| *max* | The upper inclusive threshold. | 75 |
| *severity* | The result severity (one of `NORMAL`, `WARNING`, `CRITICAL`). | WARNING |

  

Example of custom filter variants in the [Custom Filters](/docs/custom-filters) component.

```javascript
// icon by value
exports.severityIcon = ValueToIcon({
        "INFORMATIONAL": { "icon": "fas fa-info-circle", "color": "#08b05b" },
        "WARNING": { "icon": "fas fa-exclamation-triangle", "color": "#f39c12" },
        "CRITICAL": { "icon": "fas fa-exclamation-triangle", "color": "#dd4b39" },
        "FAILURE": { "icon": "fas fa-exclamation-triangle", "color": "#dd4b39" },
        "EMERGENCY": { "icon": "fas fa-exclamation-circle", "color": "#FF0000" }
});

// icon by value with thresholds
exports.thresholdIcon = ValueToIcon({
        "thresholds": [
          { "max": 50, "severity": "NORMAL" },
          { "min": 50, "max": 75, "severity": "WARNING" },
          { "min": 75, "severity": "CRITICAL" }],
        "NORMAL": { "icon": "fas fa-circle", "color": "#08b05b" },
        "WARNING": { "icon": "fas fa-circle", "color": "#f39c12" },
        "CRITICAL": { "icon": "fas fa-circle", "color": "#dd4b39" }
});
    
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

| *Severity Icon* | Prints out an icon according to the severity (one of INFORMATIONAL, WARNING, CRITICAL). **Name**: *severityIcon* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/severityIcon/_image?owner=AG_Servitly) |
| --- | --- |
| *Threshold Icon* | Prints out a circle whose color depends on a numeric threshold (<50 green, >=50 and <75 orange, >=75 red). **Name**: *thresholdIcon* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/thresholdIcon/_image?owner=AG_Servitly) |
| *Threshold Icon with Value* | Prints out the value with a circle whose color depends on a numeric threshold (<50 green, >=50 and <75 orange, >=75 red). **Name**: *thresholdIcon2* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/thresholdIcon2/_image?owner=AG_Servitly) |

# Custom Variants

New variants can be defined through the following configuration options.

| **Option** | **Description** | **Sample Value** |
| --- | --- | --- |
| *iconStyle* | The style to apply to the printed icon. | font-size:20px;text-align:center |
| *showValue* | The flag indicating whether to display the value after the icon. | true |
| *thresholds* | The optional array of THRESHOLD objects used to convert a numeric value to a specific severity. | 'thresholds':[{...},{...}] |
| *unit* | The optional unit that is displayed within the icon title. | °C |
| *<VALUE_KEY>* | For each possible value, the options that are used to render such a value. | 'fooBar':{...} |

  

### VALUE_KEY

Each can be configured through these properties.

| ***Property*** | **Description** | **Sample Value** |
| --- | --- | --- |
| *icon* | The [Font Awesome (5 free)](https://fontawesome.com/v5/search) icon to be displayed. | fas fa-exclamation-triangle |
| *color* | The icon color. | #f39c12 |

  

### THRESHOLD

The properties of the threshold object to be added in the *thresholds* array.

| ***Property*** | **Description** | **Sample Value** |
| --- | --- | --- |
| *min* | The lower exclusive threshold. | 50 |
| *max* | The upper inclusive threshold. | 75 |
| *severity* | The result severity (one of `NORMAL`, `WARNING`, `CRITICAL`). | WARNING |

  

Example of custom filter variants in the [Custom Filters](/docs/custom-filters) component.

```javascript
// icon by value
exports.severityIcon = ValueToIcon({
        "INFORMATIONAL": { "icon": "fas fa-info-circle", "color": "#08b05b" },
        "WARNING": { "icon": "fas fa-exclamation-triangle", "color": "#f39c12" },
        "CRITICAL": { "icon": "fas fa-exclamation-triangle", "color": "#dd4b39" },
        "FAILURE": { "icon": "fas fa-exclamation-triangle", "color": "#dd4b39" },
        "EMERGENCY": { "icon": "fas fa-exclamation-circle", "color": "#FF0000" }
});

// icon by value with thresholds
exports.thresholdIcon = ValueToIcon({
        "thresholds": [
          { "max": 50, "severity": "NORMAL" },
          { "min": 50, "max": 75, "severity": "WARNING" },
          { "min": 75, "severity": "CRITICAL" }],
        "NORMAL": { "icon": "fas fa-circle", "color": "#08b05b" },
        "WARNING": { "icon": "fas fa-circle", "color": "#f39c12" },
        "CRITICAL": { "icon": "fas fa-circle", "color": "#dd4b39" }
});
    
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

| *Severity Icon* | Prints out an icon according to the severity (one of INFORMATIONAL, WARNING, CRITICAL). **Name**: *severityIcon* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/severityIcon/_image?owner=AG_Servitly) |
| --- | --- |
| *Threshold Icon* | Prints out a circle whose color depends on a numeric threshold (<50 green, >=50 and <75 orange, >=75 red). **Name**: *thresholdIcon* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/thresholdIcon/_image?owner=AG_Servitly) |
| *Threshold Icon with Value* | Prints out the value with a circle whose color depends on a numeric threshold (<50 green, >=50 and <75 orange, >=75 red). **Name**: *thresholdIcon2* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/thresholdIcon2/_image?owner=AG_Servitly) |

# Custom Variants

New variants can be defined through the following configuration options.

| **Option** | **Description** | **Sample Value** |
| --- | --- | --- |
| *iconStyle* | The style to apply to the printed icon. | font-size:20px;text-align:center |
| *showValue* | The flag indicating whether to display the value after the icon. | true |
| *thresholds* | The optional array of THRESHOLD objects used to convert a numeric value to a specific severity. | 'thresholds':[{...},{...}] |
| *unit* | The optional unit that is displayed within the icon title. | °C |
| *<VALUE_KEY>* | For each possible value, the options that are used to render such a value. | 'fooBar':{...} |

  

### VALUE_KEY

Each can be configured through these properties.

| ***Property*** | **Description** | **Sample Value** |
| --- | --- | --- |
| *icon* | The [Font Awesome (5 free)](https://fontawesome.com/v5/search) icon to be displayed. | fas fa-exclamation-triangle |
| *color* | The icon color. | #f39c12 |

  

### THRESHOLD

The properties of the threshold object to be added in the *thresholds* array.

| ***Property*** | **Description** | **Sample Value** |
| --- | --- | --- |
| *min* | The lower exclusive threshold. | 50 |
| *max* | The upper inclusive threshold. | 75 |
| *severity* | The result severity (one of `NORMAL`, `WARNING`, `CRITICAL`). | WARNING |

  

Example of custom filter variants in the [Custom Filters](/docs/custom-filters) component.

```javascript
// icon by value
exports.severityIcon = ValueToIcon({
        "INFORMATIONAL": { "icon": "fas fa-info-circle", "color": "#08b05b" },
        "WARNING": { "icon": "fas fa-exclamation-triangle", "color": "#f39c12" },
        "CRITICAL": { "icon": "fas fa-exclamation-triangle", "color": "#dd4b39" },
        "FAILURE": { "icon": "fas fa-exclamation-triangle", "color": "#dd4b39" },
        "EMERGENCY": { "icon": "fas fa-exclamation-circle", "color": "#FF0000" }
});

// icon by value with thresholds
exports.thresholdIcon = ValueToIcon({
        "thresholds": [
          { "max": 50, "severity": "NORMAL" },
          { "min": 50, "max": 75, "severity": "WARNING" },
          { "min": 75, "severity": "CRITICAL" }],
        "NORMAL": { "icon": "fas fa-circle", "color": "#08b05b" },
        "WARNING": { "icon": "fas fa-circle", "color": "#f39c12" },
        "CRITICAL": { "icon": "fas fa-circle", "color": "#dd4b39" }
});
    
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

| *Severity Icon* | Prints out an icon according to the severity (one of INFORMATIONAL, WARNING, CRITICAL). **Name**: *severityIcon* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/severityIcon/_image?owner=AG_Servitly) |
| --- | --- |
| *Threshold Icon* | Prints out a circle whose color depends on a numeric threshold (<50 green, >=50 and <75 orange, >=75 red). **Name**: *thresholdIcon* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/thresholdIcon/_image?owner=AG_Servitly) |
| *Threshold Icon with Value* | Prints out the value with a circle whose color depends on a numeric threshold (<50 green, >=50 and <75 orange, >=75 red). **Name**: *thresholdIcon2* **Input Types**: *INTEGER, FLOAT, NUMBER, STRING* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ValueToIcon_1/IMAGES/variants/thresholdIcon2/_image?owner=AG_Servitly) |