App Icons

Summary

• Appicons. This special type of image is round and in one of 5 predefined sizes.
• Image or Icon. Appicons can contain both images or icons.
• Indicator. No matter if the appicon contains an image or an icon - each one can additionally contain an indicator. If the indicator is not an icon use the modifier .wui-appicon2__indicator--text.

Appicon variations

The default background of the wui-appicon is a light gray. You can also use other colors here considering the color-guidlines. Remember to use .text--white on darker backgrounds, so that you always have a proper contrast.
If the image is not square or it is a png with transparent background, the best thing to use is .wui-bg-color--white for the appicon.

            
            some
            markup
            here
            
          

            
            some
            markup
            here
            
          

Image

        
        some
        markup
        here
        
      

Show source

Image + Indicator

        
        ~~~
        here
        ~~~
        
      

Show source

Appicons with text

Sizes

The following modifiers work with all different appicon variations. They influence the size of the appicon, the icons themselves and the appicon-indicators. There are indicators for all appicon sizes, although indicators for small or extra small Appicons should be avoided due to their size.

Use .wui-appicon2__indicator--text for text and numbers within the indicator.

123		Size: 20px * 20px .wui-appicon2--xsm
123		Size: 32px * 32px .wui-appicon2--sm
123		Size: 40px * 40px .wui-appicon2--md
123		Size: 60px * 60px .wui-appicon2--lg
123		Size: 84px * 84px .wui-appicon2--xlg