Icon Design Quality Control & Assurance 5 — Questions and Answers
Question 1: An icon set is reviewed and some icons have a viewBox of '0 0 24 24' while others have '0 0 20 20'. Why is this a QA failure?
- The colors differ between sets
- Inconsistent viewBox values mean icons won't scale uniformly or align predictably in a grid (Correct answer)
- SVG doesn't support different viewBox sizes
- The file names are incompatible
Correct answer: Inconsistent viewBox values mean icons won't scale uniformly or align predictably in a grid
A unified viewBox across all icons ensures they scale and align consistently when placed in a grid or alongside each other.
Question 2: What QA measure helps prevent icon library 'bloat' over time?
- Adding icons freely without review
- Establishing a deprecation and audit process to remove redundant or unused icons (Correct answer)
- Converting all icons to PNG to reduce SVG complexity
- Duplicating icons with slight variations
Correct answer: Establishing a deprecation and audit process to remove redundant or unused icons
A deprecation process with regular audits removes redundant, outdated, or unused icons to keep the library lean and maintainable.
Question 3: Which scenario represents a real-world QA edge case specific to icon color in dark mode?
- Icon file size increases
- A white icon becomes invisible against a white background when the app's dark mode uses a light card surface (Correct answer)
- Icons load slower at night
- SVG gradients break in Firefox
Correct answer: A white icon becomes invisible against a white background when the app's dark mode uses a light card surface
Dark mode surfaces can vary (not all backgrounds are dark), so a white icon may vanish against a light card within a dark-themed UI.
Question 4: A designer submits an icon where the shape is a compound path combining multiple sub-paths. What QA step verifies this was handled correctly?
- Checking the file extension
- Confirming the fill rule (evenodd vs nonzero) produces the intended visual result (Correct answer)
- Measuring pixel dimensions
- Validating the file name format
Correct answer: Confirming the fill rule (evenodd vs nonzero) produces the intended visual result
Compound paths depend on the fill rule to determine which enclosed areas are filled or transparent, and an incorrect rule inverts cutouts.
Question 5: What is the best practice for versioning an icon library to support QA traceability?
- Overwriting existing files with new versions and noting changes verbally
- Using semantic versioning (e.g., v2.1.0) with a changelog documenting additions, changes, and removals (Correct answer)
- Renaming files with random identifiers
- Versioning by designer name
Correct answer: Using semantic versioning (e.g., v2.1.0) with a changelog documenting additions, changes, and removals
Semantic versioning with a changelog lets teams understand the scope of changes and trace when specific icons were added, modified, or deprecated.
Question 6: During QA, an icon tested with a screen reader produces no accessible label. What is the correct fix?
- Add a drop shadow to improve visibility
- Include a <title> element or aria-label attribute so assistive technology can announce the icon's purpose (Correct answer)
- Convert the icon to a PNG
- Increase the icon's display size
Correct answer: Include a <title> element or aria-label attribute so assistive technology can announce the icon's purpose
SVG icons need a <title> element or aria-label so screen readers can announce what the icon represents to visually impaired users.
Question 7: A QA audit reveals that icons exported for iOS use point units while web icons use pixel units at a 1:1 ratio. Why could this cause a display issue on Retina displays?
- Points and pixels are always identical on all screens
- On Retina (2x) screens, 1 point = 2 pixels, so a 24pt iOS icon needs a 48px asset to appear sharp (Correct answer)
- iOS doesn't support SVG icons
- Pixel units are invalid on mobile devices
Correct answer: On Retina (2x) screens, 1 point = 2 pixels, so a 24pt iOS icon needs a 48px asset to appear sharp
Retina displays use a 2x pixel density, so assets sized in points must be delivered at 2x pixel resolution to avoid appearing blurry.
Icon Design Quality Control & Assurance 5
An icon set is reviewed and some icons have a viewBox of '0 0 24 24' while others have '0 0 20 20'.
Why is this a QA failure?