The set has two key sizes: normal (24dp) and small (14dp).
- 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.
Actions that support a secondary meaning have a badge in the lower-right corner.
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).
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.
0.87 opacity makes the icon blend in with the text.
Toggle states are available for main navigation elements & toggle buttons. The selected state has a filled counterpart of the original icon.
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.