Icons
The icon system used in the DESIGN SYSTEM coding project will be powered by an icon font. This system offers several advantages:
- Scalability: SVG icons can easily be scaled to any size without losing quality, ensuring crisp and clear visuals on any device or screen resolution. Icons color or stroke width may also be easily altered using CSS instead of having multiple files for each icon.
- Performance: Every icons is contained is a single SVG file, reducing page load times and improving overall performance.
<link rel="stylesheet" href="https://webcdn.ringover.com/app/img/icons/lts/ro-icons-regular.css"><link rel="stylesheet" href="https://webcdn.ringover.com/app/img/icons/lts/ro-icons-solid.css">
...<i class="ro-icon ro-icon-rocket ro-size-xl"></i>
<button class="ro-btn ro-shape-icon"> <i class="ro-icon ro-icon-rocket ro-size-xl"></i></button>Available Sizes
| Class | Value | Token |
|---|---|---|
.ro-size-sm | 12px | --ro-icon-size-sm |
.ro-size-md | 16px | --ro-icon-size-base (Default) |
.ro-size-lg | 20px | --ro-icon-size-lg |
.ro-size-xl | 24px | --ro-icon-size-xl |
.ro-size-2xl | 32px | --ro-icon-size-2xl |
.ro-size-3xl | 48px | --ro-icon-size-3xl |
.ro-size-4xl | 64px | --ro-icon-size-4xl |
Deprecated icons
Section titled “Deprecated icons”When an icon is renamed, the old class name stays available as a deprecated alias so existing usages keep working. Deprecated aliases share the same Figma asset as their replacement and are listed in export.json with "status": "deprecated".
The gallery below groups icons into accordion categories from export.json: New first, then Icons (all active icons, including updated ones), and Deprecated last. Deprecated aliases show the recommended replacement class.