hashgraph-online Iconic Representation — resemblance
Resemblant icons are those that visually look like what they represent. A camera icon for "take photo" — the shape literally depicts a camera. A clock icon for "time" — the shape depicts a clock. A folder icon for "folder" — the shape depicts a manila folder. The user understands what the icon means because it looks like the thing.
This is the strongest form of icon recognition because it requires no prior learning. A user who has never seen the icon before but who has seen a camera in real life can interpret the camera icon. The work is done by the resemblance itself.
When resemblance works
Resemblance works when:
The function or concept has a clear visual referent. Camera (take photo), clock (time), envelope (email), magnifying glass (search/look closer), lock (security/private), trash can (delete), pencil (edit), calendar (date/schedule), star (favorite/rating), heart (like/love).
The referent object is universally familiar. A camera is recognized worldwide. A clock is recognized worldwide. A trash can is recognized in most cultures (with regional variations in shape). A envelope is recognized in cultures that have postal systems.
The icon's level of abstraction matches the audience. A photorealistic camera works for very literal contexts. A simple silhouetted camera works for general UI. A highly abstracted geometric "camera" may need to be tested to verify it still reads as a camera.
The space allows enough detail to be recognizable. A camera icon needs enough detail (the body, the lens, perhaps a viewfinder or shutter) to be identifiable. At very small sizes, detail is lost and the icon becomes a generic blob.
When resemblance fails
Resemblant icons fail when:
The function has no visual referent. "Reset password," "compare versions," "advanced filters," "permissions." These abstract operations don't depict anything physical. Inventing an icon (a circular arrow for reset, two overlapping shapes for compare) becomes example-based or symbolic rather than truly resemblant, and recognition rates drop.
The referent isn't familiar to the audience. A telegraph-machine icon for "send fast." A rotary-phone icon for "call." A typewriter for "writing." These references don't transfer to audiences who've never encountered the source.
The icon is too abstracted to read. A "camera" rendered as just two concentric circles might still be a camera to the designer who knows the lineage, but to a fresh user it's just two circles. Test for the threshold of recognizability.
The icon is visually similar to other icons. A camera and a video camera. A folder and a closed envelope. A pencil and a pen. When two functions have visually similar referents, the icons risk being confused.
The function is too specific for a general icon. "Take HDR photo" doesn't have a distinct visual referent — both HDR and non-HDR photos use a camera. Resemblance bottoms out at the camera; further specificity requires text or a secondary symbol.
Designing resemblant icons
When you're designing a new resemblant icon, a few practices help.
Pick the most identifying features of the referent. A camera is identifiable by its body and lens — that's enough. Don't add a strap, a shutter button, an SD card slot. Each addition is detail that the user has to parse without adding recognition.
Stylize but stay readable. The icon should be simplified enough to render clearly at icon sizes (16px–32px typical), but retain enough features to be unmistakable. Test at the actual rendering size, not just the design canvas.
Use silhouette over rendering. A silhouette of a camera is more readable at icon sizes than a detailed perspective rendering. Silhouettes scale down better and read more quickly.
Consider the line weight of your icon set. A camera icon outlined at 1.5px weight should match other icons in your set. Mismatched weights make icons look like they came from different libraries.
Test with users. Show the icon at the rendering size, alongside other icons from your set, with no label. Ask users what they think it means. Anything below 80% recognition needs work or needs a label.
Worked examples
A camera icon
A standard convention: a rounded rectangle (the camera body), a circle in the middle (the lens), a small square or dot at the top-left (the viewfinder or flash). Recognized worldwide. Works at sizes from 16px upward.
Variants: a movie camera (with film reels on top, recognized as "video"), a film camera (with the film canister visible), a phone camera (with phone outline). Each conveys a more specific subtype.
A clock icon
A standard convention: a circle with two hands (one short, one long) pointing at angles. Recognized worldwide. Works at very small sizes because the silhouette is distinctive.
Variants: digital clock (rectangular with numeric digits), stopwatch (with crown and start button), alarm clock (with bells on top). Each conveys a more specific function.
A lock icon
A standard convention: a stylized padlock with a U-shaped shackle on top. Recognized in cultures that use padlocks. Works at small sizes because the silhouette is distinctive.
Variants: open padlock (unlocked), padlock with key (security/access), padlock with checkmark (confirmed lock).
A folder icon
A standard convention: a manila-folder shape (a tab on top of a rectangle). Recognized in cultures with paper office filing systems — increasingly an acquired convention rather than a universal recognition. Works at small sizes.
The folder convention is starting to weaken as paper folders fade from common workplaces. For some audiences (younger users, mobile-native users) the folder is now an acquired convention rather than a similar icon — they recognize it because they've seen it in software, not because it resembles an object they use.
A custom icon for "AI assistant"
Initial design: a stylized neural-network diagram with three nodes connected by lines. Tested with users; recognition is 12%. Most users see "abstract geometric shape."
Revised design: a sparkle or four-pointed star. Tested with users; recognition is now around 40%, and rising as the convention spreads.
The lesson: there is no inherent visual referent for "AI assistant." The sparkle is becoming a symbolic convention (it works because users have started to associate it with AI features), not a similar icon. Similarity alone doesn't help here; the convention has to do the work.
A camera vs. video icon distinction
Same product offers both photo and video capture. The icons are very similar (a camera body for photo; a camera body with film reels or a movie-camera form for video). The distinction is real but subtle, and users sometimes tap the wrong one.
The fix is usually to make the difference more visually salient (a camera icon and a play-triangle for video, for instance) or to pair both with text labels.
Anti-patterns
Resemblance icons that don't actually resemble. A custom icon designed to be "stylized" enough that it's no longer recognizable as the referent. The designer knows what it's meant to be; the user sees an abstract shape.
Decorative detail that obscures recognition. A camera icon with a strap, lens cap, neck loop, brand logo, and shutter button — all the details add nothing and make the icon harder to read at small sizes.
Resemblance icons paired with similar resemblance icons that confuse. A "camera" and a "video camera" icon that look nearly identical. Make the difference clear or pair with text.
Resemblance based on dying referents. Icons resembling rotary phones, floppy disks, CRT TVs, mailing envelopes. The audience may not recognize the referent, in which case the resemblance does nothing.
Resemblance icons rendered inconsistently with the rest of the icon set. A heavily-rendered photorealistic camera in a set of flat geometric icons. The visual mismatch suggests they came from different sources.
Heuristic checklist
For each resemblant icon you're considering, ask: Does my audience have a clear mental image of the referent? If not, recognition will fail. Does my icon depict the referent recognizably at the rendering size? Test at actual size. Is the icon visually distinct from other icons in my set? Confused icons are worse than text labels. Have I tested recognition with real users from my audience? The designer's read is unreliable. Does the icon's style match the rest of my set? Coherence in style aids recognition.
Related sub-skills
iconic-representation— parent principle on iconic communication.iconic-arbitrary-and-symbolic— sibling skill on convention-based icons.mimicry-surface— resemblance icons are visual mimicry of the depicted object.mapping-cultural— icon recognition is a form of cultural mapping.recognition-over-recall— icons exploit recognition; this is the most direct form.
See also
references/icon-design-process.md— practical workflow for designing and testing resemblant icons.
Source: hashgraph-online/awesome-codex-plugins → plugins/HDeibler/universal-design-principles/plugins/cognition-and-learnability-principles/skills/iconic-resemblance/SKILL.md