The big idea: on landing pages, icons are punctuation — Linear proves it
Linear’s landing page lands on just about every “best design” list. Look at how few icons it actually uses — and where they’re allowed to live — and you can extract the whole playbook:
1. Icons never carry the message — they pace it. Linear takes this further than anyone: its marketing sections use no decorative icons at all. Each section is a sharp headline, one tight paragraph, a numbered link (“4.0 Diffs →”) — and a screenshot of the real product. Every icon you see on the page lives inside those screenshots, doing actual work in actual UI. Cover the screenshots and the copy still sells. The anti-pattern — a feature grid where generic icons (rocket! lightbulb! shield!) do the explaining — is how landing pages say “we didn’t know what to write.”
2. One weight, one size, everywhere. Look closely at those product shots: the interface icons are one family on one keyline (edition #1), almost all at one optical size, near-uniform stroke. At a glance the UI reads as a set, which reads as competence — that rhythm is precisely what makes a product screenshot convincing. One mixed-weight icon and the shot would tell on itself.
3. Icons inherit the page’s restraint. The page is near-monochrome on dark surfaces (the 70–80% rule from edition #5, in the wild). When an icon does get color, the color is information, not decoration: status dots, priority markers, initiative icons. Color that means something is a system; color for vibes is noise.
4. Metaphors stay literal. Where an icon appears, it’s literal — a branch for git-connected work, an inbox for the inbox. And when the claim is abstract (“built for speed”), Linear shows the actual product instead of forcing a metaphor. Rule of thumb worth framing: if you can’t find a literal icon, show the feature, don’t symbolize it.
60-second tip
Steal the dependency test for your own page: cover every icon with your hand. If any section stops making sense, the icon is doing the copy's job — rewrite the headline, then let the icon decorate it.
Steal this: the Feature Grid section
A Figma section modeled on the pattern: 3-column feature grid with keyline-aligned icon slots, locked spacing tokens, headline/body hierarchy, and a dark variant. Swap in your copy and your one icon family (edition #2) and it holds together by construction.
Spotted mid-teardown: the fastest way to trial icons directly on a live page is the IconBuddy Chrome extension — grab a candidate icon without leaving the tab, drop it into DevTools, judge it in context.
Before you go
Whose landing page should we tear down next? Reply with a nomination — most-requested wins, and yes, you can nominate your own. (Brave.)
— Iconic, by IconBuddy
Some links may be affiliate links — we earn a commission at no extra cost to you. We only recommend tools we actually use.