Icon Design Case Studies & Practical Application 5 — Questions and Answers
Question 1: A SaaS company inherits an icon library from an acquired startup. Half the icons use outlined style, half use filled style. The product lead says to just 'use both.' What problem does this create?
- Doubled storage requirements
- Visual inconsistency that signals lack of design cohesion and can confuse users about the meaning of filled vs. outlined states (Correct answer)
- Longer load times on slow connections
- Icons will fail automated accessibility scans
Correct answer: Visual inconsistency that signals lack of design cohesion and can confuse users about the meaning of filled vs. outlined states
Mixing filled and outlined styles without a system rule creates ambiguity—many design systems use fill state to indicate 'selected,' so mixing styles breaks that convention.
Question 2: A designer creates a 'home' icon that tests at 94% recognition globally. However, in a specific country, it scores only 58%. What is the most likely explanation?
- The file format is incompatible in that region
- The traditional house architecture in that culture differs significantly from the icon's Western-style roof silhouette (Correct answer)
- The icon file is corrupted in that locale
- The country uses right-to-left text which mirrors the icon
Correct answer: The traditional house architecture in that culture differs significantly from the icon's Western-style roof silhouette
The 'home' metaphor is deeply tied to architectural vernacular; regions with different building forms may not recognize a pitched-roof silhouette as a universal home symbol.
Question 3: An accessibility audit flags that several icon-only buttons in an app have no accessible name. What is the standard fix?
- Make the icons larger
- Add aria-label attributes (or equivalent) to icon buttons so screen readers can announce their purpose (Correct answer)
- Add tooltips only
- Replace icon buttons with text buttons
Correct answer: Add aria-label attributes (or equivalent) to icon buttons so screen readers can announce their purpose
WCAG 2.1 requires interactive elements to have accessible names; aria-label provides this for icon-only controls without changing the visual design.
Question 4: A designer is tasked with creating a 'sync' icon. They draw two circular arrows. A developer points out this is identical to the 'refresh' icon already in the system. How should this be resolved?
- Use the same icon for both since they are functionally similar
- Differentiate one icon by adding a distinguishing element—such as a two-device silhouette for sync—to clarify distinct actions (Correct answer)
- Rename the refresh action to sync
- Use animation to differentiate them
Correct answer: Differentiate one icon by adding a distinguishing element—such as a two-device silhouette for sync—to clarify distinct actions
When two distinct actions share a similar metaphor, adding a contextual element (like a device pair for sync) provides the visual disambiguation users need.
Question 5: A design team is auditing icon tap targets on a mobile app and discovers the visual icons are 20x20px but the tap areas are only 20x20px as well. What is the recommended fix?
- Increase icon visual size to 44x44px
- Maintain the visual icon size but expand the invisible tap target area to at least 44x44px per platform guidelines (Correct answer)
- Reduce the number of icons in the interface
- Switch to text labels
Correct answer: Maintain the visual icon size but expand the invisible tap target area to at least 44x44px per platform guidelines
Apple HIG and Google Material Design both recommend minimum 44x44pt or 48x48dp touch targets, achievable by adding padding around a smaller visual icon.
Question 6: A fintech app redesigns its transaction icons from colorful emoji-style images to monochromatic line icons. User trust scores increase after the change. What most likely explains this?
- Monochromatic icons load faster, improving perceived performance
- Simplified, professional icon style aligns with the user's expectation of a serious financial product (Correct answer)
- The color removal fixed a color-blindness accessibility issue
- Fewer colors reduce cognitive load across all app types
Correct answer: Simplified, professional icon style aligns with the user's expectation of a serious financial product
Users expect a visual language that matches the context—finance demands professionalism, which monochromatic icons reinforce over playful colored alternatives.
Question 7: A product uses a pencil icon for 'edit' in one section and a pen icon for 'edit' in another. Users submit support tickets saying they are confused. What is the core problem?
- The icons use different stroke weights
- Using two different icons for the same action violates semantic consistency and undermines the icon vocabulary (Correct answer)
- The pencil icon is copyrighted
- The pen icon fails color contrast requirements
Correct answer: Using two different icons for the same action violates semantic consistency and undermines the icon vocabulary
Semantic consistency requires that identical functions always use the same icon; mixing similar-but-different icons for the same action fragments the visual language.
Icon Design Case Studies & Practical Application 5
A SaaS company inherits an icon library from an acquired startup.
Half the icons use outlined style, half use filled style.
The product lead says to just 'use both.' What problem does this create?