Use the smallest representation that remains unambiguous.
There is no useful global percentage for icon versus text. The decision depends on familiarity, ambiguity, consequence, frequency, and audience breadth.10
Evaluate a control
The current profile asks the icon to carry more meaning than it should.
- Multiple plausible interpretations
- Only occasional exposure
- Error interrupts the user’s work
Icon-only candidate
High familiarity, one dominant interpretation, frequent use, and low consequence. Still provide an accessible name and adequate target size.
Persistent label recommended
The default for navigation and commands with moderate ambiguity, occasional use, or broad audiences.
Text and confirmation required
Use for destructive, legal, financial, healthcare, security, or safety-critical operations.
Familiar geometry can still carry competing meanings.
Visual comprehension depends on context, learned convention, optical clarity, and state—not merely whether the viewer recognizes the drawing.
One glyph, four meanings
The “X” is familiar. Its intended operation is not.
Label presence changes precision
Persistent text resolves consequence and scope.
Optical size is not mechanical scaling
Small icons need simpler interiors and stronger negative space.
State must be more than decoration
Filled and outline forms need a stable semantic role.
A bicycle works because the shape resembles a bicycle.
The floppy disk survives because “save” was repeatedly learned.
An airplane inside an airport has a narrower interpretation.
Text carries precision when the symbol cannot do so safely.
International standards divide the problem by domain.
There is no single universal application-icon standard. Public information, safety, equipment, diagrams, and accessibility have distinct semantic contracts.
Registered public-information symbols. Use as semantic reference and add text where comprehension improves.1
Safety symbols, colors, shapes, and construction rules. Enclosure and color are part of the meaning, not decoration.2
Formal symbol-evaluation methods. Design review alone does not establish comprehension.
Symbols function as a technical visual language. Changing geometry can change system meaning.5
Enclosure
The triangle signals a warning category before the internal pictogram is interpreted.
Color system
Color reinforces category. It must not become the only communication channel.
Internal symbol
The pictogram identifies the specific hazard or required behavior.
Context and text
Placement, jurisdiction, language, and supporting instructions complete the operational message.
Language-free does not mean culture-free.
Objects, gestures, reading direction, education, local regulation, and platform exposure shape interpretation.
“i,” “P,” “B,” “CC,” and acronyms may require locale variants.
Back may mirror. Compass direction, maps, and measured data usually do not.
Mailboxes, carts, plugs, phones, houses, and payment objects vary.
Thumbs-up, OK, pointing, and beckoning can change meaning.
Name the function, not the drawing.
A visually understandable icon can still fail assistive technology, voice control, contrast, or pointer-target requirements.6
Use an accessible name such as Delete report, not Trash can icon.
When visible text carries the complete meaning, hide redundant SVG geometry from assistive technology.
The accessible name should contain the visible wording so voice-control users can speak what they see.7
Meaningful graphic objects generally need sufficient contrast against adjacent colors.
A 20px glyph can sit inside a 44–48px interaction target. Glyph size and target size are separate decisions.8
Do not distinguish status only through color, fill, or a one-pixel stroke change.
<button type="button" aria-label="Delete report">
<svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
</button>
<button type="button">
<svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
Delete report
</button>Use three formal symbol tests plus task validation.
Measure whether users can perceive the symbol, infer its meaning, associate it with the intended concept, and successfully use it in context.
Can users identify the visual parts at the intended size, contrast, and distance?
What meaning do users infer without a label or multiple-choice prompt?
Can users connect the symbol to the intended referent or operation?
Does the symbol improve completion, speed, confidence, and error recovery?
| Metric | What it reveals | Failure mode |
|---|---|---|
| Unprompted comprehension | Actual inferred meaning | Multiple-choice inflation |
| Recognition time | Cognitive effort | Technically correct but slow |
| Confidence | Hidden uncertainty | Guessing that appears accurate |
| Confusion pair | Competing interpretations | Upload/download or hide/show reversal |
| Task completion | Operational usefulness | Recognition without successful action |
| Label dependency | Whether icon-only is defensible | Removing text before evidence supports it |
Separate meaning, geometry, and platform delivery.
A standard catalog is not yet a design-system library. Production systems need stable semantic IDs, canonical geometry, variants, localization, accessibility, and versioned components.
Authorities, domain conventions, and regulatory constraints.
Stable concept IDs, aliases, risk, text policy, and locale behavior.
Keylines, optical center, stroke grammar, and minimum detail.
Small-size, filled, selected, high-contrast, and RTL forms.
Typed APIs, accessible defaults, localization, and telemetry.
Draw for the optical result—not only the mathematical box.
Keylines create family resemblance. Optical correction preserves apparent weight, centering, and negative space at actual interface sizes.
Defines family scale and prevents individual glyphs from feeling arbitrarily large or small.
May differ from the geometric center because top-heavy and bottom-heavy shapes are perceived differently.
Small sizes often need wider openings and fewer interior details than a mechanically scaled master.
Review at target sizes and device densities. The vector outline is not the final perceptual result.
interface IconDefinition {
id: string;
concept: string;
function: "action" | "object" | "state" | "navigation";
aliases: string[];
forbiddenMeanings?: string[];
labelKey: string;
accessibleNameKey: string;
directionBehavior:
| "fixed"
| "mirror-in-rtl"
| "locale-variant"
| "content-dependent";
risk: "low" | "moderate" | "high" | "safety-critical";
textPolicy:
| "icon-only-allowed"
| "label-recommended"
| "label-required";
}Choose by semantic fit—not collection size.
Each library carries a visual dialect, platform assumption, and domain vocabulary. Compare candidates using the same dimensions.
One semantic concept can be rendered in several visual languages.
Stroke, corner, fill, and layering can change without changing the semantic ID. The product contract should remain stable.
Low coupling and easy CSS inheritance.
Softer terminals and containers create a friendlier dialect.
Higher visual mass can signal selection or platform convention.
Useful for hierarchy, but requires explicit theme and contrast behavior.
action.archivelabel-recommended · fixedvendor or custom geometry| Library | Semantic coverage | Optical sizing | RTL / localization | Platform coupling | Best fit |
|---|---|---|---|---|---|
| Material Symbols | Variable optical-size axis | Directional handling depends on implementation | Moderate Google visual dialect | Broad cross-platform product UI9 | |
| SF Symbols | Deep typographic integration | Strong directional and localized variants | High Apple platform coupling | Native Apple products11 | |
| Fluent Icons | Multiple families and sizes | Requires product-level policy | Moderate Microsoft dialect | Productivity and enterprise workflows | |
| Carbon Icons | Explicit optimized sizes | Product-level policy required | Moderate IBM dialect | Data, infrastructure, and enterprise systems12 | |
| Lucide | Primarily stroke scaling | Manual semantic policy | Low | Neutral SVG-first interfaces | |
| Phosphor | Multiple weights, not full optical masters | Manual semantic policy | Low | Flexible branded interfaces |
Expose a semantic icon platform.
Vendor glyph names are implementation details. Product code should depend on stable concepts and governed behavior.
Standards-controlled layer
Safety, public-information, equipment, electrical, and regulated symbols. Preserve authority and reference metadata.
Shared product vocabulary
Stable semantic concepts used across products and platforms.
action.delete · navigation.back · state.warningDomain extensions
Controlled packages for specialized concepts while preserving the same registry and governance model.
// Avoid binding product meaning to a vendor glyph.
<Trash2 />
// Prefer a stable semantic contract.
<ProductIcon
name="action.delete"
size="sm"
label={t("actions.delete")}
/>Treat every icon as a semantic API.
A contribution needs meaning, constraints, localization behavior, evidence, ownership, and lifecycle—not only an SVG.
Intended meaning, aliases, and prohibited meanings.
Whether icon-only is allowed, discouraged, or prohibited.
Accessible-name recommendations and decorative behavior.
RTL mirroring, locale variants, and embedded-text review.
Keylines, optical sizes, selected state, and high contrast.
Testing results, owner, version, and deprecation replacement.
Meaning, prohibited uses, risk, and text policy are explicit.
Keylines, optical sizes, contrast, themes, and platform parity pass.
Representative users confirm comprehension and confusion pairs.
Errors, reversals, tooltip use, and label dependency remain observable.
Bounds, view box, complexity, duplicate geometry, contrast, and missing metadata.
Culture, gestures, safety, confusion pairs, trademarks, and sensitive associations.
Deprecate semantic IDs deliberately and publish replacements.
Monitor errors, tooltips, reversals, and label dependency after release.
Use precise terms for precise responsibilities.
Identity, action, status, and instruction are different semantic contracts.
| Term | Primary role | Example |
|---|---|---|
| Glyph | A rendered visual form | A specific SVG path |
| Icon | Represents an action, object, state, or concept | Search, upload, filter |
| Pictogram | Depicts a concept through simplified imagery | Restroom, baggage claim |
| Symbol | Carries formally or conventionally assigned meaning | Power, radiation, grounding |
| Sign | Combines symbol, color, enclosure, placement, and context | Emergency exit sign |
| Mark | Identifies an organization, product, or brand | A corporate mark |
| Indicator | Communicates status rather than action | Connectivity state |
Claim-level traceability and authoritative sources.
Inline markers connect high-value claims to the references below. Formal requirements should always be verified against the applicable edition, jurisdiction, and license.