# Custom RIOglyph icon

*Category:* Getting started
*Section:* Guidelines
*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/custom-rioglyph
*Captured:* 2026-04-27T14:57:05.110Z

To use a custom Rioglyph icon, there are two different approaches:

## Custom RIOglyph icon

1. Use an inline style with a CSS variable
2. Define a CSS class that applies an SVG as a mask-image

Below is an example of both approaches:

**Approach 1: Inline style**

Without custom CSS

```html
<span class="rioglyph" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);"></span>
```

<span class="rioglyph" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);">

</span>

**Approach 2: Custom CSS class**

Use in components (eg. MapMarker)

```html
<style>
.rioglyph-custom-xxx {
--i: url('https://cdn.rio.cloud/images/uikit/react_logo.svg');
}
</style>
```

&lt;style&gt;

.rioglyph-custom-xxx { --i: url('https://cdn.rio.cloud/images/uikit/react_logo.svg'); }

&lt;/style&gt;

```html
<span class="rioglyph rioglyph-custom"></span>
```

<span class="rioglyph rioglyph-custom">

</span>