The icon set is carefully designed for simplicity to convey a clear and concise user experience. Having a simple but effective icon set is crucial for ease of use within sophisticated software environments.

Some icons are saved as pre-rendered images and can be found in the resource folder (.../src/main/webapp/img). Other icons are based on Font Awesome which gives us scalable vector icons that can be customized by size, color, drop shadow, and anything that is provided by CSS.

For more links and license information refer to References - Font Awesome.

Note: Font Awesome contains over 630 icons, the cheat sheet of icons lists the icons and the corresponding CSS class.

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

Section Navigation Tab Icons

These icons are to represent different sections within the UI and should only be represented in a “flat” graphic style. Simplicity is key in the design of section icons. The user must easily identify the icons. Extension of these icons must represent a similar style.

        /* [ Inactive ] */
Dashboard Users System Servers Events Recordings Configuration
        /* [ Active ] */
Dashboard Users System Servers Events Recordings Configuration

Country Icons

Country icons are located at the top-right of the interface beside the user dropdown to indicate language that the UI is represented in.

Each flag should:

A good source for these flags are the national flag articles of Wikipedia.
E.g. https://en.wikipedia.org/wiki/Flag_of_Germany

de_DE el_GR en_US es_ES fr_FR gl_ES ja_JP nl_NL no_NO pl_PL sv_SE zh_CN zh_TW
.nav-dd-container .lang img {
    border: 1px solid gray;
    border-radius: 1px;
    height: 18px;
    vertical-align: middle;