Icon Design Technology & Digital Applications 5 — Questions and Answers
Question 1: What is the purpose of pixel hinting (or pixel fitting) when designing icons at small sizes?
- To add drop shadows that align with screen pixels
- To manually align vector paths to pixel boundaries so edges render crisply (Correct answer)
- To reduce the icon's color depth for smaller file sizes
- To automatically resize icons across different screen sizes
Correct answer: To manually align vector paths to pixel boundaries so edges render crisply
Pixel hinting aligns vector anchor points to exact pixel boundaries, preventing sub-pixel rendering that causes blurry edges at small sizes.
Question 2: Which web technology allows icons to change color dynamically based on CSS `color` inheritance without any additional CSS targeting the icon directly?
- PNG with alpha channel
- Inline SVG using `currentColor` (Correct answer)
- Base64-encoded JPEG
- Icon font with CSS class
Correct answer: Inline SVG using `currentColor`
Using `currentColor` in SVG `fill` or `stroke` attributes makes the icon inherit the color value from its CSS context automatically.
Question 3: What is the safe zone in Android Adaptive Icon design, and why does it matter?
- A restricted color area that must remain white for brand consistency
- The inner 66dp circle (within a 108dp canvas) guaranteed to be visible under all mask shapes (Correct answer)
- The padding area between two icon layers that prevents blending
- The maximum icon size allowed before Android auto-scales it down
Correct answer: The inner 66dp circle (within a 108dp canvas) guaranteed to be visible under all mask shapes
The safe zone is the inner guaranteed-visible area; placing key art outside it risks clipping by different launcher masks (circle, squircle, etc.).
Question 4: When converting an icon from a design tool to SVG for production, which step helps reduce file size without quality loss?
- Increasing the canvas DPI
- Running the SVG through an optimizer like SVGO to remove redundant markup (Correct answer)
- Converting all paths to raster layers first
- Embedding a JPEG preview inside the SVG
Correct answer: Running the SVG through an optimizer like SVGO to remove redundant markup
SVGO (SVG Optimizer) strips unnecessary metadata, comments, and redundant attributes from exported SVG code without changing visual output.
Question 5: Which icon grid dimension is most commonly used as the design baseline in Google's Material Design icon system?
- 16x16 dp
- 24x24 dp (Correct answer)
- 48x48 dp
- 64x64 dp
Correct answer: 24x24 dp
Material Design uses a 24x24 dp grid as the baseline icon size, with a standard content area and defined padding zones.
Question 6: What does 'optical sizing' mean in the context of icon design?
- Resizing icons based on the user's screen brightness
- Adjusting stroke weight, detail level, and proportions so an icon looks visually balanced at different sizes (Correct answer)
- Using optical illusions to make icons appear larger than they are
- Matching icon dimensions to the surrounding font's cap height
Correct answer: Adjusting stroke weight, detail level, and proportions so an icon looks visually balanced at different sizes
Optical sizing means tailoring detail, stroke weight, and proportions at each size so the icon looks equally balanced whether at 16px or 512px.
Question 7: In Figma, what is the recommended way to prepare an icon component so that its color can be easily changed by other designers using the component?
- Flatten all layers into a single rasterized image
- Use Figma's 'Fill' style variables or set the path fill to a theme color variable rather than a hardcoded hex (Correct answer)
- Lock the component so only the owner can change its color
- Export the icon as a PNG and reimport it as a shape
Correct answer: Use Figma's 'Fill' style variables or set the path fill to a theme color variable rather than a hardcoded hex
Binding icon fills to Figma color variables or styles allows component users to swap themes without detaching or editing the master component.
Icon Design Technology & Digital Applications 5
What is the purpose of pixel hinting (or pixel fitting) when designing icons at small sizes?