Icons

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.

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 ] */
        
          color
          :
          
             #C6C6C6
          
        ;
      
    

      
        /* [ Active ] */
        
          color
          :
          
             #A1A1A1
          
        ;
      
    

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:

• be public domain
• be an svg image
• have an aspect ratio of 3:2
• be named according to the Crowdin languages
• be without additional decoration (official flags)

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

.nav-dd-container .lang img {
    border: 1px solid gray;
    border-radius: 1px;
    height: 18px;
    vertical-align: middle;
}