Iconic Arbitrary And Symbolic

---
name: iconic-arbitrary-and-symbolic
description: "Apply arbitrary and symbolic icon design — using forms with no inherent meaning that depend on convention to communicate (the hamburger menu, the kebab menu, the AI sparkle, app brand-mark icons). Use when a function has no clear visual referent, when working within a domain that has its own icon vocabulary, when establishing or following a convention, or when evaluating whether a convention is strong enough to support icon-only treatment. Arbitrary icons require prior learning to work; the skill is calibrating when to follow a convention vs. when to label."
category: frontend-and-design
source_repo: hashgraph-online/awesome-codex-plugins
source_path: "plugins/HDeibler/universal-design-principles/plugins/cognition-and-learnability-principles/skills/iconic-arbitrary-and-symbolic/SKILL.md"
source_url: https://github.com/hashgraph-online/awesome-codex-plugins/blob/HEAD/plugins/HDeibler/universal-design-principles/plugins/cognition-and-learnability-principles/skills/iconic-arbitrary-and-symbolic/SKILL.md
---


# Iconic Representation — arbitrary and symbolic

Arbitrary icons have no inherent connection to what they represent. The hamburger menu (three horizontal lines) doesn't look like a menu in any physical sense. The kebab menu (three vertical dots) doesn't look like options. The "@" symbol for email doesn't depict email. These icons work only because users have learned the convention through repeated exposure.

This is the most fragile form of iconic representation. New users don't recognize arbitrary icons. The icons depend entirely on convention strength, which varies by domain, by audience, and over time.

But arbitrary icons also have an unmatched advantage: they can compress meaning into a single recognizable form for functions that have no good visual referent. "More options" has no physical analog; the kebab menu fills that gap. "AI assistance" has no physical analog; the sparkle is filling that gap.

## How arbitrary icons gain meaning

An arbitrary icon becomes recognizable only through accumulated exposure. The mechanism:

1. A few influential products use a particular form for a particular function.
2. Other products copy the convention.
3. Users encounter the form in many places associated with the same function.
4. Eventually, users recognize the form on sight, even in products they haven't seen before.

This is convention-formation. It usually takes years. The hamburger menu, for example, was used in some interfaces in the late 2000s, became more common around 2010–2012, and was a near-universal mobile convention by 2015. The kebab menu followed a similar trajectory a few years later.

Some conventions never make it. Many proposed icons are tried, fail to spread beyond the originating product, and remain opaque to users from other products. The convention-formation process is genuinely contingent — designers can't reliably predict which forms will become universal.

## When arbitrary icons work

Arbitrary icons work when:

**The audience has been exposed to the convention.** A mobile-app user from 2025 recognizes the hamburger menu, the kebab menu, the sparkle for AI. A user from 2010 might not. A user who's never used software might not recognize any of them.

**The function doesn't have a strong visual referent.** "More options," "menu," "AI features," "share" — none of these have obvious physical referents. Arbitrary icons fill the vocabulary gap.

**The icon is reinforced by usage.** Users learn arbitrary icons through repetition. An arbitrary icon used in a single place in your product is harder to learn than one used in a consistent role across the product.

**The icon is supported by context.** Even arbitrary icons gain interpretability from where they appear. A kebab in the corner of a list item is more clearly "actions for this item" than the same kebab in an unexpected location.

## When arbitrary icons fail

Arbitrary icons fail when:

**The audience hasn't seen the convention before.** Domain-specific icons (a "diff" icon in developer tools) for a non-developer audience. Recent conventions (the AI sparkle, in 2024) for users who haven't used current AI tools.

**Multiple competing conventions exist.** The "share" icon has different forms on Apple and Android platforms; users from one platform may not recognize the other's icon. Without label, the icon is ambiguous.

**The icon is one of many similar arbitrary forms.** A toolbar with the hamburger menu, the kebab menu, the bento menu (3×3 dots), and the meatballs menu (three horizontal dots) — all variations on "menu" that users are expected to distinguish. Conventions have to be sharply different to coexist.

**The convention is changing or fading.** Conventions stabilize over time but also drift. Users in transition periods may have trouble.

**You invent your own arbitrary icon.** A custom icon designed for your product without external precedent. Users have no convention to draw on; recognition is essentially zero. Without significant onboarding, the icon doesn't communicate.

## Working with established conventions

When a convention exists for the function you need, the safe path is to use the established form even if you have a design opinion. The icon's recognizability comes from convention strength, not from intrinsic merit. A custom "share" icon, however well-designed, doesn't have the convention strength of the platform-native share icon.

The exceptions:

- **The convention is dying.** The floppy disk for save is increasingly anachronistic. Reaching for it because it's "the convention" may not serve users who don't recognize the source.
- **The convention conflicts with a stronger one.** If your product's brand uses a specific iconographic language, forcing in an external convention may break the visual coherence. In these cases, label the icon to compensate.
- **You're operating in a domain with a stronger convention.** Some domains have icon vocabularies more specific than the generic UI conventions.

## When to invent vs. when to label

When a function needs an icon and no established convention exists, the choice is between inventing a custom icon (risky for recognition) and using a text label (safe but less compact).

