Illustration and iconography, doing real work or not

An icon or illustration earns its place on a business website when it helps a visitor recognise something faster than the words next to it would alone — a service category, a step in a process, a type of content. It does not earn its place simply because a section of the page “looked empty” without one, which is the reason a great deal of generic iconography actually ends up on small-business sites.

The test is the same one that runs through every page in this section: does this element do measurable work, or does it just occupy space that could otherwise be simpler. Illustration and icons fail that test constantly, in a specific and recognisable way — the same generic icon set, the same generic flat illustration style, applied to a business it has no actual connection to.

What genuinely earns an icon or illustration

A short list of services or steps. A row of icons above short labels — plumbing, drainage, hot water, gas fitting — helps a visitor scan and choose faster than a plain text list, because the icon acts as a visual anchor the eye can search for on a return visit. This is real, measurable work.

A process explanation. Numbered steps with a simple accompanying icon (an envelope for “get in touch,” a document for “receive a quote,” a calendar for “book a date”) reduce the cognitive load of following a sequence, particularly for a visitor scanning rather than reading closely — see designing for scanning, not reading for the broader argument this belongs to.

Functional interface icons. A magnifying glass for search, a hamburger icon for a mobile menu, an arrow indicating a dropdown — these are not decoration at all, they’re interface convention, and using recognisable, standard versions of them is a usability decision, not a style one.

What is usually filler, dressed as design

Generic hero illustrations of “people using technology.” A flat-style illustration of an anonymous figure looking at a laptop, used purely to fill visual space beside a headline, communicates nothing specific about the business and is functionally interchangeable with the same illustration on a thousand other sites using the same illustration pack.

Decorative icon rows with no real distinction between items. Four icons above four headings that could each swap positions with no loss of meaning — “Quality,” “Trust,” “Experience,” “Value” each paired with an arbitrary icon — are filler. The words themselves are doing no communication work either, which is usually the underlying problem the icons are dressing up.

Icon sets that don’t match the business’s actual register. A playful, rounded icon style paired with a business in a serious, high-stakes field (health, legal, financial services) can quietly undercut credibility, because the visual tone contradicts what the business is actually asking to be trusted with.

A simple test for an icon or illustration already on your site

Question	If the answer is no
Does removing it lose any information a visitor needed?	It was decorative, not communicative
Would a different icon in the same spot change anything?	It wasn’t chosen for meaning, just for presence
Does it match the actual seriousness of what the business does?	It may be quietly working against trust rather than for it

An icon that fails all three questions isn’t necessarily worth removing on its own — sometimes visual rhythm and consistency across a page has value too — but it’s worth recognising as decoration rather than mistaking it for communication, which changes how much design effort and cost it’s reasonable to spend refining it.

Illustration and icons as part of a broader visual system

Icons and illustrations, once chosen, need to stay visually consistent across every page rather than being sourced ad hoc whenever a new section needs one — a mismatched icon style is one of the more common, avoidable inconsistencies on a site that’s grown page by page over time. Design consistency and reusable components covers how a consistent icon and illustration system is built and reused rather than reinvented per page.

Where this fits in what you’re actually paying for

The amount of custom illustration or icon work included in a build is a genuine scope decision, and it’s one that should be made explicitly rather than left to whatever a supplier happens to include by default. Website design packages sets out what different tiers of a build typically include, and the depth of a custom icon or illustration system is one of the more legitimate reasons one package costs more than another — as distinct from a supplier charging for generic stock icon packs as though they were bespoke work.

What to ask before a design is finalised

Ask, for each icon or illustration on the page, what specific information it’s conveying that the surrounding text doesn’t already convey on its own. If the honest answer is “nothing, it just fills the space,” that’s not automatically a reason to remove it — but it is a reason to stop treating it as a meaningful design investment, and to spend the corresponding budget somewhere it will do more work instead.

Custom illustration as a genuine brand investment

There is a legitimate case for commissioning original illustration rather than using a stock icon pack, distinct from the functional argument above. A business built around a distinctive visual identity — a children’s service, a creative studio, a brand deliberately differentiating on personality — can use custom illustration as part of what makes the brand recognisable, in the same way a mascot or a signature colour does. That’s a real, defensible reason, but it’s a branding decision rather than a usability one, and it’s worth being clear with a supplier about which reason is driving the spend, because the two justify very different amounts of budget.

Icon libraries, licensing, and stroke and grid consistency across a build

Most icon sets used on business websites come from a shared, widely used library, and that’s entirely reasonable — the value of an icon is largely in its instant recognisability, not its uniqueness, and a familiar cart, phone or calendar icon communicates faster precisely because visitors have seen it a hundred times elsewhere. What does matter is drawing every icon on a site from the same set rather than mixing several different icon libraries with different visual weights and styles, which produces the same kind of subtle inconsistency covered on design consistency and reusable components — a site that looks assembled from parts rather than designed as one thing.

The visible symptom of a mismatched set is usually one of three things: inconsistent stroke weight (some icons drawn with a thin outline, others solid or heavier), icons built on a different pixel grid so they render at slightly different visual sizes even when the CSS size is identical, or icons that use different metaphors for the same concept across the site — an envelope on one page and a paper plane on another, both meaning “contact.” A designer choosing a library checks all three before a single icon is placed, because fixing it later means re-sourcing every icon on the site rather than the one that prompted the review.

When removing an icon is the right call

If an icon or illustration fails all three tests above and there’s no branding case for keeping it either, the honest fix is usually to remove it rather than replace it with a different, equally arbitrary one. A heading and a short line of text, with nothing decorative attached, communicates just as clearly as the same content paired with a generic icon that added nothing — and it’s one less element for a visitor’s attention to be divided across, which connects directly to the argument made on white space and content density.