Icon Design Technology & Digital Applications 3 — Questions and Answers
Question 1: In iOS app icon design, which shape does Apple use as the standard container for app icons?
- Circle
- Square with rounded corners (squircle) (Correct answer)
- Pentagon
- Hexagon
Correct answer: Square with rounded corners (squircle)
Apple uses a superellipse (often called a squircle) with specific corner rounding as the standard iOS app icon mask.
Question 2: What is the recommended baseline icon size for Android adaptive icons' foreground and background layers?
- 48x48 dp
- 72x72 dp
- 108x108 dp (Correct answer)
- 192x192 dp
Correct answer: 108x108 dp
Android adaptive icons use 108x108 dp layers, where the inner 72x72 dp safe zone is guaranteed to always be visible.
Question 3: Which tool within Figma allows designers to see how an icon looks at very small sizes before exporting?
- Component Inspector
- Zoom to 100% or smaller in the canvas (Correct answer)
- Auto Layout panel
- Prototype preview mode
Correct answer: Zoom to 100% or smaller in the canvas
Zooming the Figma canvas to 100% or smaller simulates actual pixel rendering and reveals clarity issues at small sizes.
Question 4: What does 'icon font' mean in the context of web UI development?
- A typeface designed to look like icons
- A font file where glyphs are replaced with icon graphics (Correct answer)
- A CSS framework for animating icons
- A variable font that adjusts icon weight
Correct answer: A font file where glyphs are replaced with icon graphics
An icon font is a typeface where each character slot contains an icon graphic, allowing icons to be rendered via CSS like text.
Question 5: Why might a designer prefer SVG icons over icon fonts for modern web projects?
- SVG icons have smaller file sizes than icon fonts
- SVG icons offer better accessibility, multi-color support, and independent scaling (Correct answer)
- SVG icons are easier to animate than icon fonts
- SVG icons require less CSS to implement than icon fonts
Correct answer: SVG icons offer better accessibility, multi-color support, and independent scaling
SVG icons support multiple colors, are more accessible to screen readers, and scale independently without anti-aliasing issues.
Question 6: In macOS icon design guidelines, what is the recommended canvas size for submitting an app icon to the Mac App Store?
- 512x512 px
- 1024x1024 px (Correct answer)
- 2048x2048 px
- 3000x3000 px
Correct answer: 1024x1024 px
Apple requires a 1024x1024 px PNG as the master app icon for macOS submissions to the Mac App Store.
Question 7: What is the function of the `aria-hidden='true'` attribute placed on a decorative SVG icon in HTML?
- It hides the icon visually from all users
- It prevents screen readers from announcing the icon (Correct answer)
- It disables click events on the icon
- It removes the icon from the DOM entirely
Correct answer: It prevents screen readers from announcing the icon
Setting `aria-hidden='true'` tells assistive technologies to ignore the element, preventing redundant or confusing announcements for decorative icons.
Icon Design Technology & Digital Applications 3
In iOS app icon design, which shape does Apple use as the standard container for app icons?