Action icon

Action icons are used to represent common actions in your app. KaiOS provides many common action icons, such as add, cancel, search, next, and so on. We highly recommend using these icons in your apps. If none of the standard action icons meet your app’s needs, you can design your own action icons by following the design principles in the following sections.

Size & format

An action icon must be 32 x 32 pixels in SVG format. Always keep free space (5 pixels) around the icon. However, the icon can be extended into free space due to visual weight balance.

Normal & focus states

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

Style

The icon should be two-dimensional and filled with a solid color. Avoid decorative details or using visual effects like drop shadow, gradient, and glow. Also, ensure that the size of your icon is readable and clear on a small-sized display.

Shape

An action icon should represent its desired function as simply and clearly as possible, while avoiding overly complex or compound ideas, such as intricate details or thin outline strokes.