Icon Design Technology & Digital Applications 4 — Questions and Answers
Question 1: When exporting icons for a Windows application, which format provides both scalable vector and embedded bitmap layers?
- PNG
- ICO (Correct answer)
- GIF
- WEBP
Correct answer: ICO
The ICO format supports multiple embedded bitmap sizes and can include vector data, making it the standard for Windows application icons.
Question 2: What is the primary advantage of using a CSS icon system with `<use>` and an SVG sprite over inline SVGs?
- It allows icons to be animated
- It caches the sprite file, reducing repeated downloads of the same icons (Correct answer)
- It enables icon shadows without extra code
- It automatically adjusts icon size for mobile screens
Correct answer: It caches the sprite file, reducing repeated downloads of the same icons
An external SVG sprite loaded with `<use>` is cached by the browser, so repeated icons across a site are served from cache rather than re-downloaded.
Question 3: In Figma, what feature allows a team to maintain a single source of truth for all icons used across multiple design files?
- Frames
- Shared Libraries (Team Libraries) (Correct answer)
- Constraints
- Auto Layout
Correct answer: Shared Libraries (Team Libraries)
Figma's Shared Libraries allow designers to publish component icons once and use them across all project files, ensuring consistency.
Question 4: What does 'dark mode' compatibility require from an icon designer's perspective?
- Icons must be exported as separate black-and-white files
- Icons should use semantic color tokens or offer alternate versions that remain legible on dark backgrounds (Correct answer)
- Icons must be redesigned from scratch for dark mode
- Icons need a drop shadow added to be visible on dark backgrounds
Correct answer: Icons should use semantic color tokens or offer alternate versions that remain legible on dark backgrounds
Dark mode compatibility means icons should use color tokens or alternate color schemes that adapt to background changes, not just white-on-dark.
Question 5: Which of the following best describes 'stroke-based' icon design as opposed to 'filled' icon design?
- Stroke icons use only gradients, while filled icons use flat color
- Stroke icons are defined by outlines with no fill, while filled icons have solid shape interiors (Correct answer)
- Stroke icons are raster-based, while filled icons are vector-based
- Stroke icons are used only for print, while filled icons are used for screens
Correct answer: Stroke icons are defined by outlines with no fill, while filled icons have solid shape interiors
Stroke (outline) icons consist of visible contour lines without filled interiors, giving a lighter, more open aesthetic compared to filled icons.
Question 6: What technical issue commonly occurs when a stroke-based SVG icon is scaled down without adjusting stroke weight?
- The icon becomes too bright
- The stroke becomes disproportionately thick relative to the icon size, reducing clarity (Correct answer)
- The fill color overrides the stroke color
- The icon loses its vector properties
Correct answer: The stroke becomes disproportionately thick relative to the icon size, reducing clarity
Stroke weight does not scale automatically in all contexts, so a 2px stroke on a 24px icon may appear far too heavy on a 12px version.
Question 7: In Material Design, what are the five icon themes offered in the Material Symbols library?
- Flat, Outlined, Bold, Thin, Colored
- Outlined, Rounded, Sharp, Filled, Two-tone (Correct answer)
- Solid, Line, Duotone, Gradient, Animated
- Classic, Modern, Minimal, Retro, Neon
Correct answer: Outlined, Rounded, Sharp, Filled, Two-tone
Material Symbols provides Outlined, Rounded, Sharp, Filled, and Two-tone style variants to match different visual contexts.
Icon Design Technology & Digital Applications 4
When exporting icons for a Windows application, which format provides both scalable vector and embedded bitmap layers?