Icon
Icon convey meaning to actions and other interface elements.
Usage
Code
Icon is used to add additional visual cues on a page, hence helping to communicate a clearer meaning.
Appearances
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.
Night
Light
Note: Added a dark background here just to show the color of the icon.
Jal
Mirch
Haldi
Neem
Nimbu
Tawak
Neel
Jamun
Structure
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.
| Property | Value(s) |
|---|---|
| Icon theme | Rounded |
Configurations
| Property | Value(s) | Default value |
|---|---|---|
| Size | <size> | 16 px |
| Appearance | Night | |
| Shade | Default |
Note: Not all shades are available for each appearance.
Usage
Different sizes
Icons can also be resized to account for various use cases.
Large
Typically > 48px
Small
Smaller than 16px
With label
Icons can come really handy when showing key-value pairs.
Icons appearing with label With background
Icons with background containers Hover
Icons, though being non-interactive, can also have tooltips/popovers to provide additional information on hover.
Hover on an icon