App Icons

Appicons are used to display images, icons, colors or similar. They are always round and in predefined sizes.

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-guidelines. 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.

Default and default + indicator

<div class="display--flex justify-content-around">
  <div class="wui-appicon2 wui-appicon2--xlg m-t-10">
    <i class="fab fa-font-awesome-flag"></i>
  </div>
  <div class="wui-appicon2 wui-appicon2--xlg m-t-10">
    <i class="fab fa-font-awesome-flag"></i>
    <div class="wui-appicon2__indicator">
      <i class="fas fa-check"></i>
    </div>
  </div>
</div>

Image and image + indicator

<div class="display--flex justify-content-around">
  <div class="wui-appicon2 wui-appicon2--xlg">
    <div class="wui-image wui-image--content-fit">
      <img src="/latest/assets/images/avatar.png">
    </div>
  </div>
  <div class="wui-appicon2 wui-appicon2--xlg">
    <div class="wui-image wui-image--content-fit">
      <img src="/latest/assets/images/avatar.png">
    </div>
    <div class="wui-appicon2__indicator">
      <i class="fas fa-check"></i>
    </div>
  </div>
</div>

Appicons with text

Left and right

As all adjacent elements these are within a wui-inline-list as well. The margin may vary. For appicons which are .wui-appicon2--lg it is .wui-inline-list--md. For larger appicons it is .wui-inline-list--lg, for smaller appicons it is .wui-inline-list--sm.

Text right

Text left

<div class="display--flex justify-content-around">
  <div class="wui-inline-list wui-inline-list--md">
    <div class="wui-inline-list__item">
      <div class="wui-appicon2 wui-appicon2--lg">
        <i class="fab fa-font-awesome-flag"></i>
      </div>
    </div>
    <div class="wui-inline-list__item">
      <strong>Text right</strong>
    </div>
  </div>
  <div class="wui-inline-list wui-inline-list--md">
    <div class="wui-inline-list__item">
      <strong>Text left</strong>
    </div>
    <div class="wui-inline-list__item">
      <div class="wui-appicon2 wui-appicon2--lg">
        <i class="fab fa-font-awesome-flag"></i>
      </div>
    </div>
  </div>
</div>

Top and bottom

If the text is above or below the appicon, you cannot use .wui-inline-list and because of this you'll have a slightly different structure for this component. The alignment of the text doesn't need individual classes it can be done exclusively with utils. For most cases it is best to center text and appicon to avoid an optical imbalance.

Text top

Text bottom

<div class="display--flex justify-content-around">
  <div class="text--center">
    <p class="text--bold">Text top</p>
    <div class="wui-appicon2 wui-appicon2--lg">
      <i class="fab fa-font-awesome-flag"></i>
    </div>
  </div>
  <div class="text--center">
    <div class="wui-appicon2 wui-appicon2--lg">
      <i class="fab fa-font-awesome-flag"></i>
    </div>
    <p class="m-t-10 text--bold">Text bottom</p>
  </div>
</div>

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: 48px * 48px `.wui-appicon2--md`
123		Size: 60px * 60px `.wui-appicon2--lg`
123		Size: 84px * 84px `.wui-appicon2--xlg`
123		Size: 114px * 114px `.wui-appicon2--2xl`

There is no wui-mono component documentation available yet. But you are always welcome to contact the wui-team
via Slack: #wescale-wui-public
via Mail: wescale-wui@wescale.com

From WUI and

with

WUI is wescale’s design system