Icons

Icons are symbols used to represent ideas, objects, or actions. They are used to communicate messages at a glance, afford interactivity, and draw attention to important information.

Interactive Demo

JDS package comes with icon library package in .SVG format.

Indicators

Documents

Actions

Objects

Social

Font awesome icons

Alternatively, designers and developers can use the icons from "Font Awesome" which is included in the JDS Package. Users of JDS can copy the code snippet from font awesome website and use it in their websites/web applications. Few icons are shown below.

For example: To create an icon for "Settings" ( ) use <i class="fal fa-cog"></i>

Usage Guidelines

• Use established icons

  Icons that have been used for a long time worldwide have a higher chance of being recognized and understood quickly. Don’t reinvent an icon that’s already been accepted as the convention.

• Pair icons with text

  The purpose on an icon is to clarify the content by providing a visual cue and improve legibility and scannability of the user interface. In general, icons should be placed near a label or title. Never use an icon to replace a label or action.

• Use simple over detailed

  Detailed icons increase cognitive load. Focus on simplicity to help users understand the concept the icon represents.