- style
Iconography
- Femi
- Guy Hivroni (Unlicensed)
- Carlie Bradshaw
Iconography is the use of images and symbols to visually represent an object. They communicate a message and should be distinct and informative. Icons should be used sparingly throughout the product, to provide clarity and to reduce the cognitive load on users.
Visual design
Sizing
All LUX icons occupy a square artboard at a 32px base. Icons are SVG-based fonts, which allows them to be used at varying sizes depending on their intended usage. For best practice, our base icon size for products is 16X16px. When in need of larger icons 24x24px, 32x32px, and 48x48px are also valid sizes. In extreme cases where a smaller icon is required, 12x12px is also a valid size.
Background
All LUX icons are on a transparent background with the artboard boundaries at the edges of the icon.
Color
Interactive UI icons need to pass the same color contrast ratio as typography at a 4.5:1 ratio, with the exception of when there is sufficient alternative text in use.
UI icons are always a solid color.
The color of the icon should depend on the importance of the icon's action. By default, icon colors are #666666, with the color changed depending on the the current state of the associated component, such as with Icon Buttons. The only exceptions to this rule are status icons, which use the appropriate color for that specific status, as defined in Color.
Resources
Logo
The Verint brand logo is used in the VerinTop, footers, and browser favicons. The optimized Verint logo, and its variants, are available for download in several formats here.
Icons
We offer our icon library as both a Font icon and as an SVG sprite. The choice to use either Font icons or SVG icons should be based on the architectural needs and browser support matrix of the specific Verint application. You can download the source file for the Icon Library directly.
(Icon table creation is in progress…)