Icons

There are various kinds of icon-usage throughout the eFlex application: button icons, data grid icons, help and information icons, configuration and editing icons, alert and warning icons, action icons, task icons, location icons, cursor icons, status icons, and so forth.

The primary goal of using icons should be to help the user absorb and process information more efficiently. Icons can provide a lot of visual information in a compact space. They enrich even minimal content by giving it more substance, enabling effective communication without wordiness. Combined with labels (e.g. with buttons, or listings) they are even more descriptive and enriching. They can be used to offset or introduce headings and sections.

Icons should be common and/or easily recognizable. They should reflect their content. A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are often necessary to communicate the meaning and reduce ambiguity. Icons are, by definition, a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to users, the icon is reduced to visual noise that hinders people from efficiently completing a task.

Icons make good targets: they are typically sized large enough to be easily touched in a finger-operated UI, but also work well with a mouse cursor.

Icons can be compact enough to allow toolbars, palettes, and so on to display many icons in a relatively small space.

Icons are fast to recognize at a glance—particularly true for standard icons that people have seen and used before. However, there are few icons that enjoy mostly universal recognition from users. The icons for home, print, and the magnifying glass for search are such instances. Outside of these examples, most icons continue to be ambiguous to users due to their association with different meanings across various interfaces. This is particularly true with icons from commonly used libraries such as Font Awesome, where the same icons are used for various purposes by different designers. The 3-line hamburger icon and 3-stacked dot icons are examples of an icon that is striving to become universally known.

Custom, well-designed icons should be a first choice in implementing icons, saving Font Awesome only when non-designers need an icon in a pinch.

Custom Icon Library