# Fuel type utils

*Category:* Utilities
*Section:* Helper
*Source:* https://uikit.developers.rio.cloud/#/utilities/fuelTypeUtils
*Captured:* 2026-04-27T14:59:28.552Z

There is a wide variety of standardized fuel types, and on top of that, some projects or systems introduce their own custom definitions. While the naming can differ, many of these values carry the same semantic meaning. To avoid confusion and ensure consistent visual representation, we provide a centralized mapping of fuel types to icons.

## Fuel type utils

In this mapping, multiple values may point to the same icon when they represent equivalent or very similar fuel types. This guarantees that the UI remains consistent across the application and that users always see the correct symbol, regardless of the data source.

## getFuelIcon

The getFuelIcon function offers a single, reliable way to retrieve the correct icon:

- It accepts any known fuel type value.
- It returns the corresponding Rioglyph icon.
- Unknown or unsupported values automatically fall back to the unknown icon, preventing broken or missing visuals.

This approach ensures that developers don’t need to decide individually which icon to use. Instead, all mappings are maintained in one place, making the system easier to understand, maintain, and extend. Adding new fuel types or adjusting existing mappings can be done centrally without requiring changes throughout the codebase.

## Fuel type utils

These utilities help group, filter, and render fuel types based on predefined semantic categories such as liquid, gas, electric, hydrogen, or hybrid.

- you need to filter items by fuel type group,
- show fuel group filter buttons with icons and counters,
- or render the appropriate icon for a specific fuel type or group.

**Overview**

- fuelTypeGroupIcons Maps each fuel type group to its representative icon (e.g. for use in UI filter buttons or legends).
- fuelTypeGroups List of all defined fuel type groups (excluding unknown). Useful to iterate over filterable groups.
- getFuelTypeGroupIcon(fuelTypeGroup) Returns the icon associated with a given fuel group.
- filterByFuelTypeGroup(items, groups, getFuelType) Filters a list of items by their fuel group, using a custom fuel type extractor function.
- countFuelTypeGroups(items, getFuelType) Counts how many items belong to each fuel group, useful for showing badge counters on group filter buttons.

### Example: Example 1

Single rioglyph fuel icon This is a diesel truck
This is a gasoline truck
This is an electric bus

Paired rioglyph fuel icon

Unknown paired fuel icon

#### React (tsx)

```tsx
import Rioglyph from '@rio-cloud/rio-uikit/Rioglyph';
import { getFuelIcon } from '@rio-cloud/rio-uikit/fuelTypeUtils';

export default () => (
    <div className='display-flex flex-column gap-15'>
        <div>
            <label>Single rioglyph fuel icon</label>
            <div className='display-flex gap-5 align-items-center text-size-20'>
                This is a diesel truck <span className={`rioglyph ${getFuelIcon('diesel')}`} />
            </div>
            <div className='display-flex gap-5 align-items-center text-size-20'>
                This is a gasoline truck <span className={`rioglyph ${getFuelIcon('gas')}`} />
            </div>
            <div className='display-flex gap-5 align-items-center text-size-20'>
                This is an electric bus <span className={`rioglyph ${getFuelIcon('electric')}`} />
            </div>
        </div>
        <div>
            <label>Paired rioglyph fuel icon</label>
            <div className='display-flex gap-10'>
                <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('diesel')} />
                <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('gas')} />
                <Rioglyph size='h1' icon={'rioglyph-bus'} pairIcon={getFuelIcon('electric')} />
            </div>
        </div>
        <div>
            <label>Unknown paired fuel icon</label>
            <div className='display-flex gap-10'>
                <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('whatever')} />
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="display-flex flex-column gap-15">
    <div>
        <label>Single rioglyph fuel icon</label>
        <div class="display-flex gap-5 align-items-center text-size-20">This is a diesel truck <span class="rioglyph rioglyph-fuel-liquid">
            </span>
        </div>
        <div class="display-flex gap-5 align-items-center text-size-20">This is a gasoline truck <span class="rioglyph rioglyph-fuel-liquid">
            </span>
        </div>
        <div class="display-flex gap-5 align-items-center text-size-20">This is an electric bus <span class="rioglyph rioglyph-fuel-electric">
            </span>
        </div>
    </div>
    <div>
        <label>Paired rioglyph fuel icon</label>
        <div class="display-flex gap-10">
            <span class="rioglyph-icon-pair text-size-h1">
                <span class="rioglyph rioglyph-truck">
                </span>
                <span class="rioglyph rioglyph-fuel-liquid">
                </span>
            </span>
            <span class="rioglyph-icon-pair text-size-h1">
                <span class="rioglyph rioglyph-truck">
                </span>
                <span class="rioglyph rioglyph-fuel-liquid">
                </span>
            </span>
            <span class="rioglyph-icon-pair text-size-h1">
                <span class="rioglyph rioglyph-bus">
                </span>
                <span class="rioglyph rioglyph-fuel-electric">
                </span>
            </span>
        </div>
    </div>
    <div>
        <label>Unknown paired fuel icon</label>
        <div class="display-flex gap-10">
            <span class="rioglyph-icon-pair text-size-h1">
                <span class="rioglyph rioglyph-truck">
                </span>
                <span class="rioglyph rioglyph-question">
                </span>
            </span>
        </div>
    </div>
</div>
```

#### Props: getFuelIcon

### getFuelIcon

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| fuelType | FuelType | unknown | The specific fuel type of the item. This will be resolved to a fuel group icon. Supported values include: gas, diesel, electric, hydrogen, cng, and more. |

#### Props: getFuelTypeGroupIcon

### getFuelTypeGroupIcon

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| fuelTypeGroup | FuelTypeGroup | — | The fuel group identifier used to resolve the corresponding icon. |

#### Props: filterByFuelTypeGroup

### filterByFuelTypeGroup

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| items | T[] | — | The list of items to filter by fuel type group. |
| activeGroups | FuelTypeGroup[] | — | Array of selected fuel groups to include in the filtered result. |
| getFuelType | (item: T) => FuelType \| undefined | — | Function used to extract the fuel type from each item. |

#### Props: countFuelTypeGroups

### countFuelTypeGroups

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| items | T[] | — | The list of items to count by fuel group. |
| getFuelType | (item: T) => FuelType \| undefined | — | Function used to extract the fuel type from each item. |