Icons and Images

Using images on nodes and glyphs is a powerful way to customise charts.

KeyLines supports the most popular image formats including PNG, JPG and SVG. See the Image Formats docs for details.

KeyLines also supports any font icons including Font Awesome, Material Design Icons and many more.

This demo uses Font Awesome 5 in two weights - solid and regular. Icons are imported from fontawesome5/all.css which means that both weights can be used simultaneously without requiring any CSS changes.

For more information, see the Fonts and Font Icons docs.

Design guidelines

When choosing from the wide range of font characters available, select the icons that are intuitive and recognisable even at low zoom levels. Also make sure that:

  • icon colours meet required contrast standards
  • icons are sufficiently distinct from each other
  • icons are correctly aligned, or use the imageAlignment chart option to align them

Key functions used: