Iconography
Guidance for decision making around choosing the correct icon and using it in a way that makes sense.
Last updated
Guidance for decision making around choosing the correct icon and using it in a way that makes sense.
Last updated
When choosing an icon, the following things should be taken into consideration.
The icon should be generalized and not reliant on knowledge of a specific language or region.
The icon should follow established norms for icons of it's type in similar applications.
When the choice deviates from a norm, it should only be done for very good reasons.
Icons should be made distinct enough from others in the UI
Icons should generally have the following size properties:
Icons should be no larger than 24px wide and 24px tall.
Icons that are smaller than 24px in size, should fit within a bounding box that is 24px.
This is generally the approach taken for icon sets like Material and FontAwesome.
Visual weight refers to the amount of prevalence an icon has when looking at it's role in the UI combined with how important the action that icon represents is to the user. When deciding on the visual weight of an icon, the following considerations need to be made.
How unique is the icon in the UI
If there is only 1 instance of this icon in the entire UI, it generally denotes it requiring a higher visual weight. eg. search, data mapper, rich data view.
How important is the action the icon represents
If the action has high importance it should generally be given more weight in the UI, either through, size, colour or containing element settings (eg. size of button, space around button etc.).
