Icon

Icons are the visual expression of a brand's products, services, and identity. The app icons provide a quick, and intuitive representation of the product. To represent your icons in your app, you should specify icons in app assets. See Key App Assets for details.

Icon Style

You should be aware of the following rules when you design your app icons.

  • Design icons with a distinct silhouette. Icons should be two-dimensional and flat. 

  • Locate icons on a solid colored background panel. You can specify a color for the background panel. You must specify the color using a hexadecimal notation (HEX). 

  • Avoid using visual effects. Visual effects make your icon look inconsistent with the flat style/aesthetic of the system UI

Good and bad examples of icon style

Icon Color

  • Make sure you choose the correct colors for your icon and the background panel. 

  • Apply the same background color to both app icons shown in the upper-left corner and the app tiles shown at the bottom of the Home UI.

  • Make the icon color and the background panel reflect your brand. However, it is important to ensure that there is a good contrast. The icon should stand out clearly against the background panel. Lack of contrast could make the icon difficult to view. 

Good and bad examples of icon color

Icon Background Panel Sizes & Scale

App icons displayed on the Home screen has the following panel size:

  • 140 x 350 px

Panel size of app icons

 

Icon Format & Positioning

  • Import icons in PNG format.

  • Add at least 5px padding inside icons. If you don’t add padding in your 115 x 115 px area, your logo will be not be displayed properly.

  • Make sure that the icon fits nicely on the panel without being too close to any of the edges.

Icon color and padding guide: 5px padding and 115 px by 115 px area        Icon examples on the icon background panel

Icon examples

In LG Content Store (LG Store), your logo is displayed in a square box. Without the padding space, your logo looks inconsistent from the rest of the logos displayed on the screen.

Icon logo example in LG Content Store

Good and bad example of icon position and size

Good and bad example of icon background color

Navigation