skip to content

In a design system's icon library, what is a reserved icon with one fixed meaning, and how does the library enforce the reservation?

level: middleimportance: should knowfreq 25%

answer

  1. some icons are controls, not decoration
  2. close, back, help, warning
  3. locked even when it looks right
  4. flag it in the catalogue
  5. check usages automatically

basics

~20 s

A reserved icon is locked to one meaning across every product, such as close, back or warning, because users act on it without reading. The library flags it in its catalogue and docs, offers alternatives, and checks usages in review and automatically.

solid answer

~50 s

Some icons work as **controls users trust without reading**: close, back, help, warning. A **reserved icon** is locked to that one meaning in every product, even where it would be a convenient visual fit for something else. On a museum ticketing kiosk, used by first-time visitors with no training, an X that closes a panel on one screen and removes a ticket from the basket on another can cost someone their selection. The library enforces the reservation in layers: the icon's **catalogue entry** records that it is reserved and for what; its **documentation page** says so and names the alternative for tempting near-misses; search surfaces the reservation; **contribution review** checks new uses; and an **automated check** flags the icon wherever it appears outside the components allowed to use it. The list stays short, because each reservation removes a picture from general use.

code

pseudocode · 8 lines
pseudocode
for each usage in project.iconUsages:
    icon = catalogue.resolve(usage.iconName)   // resolves aliases to the canonical icon
    if icon is none:
        continue                                // unknown names are reported by a separate check
    if icon.reserved and usage.component not in icon.allowedComponents:
        report(usage.location,
               icon.name + ' is reserved for: ' + icon.reservedMeaning
               + '; see alternatives: ' + icon.alternatives)

go deeper

for a junior

Recall what a reserved icon is and name typical ones, such as close, back, help and warning, that must mean the same thing everywhere.

for a middle

Explain why reservation goes beyond one picture per concept, forbidding borrowing even when the picture fits, and why controls used without reading need it.

for a senior

Show layered enforcement, from catalogue metadata and documented alternatives to review and automated checks that resolve aliases, and a short, harm-based list.

for a principal

Weigh reserving more icons for safety against the flexibility teams lose, and decide how exception requests reshape the reservation over time.

## What reservation means Most icons in a library can be reused for any meaning their picture fits; a clock can mark opening hours or a timed-entry slot. A **reserved icon** is the exception: the library locks it to **one fixed meaning** across every product, and forbids other uses even when the picture would fit. The difference from general metaphor consistency is direction. Consistency says each concept gets one picture; reservation adds that this picture may never be borrowed for anything else. ## Which icons get reserved Reservation is for icons that act as **controls or signals users respond to without reading**, where a second meaning causes real harm: | Icon | Its one meaning | Tempting misuse on a museum kiosk | |---|---|---| | X mark | Close or dismiss the current surface | Removing a ticket from the basket | | Back arrow | Return to the previous step | Collapsing an expanded exhibit description | | Question mark | Open help | Marking an optional form field | | Warning triangle | Something needs attention before continuing | Highlighting a special exhibition | ## Why a kiosk raises the stakes A public kiosk is used by people who have **never seen it before**, often in a hurry, sometimes with a queue behind them. They rely on conventions learned elsewhere. If the X on one screen dismisses a panel and on another deletes a selected ticket, a visitor who taps it to get rid of a panel can lose their basket. Reservation turns the convention into a guarantee across every screen and product that draws from the library. ## How the library enforces it A reservation only written in a guideline is forgotten by the next contributor, so libraries enforce it in layers: 1. **Catalogue metadata.** The icon's entry records `reserved`, its one meaning, and which components may use it (for example the dismiss button of dialogs and panels). 2. **Documentation.** The icon's page states the reservation prominently and names the **alternative for each near-miss**, such as a minus or trash picture, with a label, for removing an item. 3. **Search.** Results show the reservation, so a designer sees it before placing the icon. 4. **Naming.** Some systems name reserved icons by their meaning (`close` rather than `x-mark`) to signal the contract; others keep depiction names and rely on the metadata. 5. **Review.** Contribution review checks every new use of a reserved icon. 6. **Automation.** A lint-style check in code, and where tooling allows in design files, flags a reserved icon used outside its allowed components. ## Keeping the list short Every reservation has a cost: it removes a picture from general use and adds a rule to check. A useful test is whether misuse could make a user **lose work, miss a warning or get stuck**. Close, back, help and warning pass it; a decorative sculpture icon does not. A list that grows to dozens of icons stops being read. ## Checking that it holds A reservation is a claim about every product that uses the library, so it deserves periodic verification rather than trust: - run the automated check across all consuming products, not only on new changes, and review what it finds; - count how often teams **request exceptions**, since a rising count means the reservation or its documented alternatives no longer fit real needs; - watch support reports and usability sessions for users who dismissed something they meant to keep, or kept something they meant to dismiss. The same reservation applies on the web, on native mobile and on the kiosk itself, so the check has to cover each platform's usages, not just the one where the rule was first written. ## Handling requests to bend it When a team asks to use a reserved icon for something else, the answer is usually the documented alternative. If many teams need the same exception, that is a signal to **review the reservation deliberately**, perhaps by widening its allowed components, rather than letting each team bypass it quietly.

  • A kiosk team wants the reserved close icon for removing a ticket from the basket. What do you tell them?
    Point them to the documented alternative for removal, such as a minus or trash picture with a visible label, and explain that the X must always mean dismiss so nobody loses a selection by closing a panel. If many teams hit the same need, review the reservation's scope openly rather than granting silent exceptions.
  • Why keep the list of reserved icons short?
    Each reservation takes a picture out of general use and adds a rule everyone must remember and tooling must check. Reserve only icons whose misuse can make users lose work, miss a warning or get stuck, such as close, back, help and warning; a long list stops being read.

saying these in an interview costs you the question

  • Reserved icons are simply the most frequently used icons.
  • A guideline sentence is enough to enforce a reservation.
  • A reserved icon may be reused whenever the label makes it clear.
  • Every icon should be reserved to exactly one meaning.
  • Reservations only matter in design files, not in code.