Icon and Illustration Style Guide: Keep Visuals Consistent

Open almost any website that looks slightly off and you will often find the cause is not the layout or colour. It is a mix of icons and illustrations from different sources: one set with thin lines, another with chunky fills, a third with gradients and shadows. An icon and illustration style guide solves that by writing down the rules, so anyone can add a new graphic and have it match.

Why visuals drift apart

Visual inconsistency usually grows quietly. A designer grabs a free icon on a deadline. A colleague adds a different one to a slide. A freelancer produces a new illustration in their own style. Within months, no two graphics look related.

Consistency matters because people judge reliability partly by visual coherence. A matching set of graphics signals care and professionalism, while a patchwork signals the opposite. It also saves time: when rules exist, nobody has to reinvent the look for each new page.

A style guide for graphics does not replace your wider identity documents. It extends them. If you do not yet have those basics, start with the brand style guide template and the brand identity basics for startups.

Icons and illustrations do different jobs

It helps to treat them separately, then link them with shared rules.

• Icons are small, functional symbols. They label, guide and speed up recognition: a magnifying glass for search, a bag for cart, a phone for contact.
• Illustrations are larger and more expressive. They explain ideas, set a mood and add personality to landing pages, empty states and presentations.

Icons need to be instantly clear at small sizes. Illustrations can afford more detail and character. But both should feel like they came from the same brand, so the guide defines a shared visual language first.

Decide the personality first

Before choosing line weights or colours, describe the feeling. Use the personality words from your brand work: friendly, precise, bold, calm, playful.

Imagine a hypothetical neighbourhood legal advice service that wants to feel approachable but trustworthy. Its illustrations might use simple shapes, soft rounded corners and a limited palette, with people drawn in a relaxed, non-cartoonish way. A children's toy shop would choose something far looser and brighter.

Writing three adjectives at the top of the guide gives everyone a quick test: does this new graphic feel like those words?

Set the rules for icons

Icon sets look consistent when a handful of properties are fixed. Define each one.

1. Grid and size. Pick a base grid and keep all icons on it. Common practice is to design on a square canvas with consistent padding; choose the dimensions that suit your use.
2. Stroke or fill. Decide whether icons are outlined, solid or a combination. Do not mix by accident.
3. Line weight. If you use outlines, fix the thickness, and test that it remains visible when the icon is small.
4. Corners. Choose rounded or sharp corners and keep to them.
5. Level of detail. Set how much detail is allowed. Fewer details read better.
6. Perspective. Keep icons flat, or decide a single angle if you use depth.
7. Colour. State which colours icons may use and when.

Test at the smallest size

Place each icon at its smallest planned size next to its neighbours. If two look similar, or details disappear, simplify. Check that meaning does not rely on colour alone, because some people cannot distinguish certain colours. The accessible web design basics post explains why this matters.

Set the rules for illustrations

Illustration style is broader, so the guide should capture the principles instead of every detail.

• Shape language. Round, angular, organic or geometric?
• Line. Outlined, outline-free or hand-drawn?
• Colour use. Which brand colours appear, in what proportions, and how are tints used?
• Texture and shading. Flat colour, subtle grain, soft gradients, or none?
• Characters. How are people drawn: proportions, faces, diversity, clothing, expressions?
• Composition. Do you prefer centred, cropped or scene-based layouts? How much empty space?
• Subject matter. What do you show (people at work, objects, abstract ideas) and what do you avoid?

Add a few approved examples and a couple of "not this" examples. Visual references communicate far better than text.

Keep colour tied to the brand palette

Both icons and illustrations should draw from the same palette as the rest of the brand. Define a primary colour for icons, a secondary for accents and rules for tints. Specify what to do on dark and light backgrounds. If your colours need work, the brand colour palette guide helps you build one with sensible contrast.

Avoid adding a new colour for each illustration. A restrained palette is the quickest way to make varied artwork look like a family.

Create naming and file rules

Practical details save a lot of frustration later.

1. Use clear file names: category, description, size or version.
2. Store master files in an editable vector format, plus exports for screen use.
3. Keep one shared folder, with a current and an archive section.
4. Record who owns each file and where it came from.
5. Note the licence for any third-party assets.

Licensing is important. If you use stock icons or illustrations, read the current licence terms for commercial use, edits and attribution. When in doubt, check the supplier's official terms or ask a qualified professional. Also be careful with AI-generated imagery; see AI image generation for marketing for points to consider.

Define where each type of graphic is used

A guide is easier to follow when it says when to use what.

• Icons: navigation, feature lists, form labels, buttons, infographics.
• Spot illustrations: blog headers, empty states, onboarding steps, social posts.
• Hero illustrations: key landing pages, campaign visuals, presentation covers.
• Photography instead: when you need proof, people or places that must be real.

The mix matters. Illustrations suit abstract ideas; photographs suit trust. For infographics specifically, see infographic design tips to learn how to combine icons and data clearly. Slide decks benefit from the same discipline; see presentation design tips.

Plan how to extend the system

Your set will grow, so build in a process for adding new items.

1. Check whether an existing icon or illustration already works.
2. If not, brief the new item against the guide.
3. Create it on the same grid and style settings.
4. Compare it side by side with the existing set.
5. Get approval from a named person.
6. Add it to the shared library.

This step prevents the slow drift that created the problem. Review the whole set periodically, and retire graphics that no longer fit.

Brief freelancers with the guide

If you hire an illustrator, share the guide before the first meeting. It reduces misunderstanding and shortens revisions. Pair it with a short brief explaining the specific subject, the usage and the file formats. When reviewing their work, follow the advice in giving design feedback: refer to the guide's principles instead of personal taste.

Common mistakes

• Mixing outline and solid icons in the same view
• Using several illustration styles on one page
• Adding detail that vanishes at small sizes
• Introducing colours outside the palette
• Ignoring licence terms for downloaded assets
• Never updating the guide as needs change

What the guide page might look like

A usable guide does not need dozens of pages. A short, visual document works better than a long essay.

1. Cover rules: the three personality words and the purpose of the system.
2. Icon page: the grid, stroke settings, corner style and a sample set.
3. Illustration page: shape language, palette, character style and approved examples.
4. Do and do not page: side-by-side good and bad examples.
5. Usage page: sizes, spacing, backgrounds and where each type appears.
6. Admin page: file locations, naming, licences and the approval contact.

Keep it somewhere people can find it, such as a shared folder or a page linked from your team workspace. A guide that nobody can locate does not change behaviour.

Starting from an existing mess

If you already have a mixed collection, do not rebuild everything at once. Gather every icon and illustration into one view, group them by similarity and choose the style that best matches your brand. Redraw or replace the worst offenders first, usually those on your homepage, main landing pages and sales materials, and then work outward. Even partial consistency makes a visible difference.

Takeaway

An icon and illustration style guide is a short document with a clear personality, fixed rules for shape, line, colour and detail, usage notes and a process for adding new work. Start with a small example set, test it at real sizes and store everything in one shared place. For help building a visual system for your brand, see the design portfolio or visit the resources page.