UI Concepts Framework · CHAPTER 7 OF 8
The iconography system
Step 7 Define the Iconography System
Icons Support Faster Understanding
Icons may be small interface elements, but they play an important role in how users understand and navigate the software.
They help users recognise actions, identify sections, and scan information without reading every label.
Icons Support Faster Understanding
Icons may be small interface elements, but they play an important role in how users understand and navigate the software.
They help users recognise actions, identify sections, and scan information without reading every label.
Icons Also Shape the Visual Experience
Icons Also Shape the Visual Experience
Match Iconography to the UI Concept
Match Iconography to the UI Concept
Choose Icon Styles Based on the UI Concept
Choose Icon Styles Based on the UI Concept
Example
Example
Two Icon Styles for Two Purposes
Two Icon Styles for Two Purposes
Style Difference Should Still Feel Consistent
Style Difference Should Still Feel Consistent
Choose Icons Based on Context and Clarity
Icons should match where they are used and remain easy to understand.
An Attractive Icon Can Still Be Confusing
Choose Icons Based on Context and Clarity
Icons should match where they are used and remain easy to understand.
An Attractive Icon Can Still Be Confusing
Use Animated Icons With Purpose
Animated icons should do more than make the interface feel dynamic. Use motion when it helps users understand information faster.
Communicate actions clearly
Show system feedback
Reinforce interactions
Clarify state changes
Make interactions intuitive
Communicate actions clearly
Show system feedback
Reinforce interactions
Clarify state changes
Make interactions intuitive
Use Animated Icons With Purpose
Animated icons should do more than make the interface feel dynamic. Use motion when it helps users understand information faster. Communicate actions clearly
Show system feedback
Reinforce interactions
Clarify state changes
Make interactions intuitive
Communicate actions clearly
Show system feedback
Reinforce interactions
Clarify state changes
Make interactions intuitive
Pair Unfamiliar Icons With Labels
Do Not Depend on the Icon Alone
For actions that are uncommon, technical, or specific to the software, pair the icon with a clear text label.
This reduces ambiguity and helps users learn the action.
File Settings
Pair Unfamiliar Icons With Labels
Do Not Depend on the Icon Alone
For actions that are uncommon, technical, or specific to the software, pair the icon with a clear text label.
This reduces ambiguity and helps users learn the action.
File Settings
Iconography Checklist
The Final Check Before moving to next process
Before finalising confirm:
Does the icon style match the UI concept?
Does it support the brand persona?
Are common actions immediately recognisable?
Are the icons visually consistent?
Are unfamiliar actions paired with labels?
Have the icons been tested inside real screens?
The Final Check Before moving to next process
Final Step 7 Takeaway
Icons Should Improve Recognition Without Adding Confusion
Choose icon styles that support functionality, brand personality, visual consistency, and the context in which they will be used.
Final Step 7 Takeaway
Icons Should Improve Recognition Without Adding Confusion
Choose icon styles that support functionality, brand personality, visual consistency, and the context in which they will be used.