The role of iconography

Iconography serves as a visual language within user interfaces, conveying meaning and functionality through simple graphical representations. Icons help users quickly understand and interact with various elements of an interface, improving usability and enhancing the overall user experience.

Our library

The icon library is essential for maintaining consistency and coherence across the interface. A comprehensive icon library ensures that icons are visually aligned, easily recognizable, and effectively communicate their intended meanings. It streamlines the design process, promotes efficiency, and fosters a unified visual identity for the product and brand.

Icon sizes

Icon-24

The most commonly used visual icon, adept at representing a diverse array of concepts and products.

Icon-16

Employed in interfaces and calls to action, providing a subtle yet efficient for conveying specific interactions.

Filled icons

Icons are predominantly depicted as line art, but filled versions can be created or used to represent different states and enhancing clarity, particularly in smaller micro icons.

Coloured icons

Icons are typically designed to stay neutral in color, with the default being black. While coloured icons may be used in specific messaging components, it's advisable to use them sparingly to maintain visual clarity and consistency.

Identifying icons

Icon names follow a clear and standardized naming format. This structure helps maintain a structured library and simplifies identification across all platforms.

size-concept-variant

• All characters lower case
• No spaces or special characters (other than dash)
• Concept that requirement multiple words should be written as one string (i.e. doublechevron)
• Only include a variant if applicable

Usage

Do

• Use icons to represent primary navigation elements, such as menus, tabs, or links, facilitating intuitive navigation within the interface.
• Employ icons alongside text labels for action buttons, enhancing visual appeal and providing additional context or meaning to the actions.
• Utilize icons to signify status or feedback, such as success, error, warning, or loading states, aiding in user comprehension and feedback.

Don't

• Avoid using icons with ambiguous or unclear meanings, as they can lead to confusion and misinterpretation by users.
• Refrain from overcrowding interfaces with excessive icons, as this can overwhelm users and detract from the clarity and usability of the interface.
• Avoid using icons to represent complex or abstract concepts that may not be easily conveyed through graphical symbols alone.

Accessibility

Exercise caution when using icons as the sole means of conveying information, as they may pose accessibility challenges for users with visual impairments or cognitive disabilities.