Brand Iconography and Illustration: The Visual Language Between Logo and Photo
Your website has one icon from every family: a thin-line one, a filled one, a 3D one downloaded at the last minute. Each looks fine alone; together they scream improvisation. Iconography is the visual language that explains your services at a glance — and like any language, it only works with consistent grammar.
December 25, 20245 min readIn this article
Open the services section of almost any small business website and you'll find the same involuntary collage: a thin-line icon next to a filled one, a geometric one next to a cartoonish one, each downloaded from a different site in a different hurry. None is ugly on its own — but together they transmit exactly the opposite of what the design was meant to achieve: disorder.
Iconography and illustration are your brand's intermediate visual language: more flexible than the logo, more abstract than the photo. They explain services, guide navigation, illustrate concepts no camera can capture. This guide gives you the criteria to choose a style, systematise it, and never fall back into the collage.
What they solve (that the logo and the photo don't)
The logo identifies but doesn't explain; the photo shows the concrete but not the abstract. Between the two lies enormous territory: concepts — "security", "speed", "three-step process", "support" — that need visual representation and have no possible photograph. That's where icons work (fast scanning signals: services, benefits, navigation) and illustrations (full scenes for explaining the intangible: how the service works, what happens behind the scenes).
Icon, illustration or photo: when to use each
| Resource | When it wins | Typical example |
|---|---|---|
| Icon | Fast scanning of parallel options | The homepage's 6 services, benefits, menus |
| Illustration | Explaining abstract concepts or processes with no possible photo | "How it works", empty states, digital services |
| Real photo | Proving existence and building trust | Team, premises, products, results |
The cohabitation rule: all three can coexist on one website, but each in its function — and the common mistake is the cheap substitution: generic illustrations where real team photos belonged. Illustration explains; the photo proves. They are not interchangeable.
Choosing a style (and only one)
- Stroke: outline or filled shapes? Lines feel light and technical; filled feels solid and assertive. Choose by your brand personality — and don't mix.
- Geometry: straight corners and engineering precision, or organic curves and warmth? It must rhyme with your typography and your industry.
- Colour: the most restrictive and most effective decision — icons in a single palette colour, two at most. The multicolour icon rainbow is the collage's signature.
- Visual weight: the same line thickness and detail level across all of them — a hyper-detailed icon next to a minimal one looks broken even if both are the same "style".
Adapted library or custom drawing?
The system's rules (one page is enough)
- One single icon source — name the chosen library and forbid mixing. It's the rule that prevents 90% of the chaos.
- Fixed colour and sizes: which palette colour they use, permitted sizes, background or container if they carry one.
- Where they're used and where not: icons for lists and navigation; illustration for explanatory sections; never an icon as functionless decoration.
- A single folder with the approved files — the same logic as your brand applications: what isn't in the folder doesn't exist.
The classic mistakes
Like everything in identity, iconography gets documented in the brand manual — a chapter usually missing from basic manuals, and exactly the kind of specification that separates a complete visual identity from a logo with colours.
Frequently asked questions
Can I use free icons on my commercial website?
Yes, with two cares: check the library's licence (most major ones allow commercial use, some ask for attribution) and — more important for your brand — use it as your single source and adapt it to your colours. The problem with free icons is almost never legal: it's the style mixing that comes from downloading them from anywhere.
How many icons does my brand need?
Fewer than you think: a set of 15–30 covers most small businesses' services, benefits and navigation. The goal isn't having many but having the right ones, coherent and well applied. If your chosen library holds thousands, all the better — not to use them all, but so every future icon comes from the same family.
Do AI-generated illustrations work for a brand?
They can, with the same discipline as everything else: a defined, consistent style (same base prompt, same palette), human quality review, and verification of the tool's commercial-use terms. The risk isn't the tool but the temptation to generate each piece "however it comes out": AI without a system produces the collage faster than ever.
My website is already full of mixed icons — how do I fix it?
It's one of the most profitable visual fixes per hour invested: choose the single library, map each current icon to its equivalent there, and replace in one pass — a day's work on a mid-sized site. The effect is disproportionate to the effort: the whole website looks more professional without touching structure or content.