Icon Design Icon Design MCQ 5 — Questions and Answers
Question 1: What is 'icon tokenization' in a design system?
- Converting icon files to Base64 for embedding in CSS
- Assigning semantic names to icon assets so they can be referenced by meaning rather than file name (Correct answer)
- Splitting an icon into multiple smaller SVG files
- Encrypting icon assets for intellectual property protection
Correct answer: Assigning semantic names to icon assets so they can be referenced by meaning rather than file name
Icon tokenization maps semantic names (e.g., 'icon/action/search') to specific assets, making it easy to swap icons system-wide without updating every reference.
Question 2: Which icon style is most appropriate for a professional enterprise software dashboard?
- Colorful cartoon icons with gradients
- Flat outlined monochrome icons (Correct answer)
- 3D photorealistic icons
- Emoji-style icons with facial expressions
Correct answer: Flat outlined monochrome icons
Flat outlined monochrome icons project clarity and professionalism, and they adapt easily to different UI themes without visual distraction.
Question 3: What is a 'compound path' in vector icon design?
- A path that contains multiple gradient stops
- Multiple vector paths merged into a single path object, often used to create cutouts (Correct answer)
- A path with more than 100 anchor points
- A path that is shared between two different icons
Correct answer: Multiple vector paths merged into a single path object, often used to create cutouts
Compound paths combine multiple sub-paths so that overlapping areas can appear as transparent holes, which is useful for icons with interior cutouts.
Question 4: When an icon is used as a button with no visible label, what accessibility attribute must be added in HTML?
- data-icon
- alt
- aria-label (Correct answer)
- title
Correct answer: aria-label
An aria-label provides a text description of the icon button's purpose for screen readers, since there is no visible text label.
Question 5: What is the main risk of using highly culturally specific metaphors in icon design for a global product?
- The icon file size increases significantly
- The metaphor may be unfamiliar or carry different meanings in other cultures (Correct answer)
- The icon cannot be exported as SVG
- The icon will not render correctly on dark backgrounds
Correct answer: The metaphor may be unfamiliar or carry different meanings in other cultures
A symbol that is intuitive in one culture—like a mailbox icon shaped like a US rural mailbox—may be unrecognizable to users in other regions.
Question 6: In icon animation, what does an 'easing curve' control?
- The path along which the icon moves across the screen
- The acceleration and deceleration of the animation over time (Correct answer)
- The color transitions during the animation
- The number of frames per second in the animation
Correct answer: The acceleration and deceleration of the animation over time
Easing curves define how an animation speeds up or slows down, making motion feel natural rather than robotic—ease-in-out is commonly used for icon transitions.
Question 7: What is the benefit of using 'sprite sheets' or SVG symbol sprites for web icon delivery?
- They allow icons to be animated with CSS more easily
- They reduce the number of HTTP requests by bundling multiple icons into a single file (Correct answer)
- They automatically generate dark mode variants
- They compress icon colors to a 256-color palette
Correct answer: They reduce the number of HTTP requests by bundling multiple icons into a single file
Bundling icons into a sprite sheet means the browser fetches one file instead of dozens of individual icon files, reducing page load time.
Icon Design Icon Design MCQ 5
What is 'icon tokenization' in a design system?