Iconography and Illustration in Your Product
Icons and illustrations are visual communication tools — when used well, they accelerate recognition and add personality. When used poorly, they add visual noise and create confusion.
Icons
Icons work best when they are: universally recognisable (the floppy disk for save, the magnifying glass for search), paired with a text label to eliminate ambiguity, consistent in visual style across the product, and used sparingly — not as decoration on every element.
Icon systems we use: We use a consistent icon library (typically Material Icons, Feather Icons, or Heroicons — or a custom icon set if your brand requires it). Mixing icon styles creates visual inconsistency.
Icon sizing: Icons should be sized proportionally to the text they accompany. Standard sizes: 16px for inline/small, 20–24px for interface icons, 32–48px for feature/illustrative icons.
Illustrations
Illustrations are used for: empty states (bringing life to blank screens), onboarding experiences, error pages, feature highlights, and brand personality moments. They should be: consistent in style (matching your brand aesthetic), purposeful (adding meaning, not just decoration), and diverse in representation where they include people.
SVG vs. PNG
We use SVG (Scalable Vector Graphics) for icons and illustrations wherever possible. SVGs are infinitely scalable without quality loss, are small in file size, and can be styled with CSS (allowing colour theming, dark mode, etc.).