Icon convey meaning to actions and other interface elements.
Icon is used to add additional visual cues on a page, hence helping to communicate a clearer meaning.
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.
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.
Note: Not all shades are available for each appearance.
Icons can also be resized to account for various use cases.
Icons can come really handy when showing key-value pairs.Icons appearing with label
Icons, though being non-interactive, can also have tooltips/popovers to provide additional information on hover.Hover on an icon