Icon

Usage

Development

About

An Icon is a small graphical representations of a concept. In Riverty Design System an Icon can be used to support texts such as labels, messages and statuses. An Icon is not interactive, wheras an Icon button is. Riverty Design System offers an Icon in small, medium and large size.

Anatomy

An Icon may consists of:

Icon

When to use

Use an Icon when:

The icon is not interactive;
It enhances recognition; use icons that are universally recognised;
It improves navigation; often icons in menus or toolbars make navigation more intuitive.

When not to use

Do not use an Icon when:

The icon is allows for interactivity. Use an Icon Button component instead;
The icon is not a universally recognised icon. This might confuse users;
It replaces important text; always try to combine with text.

Sizes

Riverty Design System includes three sizes of Icon:

Small (S)

Icon size: 16 x 16 pixels.

Medium (M)

Icon size: 24 x 24 pixels.

Large (L)

Icon size: 32 x 32 pixels.

Color usage

An Icon’s default color is using the Icon-soft token. Whereas the Icon button’s default color is using the Icon-regular token.

Best practices

Interactivity

Icons do not allow users to interact whereas Icon buttons allows users to interact.

Do use an Icon to visually support text, such as labels, actions or information required.

Do not use an Icon if it allows for interactivity. Use an Icon button instead.

Don’t

Icons and text

When combining icons with texts, it is important to center-align icons next to texts.

Do center-align icons when they are next to text.

Do not base-align icons when they are next to text.