Icons are powerful visual helpers, and should be used with care. Icons are visual representations of commands, files, devices, directories, or common actions and are used to provide visual context and enhance usability.
Icons should have a clear purpose, using the same icon for multiple uses can quickly dilute the meaning and add confusion.
Icons are on a 20px grid and exported with padding on a 24px art board.
When scaling down icons, smaller elements like circles should be solid to help with legibility.
Icons should always match the text colour they are accompanying to create a clear relationship. Primary navigation and badges don’t need to follow this convention.
If the copy and icon have different heights always vertically centre align them.
Any spacing above or below should be measured from the largest component i.e. if the icon is 20px high and the copy is 16px high the spacing should be measured against the icon.
If you're developing in the platform, you'll want to use the Icon component. See here for documentation on this component.
These icons are used to display the status of resources across Kalo, such as Projects, Tasks, and Invoices