# Rioglyph

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/rioglyph
*Captured:* 2026-04-27T14:58:27.558Z

The Rioglyph component is a React wrapper for the Rioglyph icon set. It provides a convenient and type-safe way to render icons without directly dealing with the utility classnames.

## Rioglyph

In addition to rendering a single icon, the component supports built-in features such as spinning and pulsing animations, as well as paired icons for combining multiple glyphs into one semantic symbol.

The complete list of available icons and their names can be found in the icon library.

### Example: Example 1

Single rioglyph icon

Single rioglyph icon with custom styles

Single rioglyph icon with spinning animation

Single rioglyph icon with pulsing animation

Paired rioglyph icon

Disabled styling

Custom external svg icon

#### React (tsx)

```tsx
import Rioglyph, { type IconType } from '@rio-cloud/rio-uikit/Rioglyph';

// Keep color classes typed to avoid typos when passing classNames.
export type ColorClass =
    | 'text-color-warning'
    | 'text-color-danger'
    | 'text-color-success'
    | 'text-color-info'
    | 'text-color-black'
    | 'text-color-gray';

// Single vehicle icons used across examples.
const vehicleIcons: IconType[] = ['rioglyph-truck', 'rioglyph-bus', 'rioglyph-van', 'rioglyph-car'] as const;

// Icons that visually make sense to spin.
const spinnableIcons: IconType[] = [
    'rioglyph-refresh',
    'rioglyph-climate-control',
    'rioglyph-cog',
    'rioglyph-spinner',
    'rioglyph-tire',
] as const;

/**
 * Icons that pulse in color to indicate a status.
 */
type Icon = { icon: IconType; color: ColorClass };

const pulsingIcons: Icon[] = [
    { icon: 'rioglyph-battery-level-empty', color: 'text-color-danger' },
    { icon: 'rioglyph-battery-level-low', color: 'text-color-warning' },
    { icon: 'rioglyph-battery-level-full', color: 'text-color-success' },
];

/**
 * Paired icons that combine a vehicle with its fuel type.
 */
type PairedIcon = Icon & { pairIcon: IconType };

const pairedIcons: PairedIcon[] = [
    { icon: 'rioglyph-truck', pairIcon: 'rioglyph-fuel-hydrogen', color: 'text-color-info' },
    { icon: 'rioglyph-bus', pairIcon: 'rioglyph-fuel-electric', color: 'text-color-success' },
    { icon: 'rioglyph-van', pairIcon: 'rioglyph-fuel-diesel', color: 'text-color-black' },
    { icon: 'rioglyph-car', pairIcon: 'rioglyph-fuel-gas', color: 'text-color-black' },
];

export default () => (
    <div className='display-flex flex-column gap-15'>
        {/* Basic glyphs */}
        <div>
            <label>Single rioglyph icon</label>
            <div className='display-flex gap-5 align-items-center text-size-18'>
                {vehicleIcons.map(icon => (
                    <Rioglyph icon={icon} key={icon} />
                ))}
            </div>
        </div>

        {/* Custom styling via className */}
        <div>
            <label>Single rioglyph icon with custom styles</label>
            <div className='display-flex gap-5 align-items-center'>
                {vehicleIcons.map(icon => (
                    <Rioglyph icon={icon} size='h2' iconClassName='text-color-gray' key={icon} />
                ))}
            </div>
        </div>

        {/* Built-in spinning animation */}
        <div>
            <label>Single rioglyph icon with spinning animation</label>
            <div className='display-flex gap-5 align-items-center'>
                {spinnableIcons.map(icon => (
                    <Rioglyph icon={icon} size='h2' spinning key={icon} />
                ))}
            </div>
        </div>

        {/* Pulsing animation + color */}
        <div>
            <label>Single rioglyph icon with pulsing animation</label>
            <div className='display-flex gap-5 align-items-center'>
                {pulsingIcons.map(({ icon, color }) => (
                    <Rioglyph
                        icon={icon}
                        size='h2'
                        pulsing={icon === 'rioglyph-battery-level-empty'}
                        iconClassName={color}
                        key={`${icon}-${color}`}
                    />
                ))}
            </div>
        </div>

        {/* Main glyph paired with a secondary glyph (e.g., fuel type) */}
        <div>
            <label>Paired rioglyph icon</label>
            <div className='display-flex gap-5 align-items-center'>
                {pairedIcons.map(({ icon, pairIcon, color }) => (
                    <Rioglyph
                        icon={icon}
                        size='h1'
                        pairIcon={pairIcon}
                        pairIconClassName={color}
                        key={`${icon}-${pairIcon}`}
                    />
                ))}
            </div>
        </div>


        {/* Disabled */}
        <div>
            <label>Disabled styling</label>
            <div className='display-flex gap-5 align-items-center'>
                <Rioglyph
                        icon={'rioglyph-lock'}
                        size='h2'
                        disabled
                    />
                    <Rioglyph
                        icon={'rioglyph-key'}
                        size='h2'
                        disabledInverse
                    />
                    <Rioglyph
                        icon={'rioglyph-chat'}
                        size='h2'
                        disabledDanger
                    />
            </div>
        </div>

        {/* Custom external svg icon */}
        <div>
            <label>Custom external svg icon</label>
            <div className='display-flex gap-5 align-items-center'>
                <Rioglyph
                    icon={'https://cdn.rio.cloud/images/uikit/react_logo.svg'}
                    size='h1'
                    iconClassName='text-color-info'
                />
                <Rioglyph
                    icon={'https://cdn.rio.cloud/images/uikit/react_logo.svg'}
                    size='h1'
                    pairIcon={'https://cdn.rio.cloud/images/uikit/number_19.svg'}
                    pairIconClassName={'text-color-danger'}
                />
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="display-flex flex-column gap-15">
    <div>
        <label>Single rioglyph icon</label>
        <div class="display-flex gap-5 align-items-center text-size-18">
            <span class="rioglyph rioglyph-truck">
            </span>
            <span class="rioglyph rioglyph-bus">
            </span>
            <span class="rioglyph rioglyph-van">
            </span>
            <span class="rioglyph rioglyph-car">
            </span>
        </div>
    </div>
    <div>
        <label>Single rioglyph icon with custom styles</label>
        <div class="display-flex gap-5 align-items-center">
            <span class="rioglyph rioglyph-truck text-size-h2 text-color-gray">
            </span>
            <span class="rioglyph rioglyph-bus text-size-h2 text-color-gray">
            </span>
            <span class="rioglyph rioglyph-van text-size-h2 text-color-gray">
            </span>
            <span class="rioglyph rioglyph-car text-size-h2 text-color-gray">
            </span>
        </div>
    </div>
    <div>
        <label>Single rioglyph icon with spinning animation</label>
        <div class="display-flex gap-5 align-items-center">
            <span class="rioglyph rioglyph-refresh text-size-h2 spinning">
            </span>
            <span class="rioglyph rioglyph-climate-control text-size-h2 spinning">
            </span>
            <span class="rioglyph rioglyph-cog text-size-h2 spinning">
            </span>
            <span class="rioglyph rioglyph-spinner text-size-h2 spinning">
            </span>
            <span class="rioglyph rioglyph-tire text-size-h2 spinning">
            </span>
        </div>
    </div>
    <div>
        <label>Single rioglyph icon with pulsing animation</label>
        <div class="display-flex gap-5 align-items-center">
            <span class="rioglyph rioglyph-battery-level-empty text-size-h2 text-color-danger pulsing">
            </span>
            <span class="rioglyph rioglyph-battery-level-low text-size-h2 text-color-warning">
            </span>
            <span class="rioglyph rioglyph-battery-level-full text-size-h2 text-color-success">
            </span>
        </div>
    </div>
    <div>
        <label>Paired rioglyph icon</label>
        <div class="display-flex gap-5 align-items-center">
            <span class="rioglyph-icon-pair text-size-h1">
                <span class="rioglyph rioglyph-truck">
                </span>
                <span class="rioglyph rioglyph-fuel-hydrogen text-color-info">
                </span>
            </span>
            <span class="rioglyph-icon-pair text-size-h1">
                <span class="rioglyph rioglyph-bus">
                </span>
                <span class="rioglyph rioglyph-fuel-electric text-color-success">
                </span>
            </span>
            <span class="rioglyph-icon-pair text-size-h1">
                <span class="rioglyph rioglyph-van">
                </span>
                <span class="rioglyph rioglyph-fuel-diesel text-color-black">
                </span>
            </span>
            <span class="rioglyph-icon-pair text-size-h1">
                <span class="rioglyph rioglyph-car">
                </span>
                <span class="rioglyph rioglyph-fuel-gas text-color-black">
                </span>
            </span>
        </div>
    </div>
    <div>
        <label>Disabled styling</label>
        <div class="display-flex gap-5 align-items-center">
            <span class="rioglyph rioglyph-lock text-size-h2 rioglyph-disabled">
            </span>
            <span class="rioglyph rioglyph-key text-size-h2 rioglyph-disabled rioglyph-disabled-inverse">
            </span>
            <span class="rioglyph rioglyph-chat text-size-h2 rioglyph-disabled rioglyph-disabled-danger">
            </span>
        </div>
    </div>
    <div>
        <label>Custom external svg icon</label>
        <div class="display-flex gap-5 align-items-center">
            <span class="rioglyph text-size-h1 text-color-info" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);">
            </span>
            <span class="rioglyph-icon-pair text-size-h1">
                <span class="rioglyph" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);">
                </span>
                <span class="rioglyph text-color-danger" style="--i: url(https://cdn.rio.cloud/images/uikit/number_19.svg);">
                </span>
            </span>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| icon | string | — | The rioglyph icon string OR an external .svg link |
| iconClassName | string | — | Additional classes set to the icon span. |
| size | 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| '10' \| '11' \| '12' \| '14' \| '16' \| '18' \| '20' | — | The size (text-size) of the icon |
| spinning | boolean | false | Spinning animation. |
| pulsing | boolean | false | Pulsing animation. |
| filled | boolean | false | Filled style. |
| disabled | boolean | false | Add a disabled line |
| disabledDanger | boolean | false | Recolor the disabled line to the danger color. |
| disabledInverse | boolean | false | Flip the disabled line. |
| pairIcon | IconType \| string | — | The rioglyph icon string OR an external .svg link. |
| pairIconClassName | string | — | Additional classes set to the pairIcon span. |