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. The icons should be of atleast 512Bytes in size.
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.
