Table of Content

UI Icons

UI icons are small graphical representations of a functionality or concept. They provide users with quick and recognizable visual cues that are easy to understand.

alarm-clock
angle-down
angle-left-with-vertical-line
angle-left
angle-right-with-vertical-line
angle-right
angle-up
arrow-down-left
arrow-down-right
arrow-down-with-horizontal-line
arrow-down
arrow-left-with-vertical-line
arrow-left
arrow-pointing-backward
arrow-pointing-down-at-tray
arrow-pointing-forward
arrow-right-with-vertical-line
arrow-right
arrow-splitting
arrow-up-left
arrow-up-right
arrow-up-with-horizontal-line
arrow-up
arrows-circled
arrows-pointing-outwards
bag
bank
bell-crossed-out
bell
biometric-id-face-scan
biometric-id-fingerprint
box
broken-glass
bullet-list
bulls-eye
calendar
camera
cart
check
circled-check
circled-cross
circled-exclamation-mark
circled-information-i
circled-percentage-sign
circled-question-mark
clipboard-with-checkmark
clipboard
code-prompt
cog
cookie
copy
credit-card
cross
document-checked
document
envelope
eye-crossed-out
eye
folder
gallery
graph
happy-face
headset
heart
hour-glass
house
image
invoice
link
login
logout
mad-face
magnifier
money-bill
padlock-closed
padlock-open
paper-plane
pen
phone-with-shield
plus
printer
puzzle-piece
qr-code
receipt
sad-face
scale
shield
signature
slider
speech-bubble
star
store
straight-face
thumb-up
tray
two-speech-bubbles
user-avatar-with-minus
user-avatar
very-happy-face

Usage

The design system includes a set of primary icons that are available as a Figma library and shipped as code. A unique name, shared between Figma and code, identifies each icon. Riverty’s UI icon kit is based on Streamline Sharp Line. Riverty has a corporate license which means they can be used in any Riverty product.

Design

UI icon kit published through the Riverty Design System team within Figma. All employees have access by signing in to Figma using Riverty single sign-on.

Development

The icon component is available in the @riverty/web-components package. Individual SVG files are available through the CDN.

Icon component example:

<r-icon name="alarm-clock"></r-icon>

Icons should act as complementary visual cues

A good way to think about using icons in your design is as complementary visual cues for text. By combining text and icons, you get the best of both worlds. As a general rule, try to include both. This is especially important when the action is less common and the icon or action is not a universal one.

Sizing

The icons comes in three different sizes - s, m and l

small (16 px) icons are best used when space is limited. For example as tooltips triggers or inside components.

medium (24 px) are the standard icon size and can be used in the majority of the interface.

large (32 px) icons should be used sparingly to emphasize a concept or when space is plentiful.

In general consider the context of the icon when picking the size — such as the size of sorrounding icons and the balance of other UI elements.

Icons and text

Always center-align icons and text when used together.

Do center-align icons when they’re next to text.
Do
Don’t baseline-align icons to the text.
Don't

Touch target

Touch targets are the responsive areas on the screen when touched. For icons on touch-sensitive surfaces, they should be easily visible and accessible. The touch targets should be at least 44 pixels, while the actual icon can be smaller. Adding padding around the icon ensures an adequate touch target size.

Place icons with an adequate distance from each other, taking touch areas into consideration.
Do
Don’t overlap the icons touch target areas.
Don't