Icon

 

 

Icons are the visual expression of a brand's products, services, and identity. The app icons provide provide a quick, and intuitive representation of the product. For packaging, the app icons should be stored in the assets/icons directory. Also, icons are referred to relative to the location of index.html. See Key App Assets for details.

Icon Style

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

  • Icons should be designed with a distinct silhouette.
  • They should be two-dimensional and flat. 
  • The icons are displayed on a solid colored background panel. You can specify a color for the background panel. The color must be specified using a hexadecimal notation (HEX). 
  • Avoid using visual effects. Visual effects will make your icon look inconsistent with the flat style/aesthetic of the system UI
     

icon_good_bad.png

Icon Color

  • Make sure you choose the correct colors for your icon and the background panel. 
  • Apply the same background app tile color to both app icons shown in the upper-left corner and the app tiles shown at the bottom of the Home UI.
  • The icon color and the background panel should 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. 


icon_good_bad_bg.png

Icon Background Panel Sizes & Scale

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

  • 140 x 350 px

icon_home_screen.png

 

Icon Format & Positioning

  • Icons should be imported in PNG file format.
  • The icon should have at least 5px padding inside. If you don’t have a 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_guide1.png        icon_guide2.png

 

icon_guide3.png

 

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

 

icon_guide4.png

icon_good_bad2.png

untitled.png

 

Navigation