Graphics, Icons & Visual Communication
Not every idea should be explained with photography. Diagrams, illustrations, icons, infographics, and structured visual systems are often better tools for explaining processes, data, services, and complex concepts. Understanding when to use graphics instead of photography can make websites easier to understand, easier to navigate, and more useful for visitors.
When Graphics Work Better Than Photography
Graphics often outperform photography when the goal is understanding rather than emotion. For complex ideas, processes, and structured information, a well-designed graphic communicates more clearly than any photograph.
Photography helps visitors feel something — trust, warmth, credibility, excitement. Graphics help visitors understand something — how a process works, what a service includes, how options compare. Both are valuable. The strongest websites use both intentionally, in the right places.
When you need a visitor to grasp a workflow, compare options, follow a sequence, or understand a structure, a diagram or illustration will almost always outperform a photograph. When you need a visitor to connect emotionally with your organization, photography wins.
Key principle: Choose photography when you want visitors to feel something. Choose graphics when you want visitors to understand something. The most effective websites use both — intentionally, and in the right places.
Process Diagrams
Service workflows, delivery processes, and multi-step procedures are almost always easier to understand through a visual diagram than through written descriptions or photographs. A photograph of someone sitting at a desk communicates very little about how a service actually works. A clear process graphic communicates the entire journey at a glance.
For service-based businesses, process diagrams reduce visitor uncertainty and directly answer the question visitors are asking: “What actually happens after I contact you?”
Where process diagrams are most effective
- Service workflows — showing the steps from enquiry to delivery
- Customer journeys — mapping the visitor experience from first contact to outcome
- Quoting and onboarding processes — reducing uncertainty before a visitor commits
- Website project roadmaps — explaining what a project involves and how long it takes
- Decision trees — helping visitors self-qualify or choose the right service
A simple five-step diagram often communicates more effectively than several paragraphs of text. Visitors scan before they read. A well-structured process graphic is scannable in seconds.
Infographics
Infographics help visitors understand data, comparisons, timelines, and relationships between ideas. When information has structure — stages, categories, before-and-after states, or ranked priorities — a visual representation is almost always more efficient than prose.
Well-designed infographics also improve content retention. Visitors are more likely to remember a clearly visualized comparison than a paragraph describing the same information.
Where infographics are most effective
- Comparisons — side-by-side option evaluation, feature tables, before-and-after
- Timelines — project phases, historical context, delivery schedules
- Statistics and data — making numbers meaningful through visual scale
- Rankings and priorities — communicating relative importance at a glance
- Educational content — explaining concepts that benefit from visual structure
Information hierarchy and scannability
Effective infographics respect information hierarchy. The most important insight should be visually dominant. Supporting detail should be clearly subordinate. Visitors should be able to extract the core message in under five seconds, with the option to read deeper if they choose.
Scannability is not a compromise — it is a design goal. Most visitors will scan an infographic before deciding whether to engage with it fully. Design for the scan first.
Icons as Visual Language
Icons are not decoration. They are navigation and communication tools. Used well, icons improve scannability, reinforce categories, support navigation, and draw attention to key content. Used poorly, they add visual noise without adding meaning.
What icons do well
- Improve scannability — visual anchors help visitors locate content faster
- Support navigation — icons alongside labels reduce cognitive load in menus and lists
- Reinforce categories — consistent icon use helps visitors build a mental model of a site
- Draw attention — icons signal where important content begins
- Create visual rhythm — consistent icon sizing and style creates a more cohesive layout
How to use icons responsibly
- Labels should accompany icons wherever meaning is not universally obvious
- Icons should support meaning, not replace content
- Icon style should be consistent across the entire website
- Decorative icons should use
aria-hidden="true"so screen readers skip them - Functional icons used as buttons or links must have accessible labels
Lucide Icons
MyWaypoint Digital uses Lucide Icons as its primary icon system. Lucide is an open-source icon library offering a consistent, clean, and accessible set of SVG icons suitable for professional website use.
- Open source — free to use in commercial projects under the ISC licence
- Consistent — all icons share the same stroke weight, corner radius, and visual style
- Accessible — SVG-based with support for ARIA attributes and title elements
- Lightweight — individual icons can be used without loading an entire library
SVG Advantages
Icons, logos, diagrams, and simple illustrations implemented as SVG (Scalable Vector Graphics) offer significant practical advantages over raster formats such as PNG or JPG.
SVG vs PNG/JPG in practical terms
A PNG or JPG is a grid of pixels. At the size it was created, it looks sharp. Scale it up and it becomes blurry. On high-density screens (Retina, 4K), a standard raster image can appear soft or pixelated unless a larger version is served.
An SVG is a set of mathematical instructions describing shapes, lines, and curves. It renders at whatever size the browser needs — from a 16px favicon to a full-screen hero graphic — with perfect sharpness at every size.
Key SVG advantages
- Infinite scalability — renders sharply at any screen size or resolution, including high-density displays
- Fast loading — SVG files are typically much smaller than equivalent raster images
- Accessibility support — SVG elements can carry
<title>,<desc>, and ARIA attributes that assistive technology can read - Consistent appearance — renders identically across browsers and devices without compression artefacts
- Styleable with CSS — colours, strokes, and fills can be controlled dynamically to match brand or theme changes
- Animatable — SVG elements can be animated with CSS or JavaScript for subtle interactive effects
For icons, logos, and simple diagrams, SVG is almost always the right format. Use raster formats (WebP, AVIF, JPG) for photographs and complex imagery where SVG is not practical.
Open Source Icon Resources
The following open-source icon libraries are well-suited for professional website use. All are free for commercial projects and provide SVG icons that can be used inline or as external files.
Lucide Icons Recommended
lucide.devThe primary icon system used by MyWaypoint Digital. Lucide offers a large, consistently styled library of clean SVG icons under the ISC licence. All icons share the same stroke weight and visual language, making them ideal for maintaining consistency across a website.
Heroicons
heroicons.comA set of free MIT-licensed SVG icons designed by the Tailwind CSS team. Available in outline and solid variants. Well-suited for interface design and navigation elements where a clean, minimal style is appropriate.
Tabler Icons
tabler.io/iconsA large library of over 5,000 MIT-licensed SVG icons with a consistent stroke-based style. Tabler offers broad topic coverage and is a strong choice when a project requires icons for a wide range of categories.
Phosphor Icons
phosphoricons.comA flexible MIT-licensed icon family available in six weights: thin, light, regular, bold, fill, and duotone. Phosphor is a good choice when a project requires more expressive or varied icon treatments.
Always review the licence terms for any icon library before use. Most open-source icon libraries require attribution in their documentation but not on the website itself — confirm this for each library you use.
Choosing the Right Visual Tool
Use this reference to match your communication goal to the most appropriate visual format. Most pages will use a combination of formats — the goal is to choose each one intentionally.
| Goal | Recommended Visual Tool |
|---|---|
| Build trust with visitors | Photography |
| Show real people, team, or workspace | Original Photography |
| Launch quickly on a limited budget | Stock Photography |
| Create a custom visual style | AI-Generated Imagery |
| Explain a service process | Process Diagram |
| Compare options or features | Infographic or Table |
| Visualize data or statistics | Infographic |
| Improve page scannability | Icons with Labels |
| Support navigation | Icons |
| Teach a concept or explain a system | Illustration or Diagram |
| Show website or content structure | Diagram |
| Create emotional connection | Photography |
| Create understanding | Graphics, Diagrams, or Infographics |
| Scale perfectly at any resolution | SVG |