Design Principle
Icons are not universal language; affordance comes from icon, label, placement, and feedback together.
Principle
Icons are not universal language; affordance comes from icon, label, placement, and feedback together.
Design action
Common low-risk actions may use icon buttons; unfamiliar, risky, or critical actions need text, tooltip, or confirmation state.
Examples
Positive example: Toolbars, card actions, navigation, and editor controls have limited space but important actions. Counterexample: Risky actions use only ambiguous icons.
Apply when
Toolbars, card actions, navigation, and editor controls have limited space but important actions. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/
Agent Directive
Common low-risk actions may use icon buttons; unfamiliar, risky, or critical actions need text, tooltip, or confirmation state.