UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Icon Text Affordance Balance

Icon Text Affordance Balance turns a frequent interface judgment into an executable constraint before generation.

iconsaffordancecontrols

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.

Agent Directive

Common low-risk actions may use icon buttons; unfamiliar, risky, or critical actions need text, tooltip, or confirmation state.

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.

Avoid

  • Risky actions use only ambiguous icons.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Visual Foundations
Quality
84%
Version
v1
Published
6/6/2026