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.
Property | Value(s) | Default value |
---|---|---|
Icon theme | Rounded | - |
Appearance | - | |
Shade | Default |
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.