Skip to main content
Docs
Components
Foundation
5.0.3Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 5.0.3

Iconography

This page is under construction

Triton uses iconography to display meaningful symbols to end users, which will guide them through a user experience.

Iconography is an important aspect of Triton. Icons help users quickly understand and navigate the interface. Triton's iconography follows a consistent visual language to ensure that icons are recognizable and convey meaning across different products and features.

Throughout our organization, our design teams work closely with product teams to create icons that are relevant and intuitive for the specific context of use. The goal of Triton is to make these icons available to all the different products, so that we can all benefit from a growing iconographic library.

Additionally, Triton itself provides icons that are optimized for different screen sizes and resolutions to ensure they remain legible and clear regardless of the device being used. The iconography guidelines provide instructions on how to use the icons and how to create new ones that adhere to the overall visual language.

Guidelines for Iconography​

  1. Consistency is key. All icons within Triton should follow the same visual language to ensure that they are recognizable and convey meaning across different products and features.
  2. Keep it simple. Icons should be easy to recognize and understand at a glance. Avoid complexity and detail that may make the icon difficult to interpret.
  3. Use metaphors that are relevant and intuitive for the specific context of use. For example, a magnifying glass icon can be used to represent search functionality.
  4. Consider accessibility. Use appropriate color contrasts and avoid using icons alone to convey important information. Always include alternative text for screen readers.
  5. Optimize for different screen sizes and resolutions. Triton provides icons that are optimized for different device sizes, but designers should also consider how the icons will look on different screen resolutions.
  6. Provide guidelines for use. Make sure to provide guidelines for how to use the icons and how to create new ones that adhere to the overall visual language. This will help maintain consistency and prevent confusion.