Part 6 of 10
How to write the icons and illustration section of brand guidelines
The style rules for icons and illustration as measurements, when to use each, and the source files, so that new drawings match the set and do not imitate it.
Icons and illustrations look consistent when they share a few rules that people can measure: line weight, corner radius, grid size, and colors. With those rules, a designer can draw a new icon that fits the set. If a guide shows only finished drawings, people and image models make imitations.
What the icons and illustration section needs
- The drawing rules as numbers: grid, line weight, corners, and colors.
- When to use an icon, an illustration, or a photo.
- The icon set and the illustration sources, in formats that people can edit.
- A new drawing that fits next to a drawing that does not fit.
How published guides write it
IBM
Use a 2px stroke for all icons to maintain uniformity. Exceptions may be made only for more complex icons or those with unusually dense line work.
Has: exact value, where it applies. Gives the stroke width and says exactly when it can be different.
Mozilla
New icons should be designed on a 16×16 grid, using a 1.5pt stroke. This ensures scalability across different sizes and resolutions.
Has: exact value, reason. Grid size and stroke weight, with the reason for both.
Dropbox
Best for explaining abstract, complex, or dry concepts. Use simple, charming scenes and metaphors for product or service descriptions and onboarding flows, or to soften the impact of an error message.
Has: where it applies. Ties illustration to specific jobs, error messages included. No style rules or source files.
Wording to copy
Copy this text into your guide. The example is for Larch Coffee, a made-up coffee roaster. Replace the highlighted parts with the facts for your brand.
Icons and illustration
We draw icons on a [24 px] grid with [2 px] lines and [rounded]
corners, in [ink] only.
Illustrations use [the brand colors] and [flat shapes].
Use icons for [navigation and actions]. Use illustration for [brewing
guides]. Do not mix the two in one layout.
Files: [example.com/brand/icons.zip] (SVG) and [the illustration
sources in Figma].
Do you need a new icon? Ask [the brand team]. Do not draw or generate
one.
Common gaps
- The guide shows only finished drawings and no rules, so nobody can add to the set.
- There are no source files that people can edit, so people trace or draw again.