Icon

Displays an icon. We use icons to accelerate user's work with the UI through understanding metaphoric meaning behind the icon and thus not needing to read the accompanying text.

RADES uses Glyphicons Pro in both Standard (24 px) and Halfling (16 px) size as a basis of our icon library, extended with custom-made icons.

Icons are used in context of an active element like a button or a menu item. They are also used in flash messages, notifications and other places to signify importance.

Which Icon to Use?

When an icon is prescribed in design (UI), it should be used.

We should attempt to use similar icons to those in wireframe (UX).

⚠️ Balsamiq Mockups uses a special set of Font Awesome resulting in different look and selection of icons.

In case no icon is prescribed and there is no similar use already in the application, no icon should be used or a designer should be consulted.

Icon vs Illustration

Icon should not be confused with Illustration. Illustrations are fixed-size images used in defined contexts like on a deactivated page. Use of illustration out of defined context requires a design review. Use of an icon, on the other hand, does not require such review and is left under developer's discretion.

Basic Usage

To implement the Icon component, you need to import it first:

import { Icon } from 'rades_react/src/components/Icon';

And use it:

<Icon icon="copy" />

See API for all available options.

Icons

Sizes

To improve readability, small and medium icons are drawn differently. Large icons are based on medium, only enlarged.

Components, that use sizes, should define corresponding icons size.

<Icon icon="cart-delete" size="small" />
<Icon icon="cart-delete" size="medium" />
<Icon icon="cart-delete" size="large" />

Medium Icons

<Icon icon="adjust" />
<Icon icon="bin" />
<Icon icon="bullhorn" />
<Icon icon="cart-delete" />
<Icon icon="changes-arrow" />
<Icon icon="chevron-down" />
<Icon icon="chevron-left" />
<Icon icon="chevron-light-down" />
<Icon icon="chevron-light-right" />
<Icon icon="chevron-right" />
<Icon icon="chevron-up" />
<Icon icon="clock" />
<Icon icon="cogwheel" />
<Icon icon="cogwheels" />
<Icon icon="copy" />
<Icon icon="danger" />
<Icon icon="dashboard" />
<Icon icon="device" />
<Icon icon="disconnect" />
<Icon icon="download-alt" />
<Icon icon="download-multiple" />
<Icon icon="duplicate" />
<Icon icon="events" />
<Icon icon="fallback" />
<Icon icon="filter" />
<Icon icon="firewall" />
<Icon icon="fullscreen-collapse" />
<Icon icon="fullscreen-expand" />
<Icon icon="globe" />
<Icon icon="hide" />
<Icon icon="history" />
<Icon icon="info-sign" />
<Icon icon="interface" />
<Icon icon="justify" />
<Icon icon="key" />
<Icon icon="lightbulb" />
<Icon icon="line-wrap" />
<Icon icon="list" />
<Icon icon="list-alt" />
<Icon icon="loading" />
<Icon icon="lock" />
<Icon icon="minus" />
<Icon icon="monitoring" />
<Icon icon="move" />
<Icon icon="ok-circle" />
<Icon icon="old-man" />
<Icon icon="overview" />
<Icon icon="pause" />
<Icon icon="pencil" />
<Icon icon="play" />
<Icon icon="plus" />
<Icon icon="qos" />
<Icon icon="question" />
<Icon icon="question-sign" />
<Icon icon="refresh" />
<Icon icon="remote-connection" />
<Icon icon="remove" />
<Icon icon="remove-circle" />
<Icon icon="routing" />
<Icon icon="scripting" />
<Icon icon="security" />
<Icon icon="send" />
<Icon icon="services" />
<Icon icon="show" />
<Icon icon="show-big-thumbnails" />
<Icon icon="show-thumbnails" />
<Icon icon="statistics" />
<Icon icon="stethoscope" />
<Icon icon="stop" />
<Icon icon="tick" />
<Icon icon="tools" />
<Icon icon="unlock" />
<Icon icon="upload" />
<Icon icon="vpn" />
<Icon icon="warning-sign" />

Small Icons

<Icon icon="adjust" size="small" />
<Icon icon="bin" size="small" />
<Icon icon="bullhorn" size="small" />
<Icon icon="cart-delete" size="small" />
<Icon icon="changes-arrow" size="small" />
<Icon icon="chevron-down" size="small" />
<Icon icon="chevron-left" size="small" />
<Icon icon="chevron-light-down" size="small" />
<Icon icon="chevron-light-right" size="small" />
<Icon icon="chevron-right" size="small" />
<Icon icon="chevron-up" size="small" />
<Icon icon="clock" size="small" />
<Icon icon="cogwheel" size="small" />
<Icon icon="cogwheels" size="small" />
<Icon icon="copy" size="small" />
<Icon icon="danger" size="small" />
<Icon icon="dashboard" size="small" />
<Icon icon="device" size="small" />
<Icon icon="disconnect" size="small" />
<Icon icon="download-alt" size="small" />
<Icon icon="download-multiple" size="small" />
<Icon icon="duplicate" size="small" />
<Icon icon="events" size="small" />
<Icon icon="fallback" size="small" />
<Icon icon="filter" size="small" />
<Icon icon="firewall" size="small" />
<Icon icon="fullscreen-collapse" size="small" />
<Icon icon="fullscreen-expand" size="small" />
<Icon icon="globe" size="small" />
<Icon icon="hide" size="small" />
<Icon icon="history" size="small" />
<Icon icon="info-sign" size="small" />
<Icon icon="interface" size="small" />
<Icon icon="justify" size="small" />
<Icon icon="key" size="small" />
<Icon icon="lightbulb" size="small" />
<Icon icon="line-wrap" size="small" />
<Icon icon="list" size="small" />
<Icon icon="list-alt" size="small" />
<Icon icon="loading" size="small" />
<Icon icon="lock" size="small" />
<Icon icon="minus" size="small" />
<Icon icon="monitoring" size="small" />
<Icon icon="move" size="small" />
<Icon icon="ok-circle" size="small" />
<Icon icon="old-man" size="small" />
<Icon icon="overview" size="small" />
<Icon icon="pause" size="small" />
<Icon icon="pencil" size="small" />
<Icon icon="play" size="small" />
<Icon icon="plus" size="small" />
<Icon icon="qos" size="small" />
<Icon icon="question" size="small" />
<Icon icon="question-sign" size="small" />
<Icon icon="refresh" size="small" />
<Icon icon="remote-connection" size="small" />
<Icon icon="remove" size="small" />
<Icon icon="remove-circle" size="small" />
<Icon icon="routing" size="small" />
<Icon icon="scripting" size="small" />
<Icon icon="security" size="small" />
<Icon icon="send" size="small" />
<Icon icon="services" size="small" />
<Icon icon="show" size="small" />
<Icon icon="show-big-thumbnails" size="small" />
<Icon icon="show-thumbnails" size="small" />
<Icon icon="statistics" size="small" />
<Icon icon="stethoscope" size="small" />
<Icon icon="stop" size="small" />
<Icon icon="tick" size="small" />
<Icon icon="tools" size="small" />
<Icon icon="unlock" size="small" />
<Icon icon="upload" size="small" />
<Icon icon="vpn" size="small" />
<Icon icon="warning-sign" size="small" />

Adding New Icons

Icons should be added from Glyphicons Basic set. In case an icon is missing in the set, new icon needs to be drawn in the same style.

API