Icons

Icons convey meaning to actions and other interface elements.

Icons are used to add additional visual cues on a page, hence helping to communicate a clearer meaning.

Icons are based on Google’s Material Design and rendered using icon fonts. As of now, only rounded theme is supported. An icon component in the UI follows a simple structure. It has a font size of 16px which renders the icon in a 16 x 16px bounding box.

Based on the color palette that we follow, icons are offered in the following appearances. Barring the night and light variants, each appearance has 3 shades - Default, Dark and Lighter.

Note: Added a dark background here just to show the color of the icon.

Note: Not all shades are available for each appearance.

Icons can also be resized to account for various use cases.

Typically > 48px

Smaller than 16px

Icons can come really handy when showing key-value pairs.

Icons, though being non-interactive, can also have tooltips/popovers to provide additional information on hover.