---
title: "Ratings"
slug: "ratings-filter"
updated: 2026-07-31T09:47:07Z
published: 2026-07-31T09:47:07Z
canonical: "learn.servitly.com/ratings-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.

# Ratings

Displays an integer from zero to five as a rate through colored icons.

![Ratings](https://components-manager.servitly.com/components/Ratings_1/IMAGES/_screenshot?owner=AG_Servitly)

Transforms the input value (integer 0-5) into a series of colored icons.

# Filter Variants

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

| *Five Circles Rating* | Displays five circles and fills the first ones according to the given integer number (0-5). **Name**: *fiveCirclesRating* **Input Types**: *INTEGER, FLOAT, NUMBER* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/Ratings_1/IMAGES/variants/fiveCirclesRating/_image?owner=AG_Servitly) |
| --- | --- |
| *Five Hearts Rating* | Displays five hearts and fills the first ones according to the given integer number (0-5). **Name**: *fiveHeartsRating* **Input Types**: *INTEGER, FLOAT, NUMBER* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/Ratings_1/IMAGES/variants/fiveHeartsRating/_image?owner=AG_Servitly) |
| *Five Stars Rating* | Displays five stars and fills the first ones according to the given integer number (0-5). **Name**: *fiveStarsRating* **Input Types**: *INTEGER, FLOAT, NUMBER* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/Ratings_1/IMAGES/variants/fiveStarsRating/_image?owner=AG_Servitly) |

# Custom Variants

New variants can be defined through the following configuration options.

| **Option** | **Description** | **Sample Value** |
| --- | --- | --- |
| *fillIcon* | The [Font Awesome (5 free)](https://fontawesome.com/v5/search) icon to be displayed at first. | fas fa-star |
| *emptyIcon* | The [Font Awesome (5 free)](https://fontawesome.com/v5/search) icon to be displayed at last. | far fa-star |
| *color* | The color class or hexadecimal color of the icons. | text-green, #e31b23 |

  

Example of defining a custom ratings filter variant into the [Custom Filters](/docs/custom-filters) component.

```javascript

exports.fiveStarts = RatingFormatter({ "fillIcon": "fas fa-start", "emptyIcon": "far fa-start", "color": "text-yellow" });
    
```