Icon
About
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.
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.
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.