A consistent icon set shares one grid, one stroke weight, one corner style and one level of detail, and each icon expresses a single idea people already recognise. You can draw a custom set or adopt an existing library, but in both cases consistency matters more than individual beauty: mixed icons look like mixed brands.
Start with the rules that make a set a set
Apple’s Human Interface Guidelines put it plainly: all interface icons in an app need to use a consistent size, level of detail, stroke thickness (or weight) and perspective, whether they are all custom or a mix of custom and system icons. The same guidance notes that some icons need their dimensions adjusted so they look visually even, because a lighter-weight shape needs more height to feel balanced (Apple Human Interface Guidelines: Icons).
Turn that into a short specification your team can follow:
- Canvas and grid. One artboard size, one safe area, and a small set of keyline shapes (square, circle, portrait and landscape rectangles) so different shapes feel the same size.
- Stroke. One weight, with a rule for terminals (round or square) and joins.
- Corners. One radius, or square corners throughout. Do not mix.
- Fill style. Outline only, solid only, or a defined pairing of both for selected and unselected states.
- Detail budget. A maximum number of internal lines, so a complex idea is simplified rather than drawn in miniature.
- Optical alignment. Apple notes that asymmetric icons, such as a download arrow, can look unbalanced when centred geometrically, and may need small padding adjustments to look centred.
Choose metaphors people already know
Apple advises a recognisable, highly simplified design, and says icons work best with familiar visual metaphors directly related to the action or content they represent. Too much detail can make an icon confusing or unreadable. Practical consequences:
- Prefer the common metaphor (magnifying glass for search, envelope for email) over a clever one.
- Pair icons with text labels wherever space allows. An icon that needs explaining is a failed icon.
- Avoid icons that may not travel across cultures or languages, and prefer gender-neutral human figures. If an icon contains text characters, they need localising.
- Use vector formats such as SVG so icons scale cleanly, and provide alternative text for custom icons so screen readers can describe them.
Custom set or existing library?
| Question | Custom set | Existing library |
|---|---|---|
| Fit with brand personality | High | Moderate; may need restyling |
| Consistency across hundreds of icons | Depends on your process | Usually strong |
| Time to start | Slow | Fast |
| Licensing | You own what you commission, subject to your contract | Must read the licence |
| Maintenance | You draw each new icon | Library adds new ones |
Many brands take a hybrid route: use a library for common interface actions and draw a small custom set for the ideas that are unique to the business, matching stroke and grid to the library.
Licensing checks
Before adopting a library, read its licence text. As one example, Google’s Material Symbols are released under the Apache License Version 2.0, and the library offers axes for weight, fill, grade and optical size so stroke weight can be matched to text (Google Fonts: Material Symbols guide). Other libraries use different terms, some requiring attribution or restricting commercial use or redistribution. Check:
- Commercial use allowed?
- Attribution required, and where?
- Can you modify the icons?
- Can you include them in a product you sell or a template you hand over?
- Is the licence perpetual and transferable to a new agency or developer?
If you commission custom icons, make the contract state who owns the files and whether the designer may reuse the artwork. Licence terms are legal matters: get professional advice for anything high-stakes.
Performance and delivery
On the web, load only the icons and axes you use. Google’s guidance for Material Symbols suggests listing only the needed icons and axes to limit font size, and self-hosting is an option. Inline SVG or an SVG sprite is another approach. Related reading: Web Fonts and Performance.
Document the set
Add an icon section to your brand guidelines: the grid, stroke, do and don’t examples, minimum sizes, colour rules and the process for requesting a new icon. See What to Include in Brand Guidelines and Building a Consistent Visual Identity Across Digital Channels. Deliver the final files in sensible formats, as covered in Logo File Formats Explained.
Quick audit checklist
- Place all icons at one size on one page. Does any look heavier, lighter or bigger?
- Compare stroke weight and corners side by side.
- Check each at the smallest size you will use.
- Ask someone outside the team to name each icon without labels.
- Confirm the licence covers every channel you plan to use.
Where Radiance Impact fits
Radiance Impact’s Studio covers animation and character design as well as brand and creative production, and the Technology team builds business websites where icon performance and accessibility matter. If you are shaping an icon set or need one documented properly, contact us or see /studio.
Sources
- Icons, Human Interface Guidelines, Apple
- Material Symbols guide, Google Fonts
