UI/UX Design Icons and Imagery
Icons and images are the silent communicators in UI design. A well-chosen icon says in one glance what a label takes five words to say. A well-chosen image creates emotional connection in milliseconds. A poorly chosen icon creates confusion. A poorly chosen image sends the wrong signal about the brand. This topic explains how to use icons and imagery with intention, consistency, and impact.
What Icons Do in a UI
Icons are small, simplified visual symbols that represent actions, objects, or concepts. They serve two primary functions in UI design:
Support Text Labels
When paired with a text label, an icon speeds up recognition. The icon catches the eye first, then the label confirms the meaning. This is the safest use of icons and works reliably across all users, including those who are new to the product.
Replace Text in Constrained Spaces
In areas where space is limited — mobile navigation bars, toolbar rows, table columns — icons replace text labels entirely. This only works when the icon's meaning is universally understood. A magnifying glass for search, a house for home, a heart for favorites — these are so widely recognized that the text label is redundant.
ICON USE CASES DIAGRAM
SAFE: Icon + Label
[🔍] Search [⚙] Settings [🏠] Home
Eye catches icon, label confirms meaning
RISKY: Icon alone (only when symbol is universal)
[🔍] [⚙] [🏠]
Works ONLY for globally recognized symbols
DANGEROUS: Icon alone for ambiguous actions
[≡] -- Is this menu? Filter? More options?
[↩] -- Is this undo? Back? Refresh?
RULE: When in doubt, add the text label.
Saving 20px of space is not worth user confusion.
Icon Styles: Choosing the Right Visual Language
Icons come in several styles. The right style depends on the product's brand personality and the contexts where icons appear.
Outlined Icons
Outlined icons use only strokes — no filled areas. They feel light, modern, and minimal. They work well at medium and large sizes on clean, white-background interfaces. Google Material Design system uses outlined icons extensively. At very small sizes (under 16px), outlined icons lose detail and become hard to read.
Filled Icons
Filled icons are solid shapes with no internal outlines. They are readable at very small sizes and feel bolder and more authoritative. Apple's SF Symbols library uses filled icons for many states. Filled icons work well for active/selected states in navigation when they need to stand out from inactive outlined icons.
Dual-tone Icons
Dual-tone icons combine a filled base with a lighter fill for secondary areas. They feel friendly, modern, and slightly more playful than pure outlined or filled icons. Popular in consumer apps and SaaS products.
Illustrated Icons
Illustrated icons are more detailed and expressive — closer to small illustrations than simplified symbols. Used in empty states, onboarding screens, and anywhere emotion and warmth are the primary goals rather than quick identification.
ICON STYLE VS BRAND PERSONALITY DIAGRAM OUTLINED: Clean, modern, minimal → Tech, SaaS, finance FILLED: Bold, clear, authoritative → Navigation bars, alerts DUAL-TONE: Friendly, current → Consumer apps, startup products ILLUSTRATED: Warm, expressive → Onboarding, empty states, children's apps CHOOSING A STYLE: Step 1: Match the brand personality Step 2: Consider where icons appear (small = filled, large = any) Step 3: Stay consistent throughout the entire product
Icon Consistency: The Most Common Icon Mistake
The most damaging icon mistake is mixing styles within a single product. An outlined home icon next to a filled settings icon next to a dual-tone notification icon creates a visual experience that feels assembled from spare parts rather than designed as a system.
Rules for icon consistency:
- Use one icon family throughout the entire product (a family is a collection of icons in the same style, weight, and proportions)
- Use one icon weight — do not mix 1px stroke icons with 2px stroke icons on the same screen
- Use icons at consistent sizes — define icon size tokens (16px, 20px, 24px, 32px) and apply them systematically
- Use one icon for one consistent concept — do not use both a pencil and a pen icon to mean "edit" in different parts of the app
ICON CONSISTENCY RULE DIAGRAM INCORRECT (mixed styles): [🔍 outlined] [⚙ filled] [🏠 illustrated] [🔔 dual-tone] Visual noise -- every icon has different weight and style CORRECT (consistent family): [🔍 outlined] [⚙ outlined] [🏠 outlined] [🔔 outlined] All same weight, same style, same proportions -- reads as a system
Icon Size and Touch Target Size
Icon size and touch target size are different things. An icon might be 20px visually, but its tap target must be at least 44x44px (Apple's guidelines) to be easily tappable without errors.
ICON vs TAP TARGET DIAGRAM Visible icon: 20px × 20px (what the user sees) Tap target: 44px × 44px (what the finger can hit) The extra space around the icon is invisible padding. It makes tapping comfortable and reduces mis-taps. COMMON SIZES: Navigation bar icons: 24px (tap target: 44px) Inline icons: 16-20px (inside text, not tappable) Feature icons: 32-48px (used in feature sections) Empty state icons: 64-96px (decorative, expressive)
What Images Do in a UI
Images serve three distinct roles in UI design, and each role requires different decisions about what images to choose and how to use them.
Role 1: Represent the Product
Product photos, screenshots, and app previews help users understand what they are getting before they commit. For e-commerce, product images are the primary factor in purchase decisions. Research shows that high-quality product photos increase conversion by up to 30% over low-quality ones.
Role 2: Build Emotional Connection
Photographs of people in real contexts (using the product, experiencing the benefit) create emotional resonance. Users see themselves in these images. Healthcare apps show people feeling healthy and active. Education apps show people learning with confidence. The people in these images should reflect the actual user base in terms of age, appearance, and context.
Role 3: Support Storytelling
Illustrations, diagrams, and conceptual images explain ideas that words alone cannot capture quickly. An animated onboarding illustration showing how a feature works teaches users faster than three paragraphs of text.
Illustration vs Photography: Choosing the Right Visual Style
ILLUSTRATION vs PHOTOGRAPHY COMPARISON DIAGRAM PHOTOGRAPHY: ILLUSTRATION: Realistic and credible Expressive and flexible Shows actual products/people Shows concepts and ideas Requires professional shoot Can be created by designers Feels grounded and trustworthy Feels playful or modern Ages (fashion/context dates) Timeless if style is consistent Hard to be diverse systematically Easy to represent any person/concept Best for: E-commerce, real Best for: Onboarding, empty estate, food, medical products states, feature explanations HYBRID APPROACH: Many products use photography for main content and illustration for supporting elements (empty states, error pages, loading screens)
Image Composition in UI Layouts
How an image is cropped and positioned dramatically affects how it reads in a layout. UI designers must understand basic compositional principles to use images effectively.
The Rule of Thirds
Divide an image into a 3×3 grid. Place the main subject at one of the four intersection points of these grid lines rather than in the center. This creates a more dynamic, interesting image than pure center composition.
RULE OF THIRDS DIAGRAM ┌───┬───┬───┐ │ │ │ │ ├───┼───┼───┤ │ │ ● │ │ ← Subject in center (static) ├───┼───┼───┤ │ │ │ │ └───┴───┴───┘ ┌───┬───┬───┐ │ │ │ │ ├───┼───┼───┤ │ │ │ ● │ ← Subject at intersection (dynamic) ├───┼───┼───┤ │ │ │ │ └───┴───┴───┘
Subject-Left, Text-Right Framing
When pairing an image with text in a card or banner, position the visual subject on one side and leave open space on the other for text overlay. A product image with the main subject on the left and empty sky or background on the right creates natural text placement room without obscuring the product.
Hero Images: The First Thing Users See
A hero image (or hero banner) is the large, full-width image or visual at the top of a landing page or home screen. It sets the emotional tone immediately and determines whether the user reads on or leaves.
Effective hero images:
- Connect emotionally to the product's core promise
- Have a clear focal point that does not compete with overlay text
- Use muted or dark areas where text overlays will appear to ensure readability
- Load fast — large unoptimized hero images dramatically slow page load and increase bounce rate
- Are available in multiple crops — one for desktop (wide, short), one for mobile (tall, narrow)
HERO IMAGE TEXT OVERLAY DIAGRAM CORRECT: ┌──────────────────────────────────────────┐ │ DARK OVERLAY AREA │ Subject/Product │ │ Big Bold Headline │ in bright colors │ │ Subheadline text │ │ │ [ CTA BUTTON ] │ │ └──────────────────────────────────────────┘ Dark area ensures text is readable over image INCORRECT: ┌──────────────────────────────────────────┐ │ COMPLEX BUSY IMAGE │ │ White Text That Blends In Somewhere Here │ └──────────────────────────────────────────┘ Text disappears into image -- user cannot read it
Image Performance and Optimization
Large, unoptimized images are one of the most common causes of slow-loading websites. A slow website loses users before they ever see the design. Image optimization is a design responsibility as much as a technical one.
- Use the right format: WebP for photos and complex images (smaller than JPEG with same quality), SVG for icons and illustrations (infinitely scalable, tiny file sizes), PNG for images with transparent backgrounds
- Size images for their display size: Never embed a 4000px image in a 800px container. Export the image at 2× the display size (for retina screens) and no larger
- Use lazy loading: Images below the visible screen area should load only when the user scrolls to them, not all at once on page load
- Use alt text: Every meaningful image needs an alt text description. This serves screen reader users who cannot see the image and improves SEO
Key Points
- Icons support quick recognition when paired with text labels — use standalone icons only for universally understood symbols
- Choose one icon style (outlined, filled, or dual-tone) and apply it consistently throughout the entire product
- Icon tap targets must be at least 44×44px even if the visible icon is smaller
- Images serve three roles: representing the product, building emotional connection, and supporting storytelling
- Photography feels credible and realistic; illustration feels expressive and flexible — choose based on what the product needs to communicate
- Hero images need a clear focal point and muted or dark areas where text overlays will appear
- Always use alt text on meaningful images for accessibility; export images at the correct display size to keep load times fast