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 4 shades - Default, Dark, Darker 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.


Jal

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

Structure

Icons are based on Google’s Material Design and rendered using icon fonts. It supports rounded and outlined type. An icon component in the UI follows a simple structure.

Structure of icon

PropertyValue(s)
Weight300
Fill
  • 1 (Material symbols rounded)
  • 0 (Material symbols outlined)
  • Optical size24
    Grad0

    Configurations

    PropertyValue(s)Default value
    Size<size>16 px
    Appearance
  • Night
  • Light
  • Jal
  • Neem
  • Haldi
  • Mirch
  • Tawak
  • Nimbu
  • Neel
  • Jamun
  • Night
    Shade
  • Default
  • Light
  • Lighter
  • Lightest
  • Dark
  • Darker
  • Default

    Note: Light and Lightest shades are only available for ‘Night’ 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 label Icons appearing with label

    With background

    Icons with background containers 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 Hover on an icon


    Was this page helpful?