Icons

Icons convey meaning to actions and other interface elements.

Usage
Code

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

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. It has a font size of 16px which renders the icon in a 16 x 16px bounding box.

A 16x16 icon

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

All shades of icons in night color

Light

All shades of icons in namak color

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


Primary

All shades of icons in jal color

Mirch

All shades of icons in mirch color

Haldi

All shades of icons in haldi color

Neem

All shades of icons in neem color

Nimbu

All shades of icons in nimbu color

Tawak

All shades of icons in tawak color

Neel

All shades of icons in neel color

Jamun

All shades of icons in jamun color

Properties

PropertyValue(s)Default value
Icon themeRounded-
Appearance
  • Jal
  • Stone
  • Neem
  • Haldi
  • Mirch
  • Tawak
  • Nimbu
  • Neel
  • Jamun
  • -
    Shade
  • Default
  • Light
  • Lighter
  • Lightest
  • Dark
  • 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

    Large sized icon
    Small

    Smaller than 16px

    Small sized icon

    With label

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

    Icons appearing with labe

    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