Icon vs Logo — the Difference and Why They're Confused
"Send us your icon" — and they send a logo. "Make us a logo" — when what's needed is an app glyph. Icons and logos look alike, often physically coincide — and yet they are different tools with different laws. Confusing them causes half of all blurry avatars and unreadable dock glyphs. Here's the difference, the border cases, and the rules for translating one into the other.
A logo is a brand identification mark: it answers "who is this?". An icon is an interface element: it answers "what is this?" and "where do I tap?". A logo is unique by definition; icons are mostly standardized (magnifier = search, gear = settings). The overlap is the app icon: icon by format, logo by function, designed by its own rules.
Two professions: identification and navigation
A logo serves the brand: its job is to distinguish the company from everyone and accumulate recognition — we cover the types of logos separately. Uniqueness is its essence: two identical logos are a legal conflict.
An icon serves the user: its job is to explain a function or object instantly. Here uniqueness is harmful: a magnifier must mean "search" everywhere, a cart "buy", a floppy "save" (even to a generation that never saw floppies). Icons are the shared language of interfaces, and a "creative" settings icon is a design bug, not boldness.
Hence mirrored quality criteria: a good logo resembles nothing; a good interface icon resembles the accepted image of its function.
The difference table
| Logo | Icon | |
|---|---|---|
| The question | "who is this?" | "what is this? where do I tap?" |
| Uniqueness | mandatory | harmful (except app icons) |
| Lives | everywhere: card to billboard | in the interface |
| Sizes | any, favicon to billboard | a fixed grid: 16–48 px |
| Count per brand | one (with versions) | dozens–hundreds, as one set |
| Made by | a brand designer | a UI/icon designer |
The border zone: app icons and favicons
The main source of confusion is the app icon: icon by format (a square in a grid), logo by function (it identifies the brand among other apps). The favicon is the same hybrid. Brands use three strategies for these media:
- The compact mark. The full logo doesn't fit — the symbol part goes into the square: Netflix's "N", Telegram's plane, a monogram for wordmark brands.
- A dedicated version. The mark is adapted to the icon grid: details simplified, strokes thickened, a background chosen — Instagram's icon and script wordmark are different objects of one system.
- Icon ≠ logo entirely. Games put a character in the icon, not the mark — we cover how that works for mobile games separately; services with live icons (a calendar showing today's date) also split the layers.
The general principle: you don't "shrink" a logo into an icon — you design the icon from the logo. Mechanically scaling a full mark to 48 pixels is the top source of mush and illegibility; we cover the other reasons logos blur separately.
In‑product icons: a system, not a collection
If you build a product, interface icons are their own discipline, kin to a visual identity:
- One grid and size (usually 24×24, pixel‑grid aligned) — icons of different "weight" in one menu read as a junk drawer.
- One stroke weight and style: outlined or filled, same rounding. Style mixing is visible even to non‑specialists — like mismatched fonts.
- Standard metaphors: don't invent a new "search" icon — invent only where the function has no established image.
- Brand connection in doses: the corner radius or stroke character can be branded, not the "uniqueness" of every pictogram.
Ready sets (Material Symbols, SF Symbols, Feather) cover 90% of a product's needs; drawing from scratch makes sense only for branded additions to them.
An easy test of what you're looking at: remove the object from its context. A mark that still means something without an interface ("that's Sber") is a logo. A pictogram that loses meaning without an interface (a magnifier alone is just a magnifier) is an icon. The app icon passes the first test — which is why it demands brand design, not just a UI approach.
Common mistakes
- The full logo in an avatar/icon. The text part turns to noise — use the compact mark; we cover proper avatar setup separately.
- "Creative" function icons. Users shouldn't solve puzzles: conventions beat originality.
- Icons from mixed sets. Taking one set whole is cheaper than curating "the best" from five.
- The app icon missing from the brand book. The digital brand's main medium must be designed and codified alongside the logo.
How hundreds of brands solve this is on display in the catalog: nearly every logo there comes with its compact "icon" version. Adjacent step‑by‑step guides: app icons, favicons, logo sizes for platforms.