Icon Design Icon Design MCQ 4 — Questions and Answers
Question 1: What is the standard icon size used in the macOS menu bar?
- 16x16 px
- 18x18 px
- 22x22 px (Correct answer)
- 32x32 px
Correct answer: 22x22 px
macOS menu bar icons are typically 18x18 pt with a 22x22 pt bounding box to maintain consistent visual weight along the menu bar.
Question 2: In icon design, what does 'visual weight' refer to?
- The file size of the icon asset
- The perceived heaviness or lightness of an icon based on its stroke width, fill, and detail (Correct answer)
- The number of anchor points in an icon's vector path
- The opacity setting applied to the icon layer
Correct answer: The perceived heaviness or lightness of an icon based on its stroke width, fill, and detail
Visual weight describes how heavy or bold an icon appears, influenced by stroke thickness, filled vs. outlined style, and overall complexity.
Question 3: Which approach is recommended when designing icons for both light and dark mode?
- Create two completely separate icon sets
- Use semantic color tokens that adapt to the current color scheme (Correct answer)
- Use only gray icons that work on both backgrounds
- Invert the icon colors programmatically at runtime
Correct answer: Use semantic color tokens that adapt to the current color scheme
Semantic color tokens (e.g., 'icon-primary') map to different values in light and dark themes, letting one icon asset adapt automatically.
Question 4: What is the purpose of padding (safe zone) around an icon within its bounding box?
- To increase the icon's file size for better quality
- To ensure adequate spacing so icons don't appear cramped when placed in layouts (Correct answer)
- To define the icon's active click area
- To store metadata about the icon's category
Correct answer: To ensure adequate spacing so icons don't appear cramped when placed in layouts
A safe zone or padding creates optical breathing room around the icon shape, preventing it from looking clipped or too tight in the grid.
Question 5: Which technique helps maintain icon legibility when the icon is very small (under 16px)?
- Adding gradients and shadows
- Simplifying details and increasing stroke weight (Correct answer)
- Using more anchor points for precision
- Increasing the number of colors used
Correct answer: Simplifying details and increasing stroke weight
At small sizes, complex details merge together and become muddy, so simplifying shapes and using heavier strokes preserves readability.
Question 6: What does 'exporting at 1x, 2x, and 3x' mean when preparing icons for mobile apps?
- Exporting icons in three different file formats
- Exporting icons at three levels of color depth
- Exporting icons at three pixel densities to support standard, Retina, and Super Retina displays (Correct answer)
- Exporting icons with three different stroke weights
Correct answer: Exporting icons at three pixel densities to support standard, Retina, and Super Retina displays
Mobile devices have varying pixel densities (1x, 2x, 3x), so providing multiple export scales ensures sharp rendering on all device screens.
Question 7: In SVG icon code, what does the 'viewBox' attribute define?
- The visible color of the icon
- The coordinate system and aspect ratio of the SVG canvas (Correct answer)
- The animation duration of the icon
- The z-index of the icon in the DOM
Correct answer: The coordinate system and aspect ratio of the SVG canvas
The viewBox attribute defines the internal coordinate space of the SVG, allowing it to scale proportionally when its width and height are changed.
Icon Design Icon Design MCQ 4
What is the standard icon size used in the macOS menu bar?