Interface Icons and Cognitive Semiotics: How Resemblance, Exemplars, Symbols, and Conventions Bridge Understanding

Key Takeaway (TL;DR)
Icons are the most compact and efficient visual language in graphical user interfaces (GUIs), enabling recognition of functions within seconds, faster learning, and substantial space savings within a few pixels. However, drawing a graphic does not mean users will naturally understand it. Cognitive semiotics and ergonomics distinguish four paradigms for mapping images to concepts: resemblance icons, which directly depict; exemplar icons, which extract a representative object; symbolic icons, which invoke metaphorical meaning; and arbitrary icons, which depend on shared conventions. JVDS advocates an engineering approach to icons in enterprise software and mobile UI/UX design that places semantics before pixels and retains labels as a safeguard, ending abstract pseudo-minimalism that makes users solve riddles.

1. Four Steps in Cognitive Semiotics: From Physical Appearance to Abstract Convention

In an era of severely limited screen space, a small 24 × 24 pt icon must replace lengthy verbal explanations. But if it disconnects from the mind's mechanisms for decoding signs, it instantly becomes an indescribable speck of visual noise.

1.1 C. S. Peirce and the Evolution of Modern Interfaces

Modern human–computer interaction definitions of icon representation are deeply rooted in the classical framework of semiotics:

[Four Paradigms of Icon Decoding]

Resemblance: recognize the object from its image → Exemplar: infer the whole from a part → Symbolic: derive meaning from culture → Arbitrary: establish rules through convention

2. Four Forms of Image Representation and Their Practical Interface Uses

2.1 Resemblance Icons: A Direct Pixel Mirror of Physical Appearance

• Core Mechanism: What is drawn is what is meant. The graphic closely reproduces the geometric outline of the physical object or action it represents.
• Classic Examples: A realistically bending line on a road sign represents a sharp bend ahead, and a rock falling down a slope represents falling-rock danger. In software, a loudspeaker represents audio playback.
• Inherent Limitation: It can express only highly concrete physical entities. Resemblance icons become powerless when confronted with advanced abstract logic such as permission inheritance, data masking, or system throughput.

2.2 Exemplar Icons: Anchoring a Large System in a Concrete Part

• Core Mechanism: When a concept is too broad or diverse to show completely, choose one or two of its most typical and representative objects to act as spokespeople for the entire category.
• Classic Examples:
• A flying aircraft represents a large, complex international airport.
• A pair of scissors represents cutting and text-editing operations in a digital environment.
• A knife, fork, and spoon represent the broad category of dining and food.
• Design Trap: The representative object must be broadly recognizable. If a dining icon depicts a traditional Chinese bronze ding vessel, international users may interpret it as an antiquities museum, even though the object is a ceremonial cooking vessel.

2.3 Symbolic Icons: Drawing on Well-Established Cultural Metaphors

• Core Mechanism: The image bears no direct visual resemblance to the underlying physical reality. Instead, it draws on deep metaphors shaped by centuries or millennia of cultural history.
• Classic Examples:
• A medieval iron padlock represents an operating system's locked or unlocked state, even though a modern server room uses a virtual 256-bit RSA public-key encryption algorithm.
• A zigzag lightning bolt represents electricity and high-voltage danger.
• A cracked stemmed glass represents fragile goods that require careful handling in logistics.
• A Critical Ambiguity: Does it show the current state or the action performed by clicking? Does a button depicting an open padlock mean the system is already unlocked, or that clicking will unlock it? Without a clear accompanying text label, this single symbolic sign can easily produce the opposite interpretation of the intended operation.

2.4 Arbitrary or Conventional Icons: Shared Social Agreements

• Core Mechanism: The graphic has no physical resemblance to what it represents and relies entirely on conventions established through long-term standardized education or imposed by national law.
• Classic Examples:
• The zigzag resistor symbol in electrical schematics.
• The radiation trefoil used in biochemistry and the nuclear industry.
• The familiar magnifying glass for search, gear for system preferences, and three-line hamburger for collapsing main navigation in modern software.
• An Extremely Dangerous Misconception: Do not attempt to invent a brand-new conventional icon for the general public on your own. Unless you can spend 30 years educating hundreds of millions of users, replacing “save” with a peculiar symbol of your own invention will simply make users think the system has a bug.

3. A Comparison Matrix for Icon Design Elements

Modern commercial design systems and mobile app development require a rigorous hierarchy of icon assets:

4. JVDS's Engineering Method for Icon Systems

In high-end corporate website branding and complex-system UI/UX design, JVDS follows three firm principles: semantics first, consistent style, and protective labels.

[JVDS Icon Cognition Engineering Funnel]

Anchor intended meaning → Select the appropriate representation paradigm → Standardize the global visual baseline → Review isolated, unlabeled icon usability

• Icon-Label Pairing Standard: The JVDS design system firmly rejects indiscriminate, text-free icon minimalism. Except for a very small number of globally recognized signs such as search and delete, every complex enterprise business entry point binds the icon tightly to a text label in component code. For example, an explicit 12 px label must accompany the icon on its right or below it. This combines the visual locating advantage of graphics with the precise certainty of language.
• Unified Pixel Grid and Stroke Weight: We eliminate the amateur inconsistency of conflicting icon styles within one interface. The JVDS library is built on a unified 24 × 24 pt engineering artboard with 2 px safety padding. Consistent 1.5 px or 2.0 px strokes, matching chamfer and corner curvature, and identical perspective angles ensure that thousands of business icons look as coherent as if they came from one metal mold, regardless of their arrangement.
• The Icon De-contextualization Test: Before finalizing a new icon, the JVDS team removes it completely from its original page and presents it on white paper to 20 target-industry customers. We ask two questions: “What do you think this is at first glance? If it were a button, what would you expect to happen when you clicked it?” Any proposal with a correct decoding rate below 80% is immediately rejected and rebuilt; flawed icons must not go live.

5. Frequently Asked Questions

Q1: Is it really unacceptable to omit labels beneath icons when a mobile interface is extremely crowded?

In the vast majority of cases, yes: doing so typically sacrifices usability for 50% of users. Real redesign data from numerous e-commerce and SaaS products shows that when teams confidently remove bottom-navigation labels and leave only four supposedly attractive icons, click-through to core functions drops by 30%–45%. If space is genuinely insufficient, the sound approach is to optimize spacing and remove meaningless decoration. Text labels, the only definitive semantic safeguard, should not be casually discarded.

Q2: Should an icon set use outlined or filled icons?

It depends on the role within the interaction state machine. The industry's most mature approach combines static and active treatments. Use elegant, lightweight outlined icons in the default, unselected state to preserve openness and reduce visual interference. When a module becomes active, selected, or hovered, a brief micro-animation transforms the icon into a solid, filled form. The immediate increase in visual weight communicates the selected state with exceptional clarity.

Q3: How can we distinguish a high-quality, industrial-grade icon library from a poorly made one?

Inspect rendering at extreme sizes and the balance of visual area and center of gravity. Reduce icons to 16 × 16 pt or even 12 × 12 pt. Check whether line junctions become blurry and whether details merge into a solid black mass. Also examine a row of icons to see whether circular icons and narrow arrows feel unevenly weighted. A professional library must incorporate rigorous optical balance at its source. Explore the JVDS team's design portfolio for fully in-house icon systems that combine mathematical rigor with commercial visual quality.