Iconography
Pre-defined icons help to improve the recognition of Interactive Design products. Dot. system icons are made universal for different platforms. They can be conveniently used both in the webspace and in mobile applications for iOS and Android.
Icon Styles
Depending on the product features, we use fill and/or line icons. Combined use of icons is acceptable (for example: it is necessary to show the states of objects). All icons are visually balanced and can be placed next to each other.
Size
Depending on the product features, we use fill and/or line icons. Combined use of icons is acceptable (for example: it is necessary to show the states of objects). All icons are visually balanced and can be placed next to each other.
Color
Interactive Design icons are monochrome. In icons, as well as in the rest of the interface, we use colours from design tokens synchronized with the library in Figma.
Recommendations for use
Don't change the icon style. The icons in the set have the same weight, so together, they look proportionate. Changing the fill on the line will make an icon difficult to read and will separate it from the set.
The changed icons look disorderly
Filled icons look neat and harmonious
Use it purposefully. Try not to use icons for decoration — this distracts the user from the main activity. Consider the surrounding context: placed too close, icons generate visual noise and confuse the user.
Icons
Products use icons from a single set in the interface. They are divided into types depending on the purpose. You can download the icon pack using this link or find it in the Figma file of the design system link.
Buildings
Business
Design
Development
Device
Document
Editor
Finance
Health
Logo
Map
Media
System
User
Weather
Other
