Φ Icon

Primitive: Used in building element and components. An icon is used as a metaphor for an action, object, concept. Here we standardize the sizes for all icons used in the design system.

Styleguide Link

• Parent: Label, Many others

• Child: Badge

Properties

Size - The general size of the element in proportion to the others in the collection.

• XSmall (12dp)

• Small (16dp)

• SMedium (20dp)

• Medium (24dp)

• Large (32dp)

• XLarge(40dp)

• XXLarge(48dp)

• Huge (64dp)

Badge - Every icon has the possibility of having a badge in the upper right corner. This is commonly used with icons especially on tabs to represent new activity in that area of the app.

State - The different appearances of the screen object based on interaction and the status of the screen object. Possible states are Enabled, Disabled, Hover, Pressed, Focused.

Why

By constraining the icon sizes here we maintain a consistency throughout the application. Additional sizes could be added at this level to increase the options available at parent levels. Only the sizes listed here should be used in the application.