**Use text:** for any infrequent function, any function where misclick is costly, any function where the audience varies in sophistication.

**Use a custom icon (with paired label):** when space is tight and the function is used frequently enough for users to learn through repetition. Pairing with a label lets the icon develop convention strength gradually while supporting recognition immediately.

**Use a custom icon alone:** essentially never, unless you're reproducing an existing convention from a related context. Inventing a new arbitrary icon for icon-only use is almost always a mistake.

## Working with new conventions

Some functions are too new to have established conventions yet. AI assistance is the current canonical example: dozens of products are introducing AI-powered features simultaneously, and a convention is still stabilizing. Currently:

- The sparkle (often a four-pointed star or stylized starburst) is the most common.
- Some products use a chat-bubble variant.
- Some use a brain icon.
- Some use a robot or "bot" icon.
- Some use a wand or magic-wand icon.

None of these has reached the convention strength of the hamburger menu. Users may or may not recognize each, and the recognition rates vary by audience.

The pragmatic guidance: pick the most-common convention for your audience, pair with a label when first introducing it, and pay attention as the convention stabilizes. Be ready to update your icon if a different form wins.

## Worked examples

### The hamburger menu

A canonical arbitrary icon. Three horizontal lines. No physical referent. Works because by 2020 it had become the dominant convention for "main menu" on mobile and was widely recognized. Now near-universal in mobile UIs.

The icon's success is due to convention spread: many influential products (Facebook, Google, the major mobile platforms) used it consistently for years, training users to recognize it.

### The kebab menu

Three vertical dots. Even more arbitrary than the hamburger. Now the dominant convention for "more actions on this item." Spreads through modern mobile and web UIs.

The kebab and the hamburger are both arbitrary, both used for menu-like functions, and now broadly distinguishable: the hamburger is "main menu" (often top-level navigation); the kebab is "more options for this thing" (often per-item actions).

### The share icon (split convention)

Apple and Android use different conventions for "share." Apple uses an upward-pointing arrow exiting a box. Android uses a graph of three dots connected by lines.

Users familiar with one platform may not recognize the other's icon. Cross-platform products often use the platform-native version on each platform; web products typically pick one (often Apple's, given its visibility) and pair with a label.

### The AI sparkle

A four-pointed star or stylized burst. Currently coalescing as the convention for "AI feature" or "AI-generated content." Recognition rates are growing but vary by audience. Pairing with a label is still wise as of 2026.

If the convention solidifies, the sparkle may become a recognized icon on its own. If something else (a different form, a text label) wins, the sparkle will fade. Convention formation is uncertain.

### A custom-invented icon for a specialized function

A productivity tool invents a custom icon for "rebuild dependency graph" — a unique geometric form combining a network diagram and a refresh symbol. Users have never seen the convention; recognition is essentially 0%. The icon communicates nothing.

The fix: use a text label, or use a more conventional icon (a refresh arrow alone, with a label). Inventing arbitrary icons rarely works.

## Anti-patterns

**Using arbitrary icons icon-only without convention support.** Icons that depend on convention shouldn't be label-free unless the convention is strong in the audience.

**Inventing new arbitrary icons.** Designers occasionally try to introduce a new form for a common function. Even well-designed custom icons rarely spread beyond the originating product.

**Mixing many arbitrary icons that look similar.** Hamburger, kebab, bento, meatballs — all "menu" variants. Using more than one in a single product usually confuses users.

**Convention-following that ignores audience.** Following a developer-tool convention in a non-developer product. The convention exists but not in your audience.

**Convention-leading without authority.** Trying to introduce a new convention requires either market dominance (so other products will copy) or an industry standards body. Most products lack both.

**Treating an established convention as if it weren't established.** Adding a label to the magnifying glass for "search" because "we don't want to assume." Sometimes the convention really is universal enough that the label is redundant. Audit your audience's actual recognition rates.

## Heuristic checklist

For each arbitrary icon, ask: **Is the convention established in my audience?** Test if uncertain. **Are there competing conventions?** If yes, pair with label or pick the one your audience knows. **Can users distinguish this icon from other arbitrary icons in my product?** If similar arbitrary icons coexist, the recognition cost rises sharply. **Is the convention stable, or in flux?** If in flux, label and revisit. **Am I tempted to invent a new arbitrary icon?** Almost always, the answer is "use text instead."

## Related sub-skills

- `iconic-representation` — parent principle on icon-based communication.
- `iconic-resemblance` — sibling skill on similar icons.
- `consistency-external` — convention strength comes from external consistency.
- `mapping-cultural` — arbitrary icons are an extreme case of cultural mapping.
- `recognition-over-recall` — once learned, arbitrary icons are recognized; before learning, they're invisible.

## See also

- `references/convention-strength.md` — how to evaluate convention strength and when to depend on it.

---

**Source:** [`hashgraph-online/awesome-codex-plugins`](https://github.com/hashgraph-online/awesome-codex-plugins) → `plugins/HDeibler/universal-design-principles/plugins/cognition-and-learnability-principles/skills/iconic-arbitrary-and-symbolic/SKILL.md`