Icons

Size

The set has two key sizes: normal (24dp) and small (14dp).

Normal icons

  • In navigation
  • In normal & big molecules 
(buttons, inputs, …)
  • In messaging banners
  • Inline with normal or header text

Bounding box & key shapes

Key shapes make it easier to balance visual weights of the inner shapes. The bounding box guarantees consistent implementation because every icon has equal dimensions.

Secondary metaphors

Actions that support a secondary meaning have a badge in the lower-right corner.

Placement

The iconsize is optimized for the typography in Teamleaders UI. A bounding box that is larger than the x-height, makes the icons easier to scan in the UI.

For the vertical positioning, the uppercase height (a) is used to center the label. The horizontal margin between the label and icon is determined by increments of the spacing grid (b).

Color

The icon folows the same color of the text-color from the parent. To compensate the visual icon weight, they are brought back to an opacity of 0.86.

Full opacity

0.87 opacity

0.87 opacity makes the icon blend in with the text.

Toggle icons

Toggle states are available for main navigation elements & toggle buttons. The selected state has a filled counterpart of the original icon.

Icon buttons

Used where a subtle action is prefered over an louder button, e.g: actions in datagrids, tables and close buttons in modals.

Available for the small and medium icon-size. On the default state the bounding box is transparent. The hover, focus and active states utilize tints of the icon base color.