Icon Design Icon Design MCQ 3 — Questions and Answers
Question 1: What is 'icon metaphor' in the context of UI design?
- A gradient technique used to add depth to icons
- A visual symbol that represents an abstract concept through familiar real-world objects (Correct answer)
- A method for animating icons in CSS
- A standard for naming icon files
Correct answer: A visual symbol that represents an abstract concept through familiar real-world objects
An icon metaphor uses recognizable real-world imagery (like an envelope for email) to communicate abstract digital concepts.
Question 2: Which design principle ensures icons in a set feel visually unified?
- Variety
- Consistency (Correct answer)
- Complexity
- Transparency
Correct answer: Consistency
Consistency in stroke weight, corner radius, size, and style ensures that icons from the same set feel like they belong together.
Question 3: In Figma, which feature is most useful for managing and reusing icons across a design system?
- Auto Layout
- Components and Variants (Correct answer)
- Prototyping links
- Export presets
Correct answer: Components and Variants
Components and Variants allow designers to create a single icon component with multiple states (size, style, color) that can be reused and updated globally.
Question 4: What is 'pixel hinting' in icon design?
- Adding a drop shadow to improve legibility
- Adjusting vector paths to align to the pixel grid for sharper rendering at small sizes (Correct answer)
- Increasing the icon's stroke weight at small sizes
- Using a limited color palette for better screen rendering
Correct answer: Adjusting vector paths to align to the pixel grid for sharper rendering at small sizes
Pixel hinting aligns vector anchor points to pixel boundaries, preventing anti-aliasing blur when icons render at small sizes on screen.
Question 5: Which color property is most critical to check when designing icons for accessibility?
- Hue
- Saturation
- Contrast ratio (Correct answer)
- Opacity
Correct answer: Contrast ratio
WCAG guidelines require a minimum contrast ratio of 3:1 for UI components including icons to ensure visibility for users with low vision.
Question 6: What is the advantage of using an icon font (like Font Awesome) over SVG icons?
- Icon fonts support multicolor icons natively
- Icon fonts can be styled with CSS text properties like color and font-size (Correct answer)
- Icon fonts render with better quality at large sizes
- Icon fonts load faster than inline SVG
Correct answer: Icon fonts can be styled with CSS text properties like color and font-size
Icon fonts behave like text, so CSS properties like color, font-size, and text-shadow apply directly, simplifying theming in web projects.
Question 7: When should a designer add a text label alongside an icon in a UI?
- Only when the icon is animated
- When the icon's meaning may be ambiguous to the target user (Correct answer)
- Only in mobile interfaces
- When the icon uses more than two colors
Correct answer: When the icon's meaning may be ambiguous to the target user
Labels should accompany icons whenever the visual symbol alone might be misunderstood, especially for unfamiliar or abstract concepts.
Icon Design Icon Design MCQ 3
What is 'icon metaphor' in the context of UI design?