Launcher Icon

The launcher icon is the first visual expression of your app, as it directly and, hopefully, effectively communicates its main purpose to the user. Unified graphic elements allow you to create simple, intuitive, consistent icons that reflect product characteristics and quality. It can also help your app stand out from other apps. The design principles in the following pages serve as a guide for icon design.

KaiOS App Icon Template resource sketch file is here for you to design your KaiOS app icon. It includes screenshot preview and helps quickly export multiple icon sizes. The resource file requires Sketch 51 or higher version.

Sizes

Baseline icon

Every app must supply a baseline icon at 56 x 56 pixels for use on the All Apps grid and list views, the KaiStore, Notices, and throughout the system once the app has been installed.

Large icon

Every app should also provide a larger icon at 112 x 112 pixels (you can make the baseline icon 2x bigger proportionally) for display in the All Apps single view and the app launch screen.

Image Size (px) File Name Use For
56 x 56 (Baseline) AppName_56.png All Apps (grid view)
All Apps (List view)
KaiOS Store
Notices
In-app Notices
112 x 112 AppName_112.png All Apps (Single view)
Launch Screen

Shape

The app icon image is provided at 56 x 56 pixels in 24-bit png format. Icon shape is limited to 46 x 46 pixels round shape or 44 x 44 pixels square shape which casts a soft shadow around it.

Usage

Normal & focus states

Each icon has normal and focussed states, differentiated by color composition. Avoid using the same color for both states so they are easily distinguishable.

Appropriate icon size

It is important to keep the icon design area between 44x44 and 46x46 pixels; an oversized icon will obstruct the view while an app is being selected.

Concise icon style

All colors should be solid color elements with minimal flair; three- dimensional designs and textures will cause the icons to become overly complex and lead to inconsistencies on low resolution devices.

Transparency of icon

The launcher icon and focused color background should not be transparent, as it will expose the wallpaper and make it hard to recognize the icon.

Focus State

Color your own

Our unique transition design animates when an app is selected by users. It helps users stay focused while navigating to the app they are looking for.

The focus color in the All Apps view can be changed individually and customized to suit any brand need, as shown in the following illustration.