Iconography
Let’s explore Iconography in UI/UX design — a key visual language that helps users navigate, understand actions, and recognize content quickly.
What Is Iconography?
Iconography is the visual representation of ideas and functions using symbols or icons. In UI/UX, icons are used to:
- Communicate meaning instantly
- Save space
- Replace or enhance text
- Improve usability and aesthetics
Think of the magnifying glass 🔍 for search, or the trash can 🗑️ for delete — these are icons we instantly recognize.
Why Iconography Matters in UI/UX
Enhances Usability
Icons make interfaces faster to scan and interact with, especially on mobile.
Visual Cues
They guide users by associating symbols with actions (e.g., ✏️ = edit, ➕ = add).
Saves Space
Instead of long labels, you can use small, instantly recognizable icons.
Builds Consistency
A unified set of icons reinforces brand identity and maintains a clean layout.
Types of Icons in UI Design
| Type | Example | Purpose |
|---|---|---|
| System Icons | Home, Search, Settings | Basic navigation or OS functions |
| Action Icons | Add, Delete, Edit | Represent an action or interaction |
| Navigation Icons | Back, Next, Menu | Help users move through the app |
| Status Icons | Loading, Warning, Success | Indicate a state or system feedback |
| Custom/Brand Icons | App-specific or branded symbols | Show uniqueness or branding |
Icon Design Principles
1. Clarity
- Icons should clearly represent their meaning.
- Avoid abstract or complex metaphors.
2. Consistency
- Use a consistent style, size, and stroke weight.
- Match the icon style to your UI (e.g., flat, outlined, filled).
3. Recognizability
- Use common metaphors users already understand.
- Example: 💬 for chat, 🔒 for lock
4. Scalability
- Icons should look good at small and large sizes (16px – 64px).
5. Accessibility
- Always provide text labels for important icons.
- Use alt text for screen readers if applicable.
Icon Styles in UI/UX
| Style | Description | When to Use |
|---|---|---|
| Outlined | Hollow icons, simple lines | Clean, modern UIs |
| Filled | Solid shapes, strong presence | Emphasize primary actions |
| Two-tone | Mix of shades for depth | Slightly decorative or playful UIs |
| Glyph | Monochrome and minimalist | Compact, efficient designs |
| Skeuomorphic | Realistic-looking | Rare today; used in gamified UIs |
Sizing and Spacing Guidelines
- Size: Usually 16px, 24px, or 32px
- Padding: 8px – 12px around icons (inside buttons or cards)
- Stroke: Use consistent stroke width (e.g., 2px)
- Alignment: Center icons within buttons or containers
Tools and Icon Libraries
Libraries:
Tools in Figma:
- Use the “Plugins” menu to install icon libraries
- Search for “Feather”, “Material”, or “Lucide”
- Drag and drop icons or use components in your design system
Best Practices
Do:
- Use icons with labels if unclear
- Stick to a single icon style per project
- Keep icons lightweight and vector-based
- Use tooltips for additional clarity
Don’t:
- Mix too many icon styles
- Use icons without testing their clarity
- Use icons just for decoration without meaning
Example Use Cases
| Screen Type | Icon Use |
|---|---|
| Navigation Bar | Home, Profile, Notifications, Search |
| Form Inputs | Calendar (for date), Eye (show password) |
| Buttons | Plus (+), Trash, Pencil, Upload |
| Status Indicators | Checkmark (success), Exclamation (warning) |
Summary
| Iconography Element | Why It Matters |
|---|---|
| Clarity | Users must understand what the icon does |
| Consistency | Builds trust and familiarity |
| Accessibility | Ensures inclusivity for all users |
| Reusability | Icons work across screens and flows |
NEXT LESSON – Spacing & alignment
