In this article
An icon on a service page and a drawing in a catalogue do not perform the same task. One may need to signal a concept quickly while the other explains a richer relationship. They can still belong to the same identity through shared decisions. Designing a system rather than collecting unrelated library assets involves more than matching stroke weights. Meaning, detail and application conditions also need definition. This guide considers how an initial visual family can become an arrangement capable of supporting future additions.
Quick answer
A custom icon and illustration system relates meaning, form, line, colour and detail through common rules. Identify which concepts need compact signs and which require explanatory scenes. Test the artwork at actual scale and in context. For digital functions, do not rely on shape alone; plan labels and suitable text alternatives where needed. Define how new items enter the approved library and who checks their consistency.
Prepare a concept list before a drawing list
Record the services, actions and states being explained. Ask whether one concept needs two different icons across pages. Equally, giving similar services one ambiguous shape can confuse readers. A hypothetical logistics website may distinguish storage, dispatch and delivery tracking. Decide which information accompanies each sign. The icon need not replace the explanation; it may help people scan the page while the accompanying wording continues to provide the precise distinction between related activities.
Separate the jobs of icons and illustrations
An icon can identify a concept or action within a limited area, while illustration can explain a process, environment or relationship. Turning every service into a tiny detailed scene may reduce clarity. Conversely, reducing a long process to one abstract sign may conceal necessary connections. Discuss the depth of explanation required. Two related detail levels need not create inconsistency; separating their roles deliberately can make the overall family easier to apply across different forms of communication.
Develop shared drawing rules through representative examples
Decide how corners, strokes, solid areas, perspective and colour distribution behave. Compare visual weight rather than forcing every subject into an identical-looking box. Long, round and angular objects can appear different in size despite equal dimensions. Do not demonstrate only the three easiest shapes during approval. Include a difficult concept and an unusually wide example so the team can see where rules adapt and how those exceptions remain related to the rest of the family.
Test meaning and detail at the intended size
Artwork viewed large in a design file can seem perfectly clear. In an actual page, mobile screen or printed table, examine whether necessary details merge. If a hypothetical service card needs a short label, provide it rather than assuming more linework solves ambiguity. Check backgrounds and the role of colour. Where removing colour destroys the distinction, consider which accompanying words or form differences can preserve meaning without making the reader infer the intended relationship.
Explain digital functions accessibly
When an icon acts as a button or link, make the action clear. W3C guidance says functional image alternatives should describe their purpose rather than merely the depicted object: a magnifying-glass shape may therefore need an explanation of search. Decorative artwork and informative imagery have different roles. Include application guidance so the implementation team knows how these situations differ. Delivering drawings alone does not establish that every accessibility or interaction requirement has also been resolved.
Organise the BOCW delivery as an extensible library
Retain approved concept names, editable sources, publication versions and application examples together. Explain how a new icon is created rather than leaving editors to combine old shapes informally. Prevent obsolete items from mixing with the current package. Check that similar signs do not confuse distinct concepts and that one concept keeps its name across the system. Rules should be clear enough to support the next addition without forcing every future illustration into identical complexity or composition.
Key takeaways
- Define concepts and reading tasks before developing shapes.
- Create related but distinct levels of detail for icons and illustrations.
- Test actual-size meaning and plan labels and alternatives for digital functions.
Frequently asked questions
Must every icon have identical box dimensions?
A shared working area can help, but visual weight still requires review. Equal measurements alone do not produce an equally balanced appearance.
Does an icon remove the need for explanatory text?
Not always. Short labels can clarify abstract or similar concepts. Avoid creating a guessing task for the reader.
Can illustrations be added later?
Yes, with clear rules and approval ownership. Sources and examples should help new work connect to the existing visual language.
