Use consistent visual language
Icon names should describe the figure; The operational meaning lies in the control label.
Icon Design system
Keep the icon recognizable and meaningful at any size.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
03
Complete the experience
Check for details that are easy to miss when putting the design into use.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
Use consistent visual language
The same “trash” image is labeled “Delete draft” or “Delete member” according to the context.
Variants and use cases
Icon style
Use a line or block system for icons in the same role and on the same screen.
Place the new icon next to the old icon at the same size; The density and space need to be uniform.
Example Mail, video and document buttons use the same 1.6px SVG set.
Size and interaction area
Separate the stroke size from the click area; Small icons still need a suitable touch area.
Try 16px icon in mobile button; The user does not have to precisely touch the stroke.
Example The 18px icon is in the middle of the 44px click area.
Name according to meaning
Name the function clearly and avoid letting users guess the meaning from the drawing.
Screen reader needs to be able to read the action name; Decorative icons do not repeat labels.
Example The bell icon of the button is named "Open notification", the icon next to the text is hidden from the access tree.
Notifications
Account
Search