Style — Iconography

Iconography

Icons are used along with text to communicate or emphasize an idea. Over time, viewers learn to recognize icons and quickly associate actions or ideas with them

Usage

A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions such as remove, delete, and save.

Favorites Icons on the Dashboard

Design Principals

The design of the system icons should be simple, modern, and friendly. Each icon is reduced to its minimal form. The designs ensure readability and clarity even at small sizes.

Best Practices:

  • Use consistent stroke weights.
  • Make icons flat from the front; do not make it look dimensional.
  • Simplify icons with geometric and consistent look and feel.
  • Position icons on pixel so that the display is crisp.
  • Make the width and height the same so that the icon is not distorted.
  • Corners and strokes are by default 2dp, except 1.5dp strokes can be used in complex icons

On a plain background, choose icon consisted of strokes/outline and counter area over filled ones to keep the clean aesthetics.

Upload Icons on Media Card

On a complex or image background, filled icons are preferred for visibility.

photo Icon on Image in Asset Library

Video Icon on Image in Asset Library