Icon

Icons are all SVGs from FontAwesome. There are a few exceptions to this rule, and those icons are typically created from two or more existing FontAwesome SVGs.

The spirit of dv01 icon’s tend toward lightweight, streamlined choices. When choosing icons, the best option is typically the “Light” version offered by FontAwesome.

A note about designing: it is preferable to use a FontAwesome icon for symbols such as $ or %, as opposed to using it as text. This ensures that any updates to dv01’s fonts do not also require updating icons, and that users on different operating systems experience less variability in dv01’s UI.

Furthermore, it is preferable to use an SVG image when designing in Sketch files, as opposed to using the FontAwesome symbol font. This ensures we can keep all symbols up to date across files, and allows multiple designers to seamlessly work on the same files.

Icons may be named for the appearance of the icon, or for the function of the icon. A list of the origins of every icon can be found in Zeplin.

Navigation icons represent product lines and overall app functionality. They can be found on the L1 and L2 nav levels, as well as in breadcrumbs.

Dual-state icons are a subset of action icons that also function as an on/off switch.

Notification icons communicate status and alert the user to information.

Display icons are used throughout the interface to enhance communication to the user. They are all FontAwesome SVG’s for extensibility.

Map icons are used in data visualization to help users customize their view.

Other icons that have specific uses with distinct styling and sizing, even though the icons themselves may be duplicated as other types of icons.

Tape Cracker uses iconography in ways that other dv01 products do not (though this will change as the app evolves). Each icon represents the results of a given formula or calculation. Some of its icons are borrowed from other parts of the app and can be found under those names (ie, date is the calendar icon).