Menu

Individual skill

iconic-representation

Apply iconic representation — using simplified visual symbols to communicate function, status, or category at a glance. Use when designing icon sets, choosing between icon and text labels, evaluating whether to lean on existing iconography (resemblance to a known object) or invent symbolic icons (arbitrary forms with assigned meanings), or auditing whether your icons are actually communicating. Three kinds: similar (icons that look like what they represent), example (icons that depict an object associated with the function), and arbitrary/symbolic (forms with no inherent meaning, like the hamburger menu).

plugins/HDeibler/universal-design-principles/plugins/cognition-and-learnability-principles/skills/iconic-representation/SKILL.md

Read pinned source

Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
1,532
Repository last updated
Nov 6, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Iconic Representation

> **Definition.** Iconic representation is the use of small visual symbols — pictograms, glyphs, signs — to convey meaning quickly and within limited space. Icons can communicate at a glance what would otherwise require text, support cross-language recognition, and create visual hierarchy by giving important elements a distinct visual identity. The skill is choosing icons that actually communicate to your audience, rather than icons that look meaningful but require explanation.

The classic taxonomy distinguishes three kinds of iconic representation, in roughly decreasing order of inherent recognizability.

**Similar icons.** The icon visually resembles what it represents. A camera icon for "take photo." A clock icon for "time." A magnifying glass for "search" (a bit of a stretch, but the metaphor is "looking closely"). Similar icons are easiest for new users because the visual reference does most of the work. They require minimal learning.

**Example icons.** The icon depicts an object associated with the function rather than the function itself. A hamburger icon for "menu" (the visual is three horizontal lines that resemble stacked menu items, not the menu itself). A floppy disk for "save" (the visual is the storage medium, not the action of saving). A pencil for "edit" (the tool, not the editing). Example icons require some inference from object to function, and that inference is often cultural rather than universal.

**Arbitrary or symbolic icons.** The icon has no inherent connection to its meaning; the meaning is assigned by convention. The kebab menu (three vertical dots) for "more options." The "@" symbol for email. Specific app-store icons. These work only because users have been trained to recognize them; without prior exposure, they communicate nothing.

## Why iconic representation matters