UI icon types every designer needs to know
Common UI icon types include navigation, action, status and feedback, object and file, input and form, social and brand, and decorative icons. They come in styles such as outline, filled, duotone and glyph. Good icons are consistent in style and size, paired with text labels for key actions, accessible to screen readers and managed as a system in the design library.
Why icons matter
Icons are small visual symbols that represent actions, objects, states or destinations. Used well, they make interfaces faster to scan, save space and help people recognise familiar functions instantly. A magnifying glass for search or a trash can for delete is understood by most users without reading. Used poorly, icons create confusion: unfamiliar symbols, inconsistent styles and icons without labels force people to guess.
Understanding the different types of icons, and the rules that make them effective, helps designers decide when an icon helps and when text works better. Our post on twelve UI patterns shows how icons appear within common interface patterns.
Main types of UI icons
| Type | Purpose | Examples |
|---|---|---|
| Navigation icons | Help users move between sections | Home, menu, back, profile |
| Action icons | Trigger tasks | Search, add, edit, delete, share |
| Status and feedback icons | Show states or results | Success tick, warning, error, loading |
| Object and file icons | Represent items or content | Documents, images, folders, cart |
| Input and form icons | Support data entry | Calendar, eye for password, clear field |
| Social and brand icons | Represent external services | Social networks, payment methods |
| Decorative icons | Add visual interest | Feature highlights, illustrations |
Navigation and action icons
Navigation icons appear in tab bars, side menus and headers, helping people move around the product. Action icons trigger tasks such as searching, adding, editing or sharing. Both should use widely recognised symbols where possible. When an action is less common or ambiguous, such as "archive" or "sync", pair the icon with a text label so users understand it immediately.
Status and feedback icons
Status icons communicate success, warnings, errors, information and progress. They are especially important in forms, notifications and dashboards. Never rely on colour alone: a red circle and a green circle may look identical to people with colour vision deficiencies. Use distinct shapes, such as a tick, exclamation mark or cross, and accompany them with clear text. Our guide to accessibility in UI/UX design covers non-colour cues.
Icon styles
- Outline: Thin strokes; light and modern; can be less visible at small sizes.
- Filled: Solid shapes; strong and legible; often used for active states.
- Duotone: Two tones for depth; useful in marketing and illustrations.
- Glyph: Simple solid symbols; very clear at small sizes.
A common pattern is to use outline icons for inactive states and filled icons for active or selected states, such as in a mobile tab bar. Whatever style you choose, use it consistently across the product.
Choosing clear symbols
Some symbols are understood almost everywhere, such as a magnifying glass for search, a house for home or a gear for settings. Others vary in meaning or are unfamiliar to many users. Before using an icon, ask whether most of your audience will understand it without a label. For regional and international products, consider cultural differences: hand gestures, animals, colours and religious symbols can carry different meanings, and some icons that imply direction need mirroring for right-to-left Arabic layouts.
- Prefer widely recognised symbols for common actions
- Test unfamiliar icons with real users
- Mirror directional icons such as arrows in right-to-left layouts
- Avoid gestures or symbols with sensitive cultural meanings
- Keep the same icon for the same action everywhere
Sizing, grids and touch targets
Icons are usually designed on a pixel grid, such as 24 by 24 pixels, with consistent padding and stroke widths so they look balanced together. Common display sizes include 16, 20, 24 and 32 pixels. For touch interfaces, the tappable area around an icon should be larger than the icon itself, often 44 to 48 points or pixels, even if the visible icon is smaller. Our post on e-commerce UI and Fitts’s law explains why target size matters.
Icons and text labels
- Pair icons with labels for key or uncommon actions
- Use icon-only buttons only for universally understood symbols
- Add tooltips on desktop for icon-only controls
- Keep label wording short and consistent
- Test whether users understand icons without help
Accessibility
Icon-only buttons need accessible names so screen reader users know what they do. Decorative icons should be hidden from assistive technology so they do not add noise. Icons must have sufficient contrast against their background, and important information should never be conveyed by an icon alone without text or another cue.
Managing icons as a system
- Choose or create a set: Use a consistent icon library or design a custom set.
- Define rules: Grid, stroke width, corner radius and style.
- Add to the design system: Components with sizes, states and usage guidance.
- Name icons clearly: Consistent names that match code.
- Review and extend: Add new icons following the same rules.
Keeping icons in the design system ensures every team uses the same symbols and styles, avoiding a mix of mismatched icons across the product.
Frequently asked questions
What are the main types of UI icons?
Navigation, action, status and feedback, object and file, input and form, social and brand, and decorative icons.
Should icons always have labels?
Key and uncommon actions should have labels. Icon-only buttons work for universally understood symbols such as search or close.
What size should UI icons be?
Common sizes are 16, 20, 24 and 32 pixels, with larger touch targets around them on mobile.
Outline or filled icons?
Either can work. Many products use outline for inactive and filled for active states, applied consistently.
Should icons be mirrored for Arabic interfaces?
Directional icons such as back arrows and progress indicators usually should be mirrored; universal symbols such as search or play usually should not.