Icon Usage Guideline¶

Icons must first and foremost communicate meaning in a graphical user interface.¶

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 mere eye candy—confusing, frustrating, eye candy—and to visual noise that hinders people from completing a task.

Proposal for when using icons alone¶

Icons alone should only be permitted when at least two out of the following three conditions apply:

• Space is very limited (i.e., too small for text alone).
• The icons are mostly universal recognition from users (e.g., Home, Search, Edit)
• The icon represents an object with a strong physical analog or a visual attribute (e.g., a printer icon to access printer attributes).

Tooltips are required for icons when they are used alone.

Proposal for when using Icon+Label, Label¶

If space allows, icons combined with text is best. Selective use of icons with text makes certain items stand out more or add visual interest. It may also improve the scanability of the items.

As mentioned in the previous page, Icons must first and foremost communicate meaning, if there is an icon that can deliver this meaning, then we will use Icon+Label, if not, use Label alone.

Proposal for how to use Icon¶

• In a button group, it should keep consistent for all buttons with or without icons.
• Not suggest to use icon on the navigation menu ( nav bar, tab ) unless adding the status icons such as warning or error icons.

Proposal for the common icons¶

Please check the attachment.