How do you make icons, images, and illustrations consistent?
Coordinate visual assets and provide essential information for people who cannot see them.
Icons, images, and illustrations support understanding. They should explain actions, show information, or clarify ideas. Essential information must not exist only inside an image.
Keep these basics in mind
- An icon is a small graphic representing an object or action. Add text for unfamiliar meanings rather than making users guess.
- Coordinate stroke, size, and alignment within an icon set. Use the same expression for the same action.
- An aspect ratio describes width relative to height. Check that cropping preserves important people, text, or product details.
- Alternative text supplies information when an image cannot be seen. Decorative images usually need empty alternative text; functional images need their purpose explained.
See Spectrum’s icon guide for coordination and W3C’s alternative-text decision tree for image purposes.
Use visual assets
Illustrative asset changes
This is a hypothetical product website.
| Asset | Previous problem | Adjustment |
|---|---|---|
| Delete icon | An unfamiliar symbol alone | Add Delete text or an accessible name |
| Service photo | Important equipment cropped on narrow screens | Adjust cropping |
| Decorative illustration | A long filename is read aloud | Use empty alternative text |
Walk through an example
The team adds a delete action to a member list. They choose a consistent icon and name the button Delete member. Visible text helps sighted users; a screen reader , an assistive tool that reads interface information aloud, also identifies the action. They then check that the narrow layout does not squeeze the interaction area into a tiny target.
Limits and common misunderstandings
An icon is not automatically a universal language. Alternative text describes the current purpose rather than copying a filename. Images do not replace proper headings, prices, or key action text. Complex charts may need fuller explanations.