Icon List - Usage

Basic Guidelines

• The list of options should be sorted in a logical order to make the content easy to scan. This could be alphabetical, numerical, chronological or by user preference.

• Lists should be kept comprehensive, with one line per item if possible

Icon Usage

Icons can be switched out to any appropriate Skycon. Each icon can be different per line.

The colour of the icons can be changed from the default Text-Grey to any solid colour. It's possible to use icons of different colours within the same list, for example, to highlight positive and negative options, or to make certain items stand out. This should be done judiciously, ensuring that colour enhances the meaning of the icons. Generally, using more than two colours is not recommended. In React using gradients on Skycons is not supported due to the limitations in size. Please only use solid colours.

Accessibility

Icons when part of an icon list are purely visual, so the alt text for each icon will be left blank. This means screen reader users will only hear the list being read out, the icons are skipped entirely.