Icon Design Graphics Icon 3 — Questions and Answers
Question 1: What is the difference between 'outlined' and 'filled' icon styles in a design system?
- Outlined icons are always larger than filled icons
- Outlined icons use strokes to define shapes while filled icons use solid shapes (Correct answer)
- Outlined icons support color while filled icons are monochrome only
- Outlined icons are vector and filled icons are raster
Correct answer: Outlined icons use strokes to define shapes while filled icons use solid shapes
Outlined icons rely on stroke paths for their form, while filled icons use solid closed shapes, giving each a distinct visual weight.
Question 2: Which icon design approach is BEST for representing abstract concepts like 'trust' or 'security'?
- Literal depiction of the word spelled out
- Established metaphors such as a shield or padlock (Correct answer)
- Photorealistic illustration
- Using color alone without a recognizable shape
Correct answer: Established metaphors such as a shield or padlock
Established visual metaphors leverage shared cultural understanding, making abstract concepts immediately recognizable.
Question 3: What is 'icon bleeding' and why is it a problem?
- Color from one icon overlapping adjacent icons in a sprite sheet
- An icon whose artwork extends beyond its bounding box or trim area (Correct answer)
- A rendering bug that causes icons to appear in the wrong color
- An icon that looks too similar to another icon in the set
Correct answer: An icon whose artwork extends beyond its bounding box or trim area
Bleeding occurs when an icon's visual elements extend past its defined bounding box, potentially clipping or overlapping other UI elements.
Question 4: Why should icon designers avoid using very thin strokes (under 1px) at small icon sizes?
- Thin strokes are not supported by SVG format
- They become invisible or render as blurry half-pixels on standard screens (Correct answer)
- They increase SVG file size dramatically
- Design system guidelines prohibit strokes under 2px
Correct answer: They become invisible or render as blurry half-pixels on standard screens
Sub-pixel strokes cannot be rendered as a full pixel, causing anti-aliased blurring that makes lines appear faint or fuzzy.
Question 5: What is an icon 'artboard' used for in vector design tools like Figma or Illustrator?
- Storing the color palette associated with an icon
- Defining the icon's canvas boundary, dimensions, and export region (Correct answer)
- Grouping multiple icon states (hover, active, disabled)
- Adding accessibility metadata to the icon file
Correct answer: Defining the icon's canvas boundary, dimensions, and export region
An artboard sets the icon's bounding dimensions and determines what gets included when the icon is exported.
Question 6: In the context of icon design, what does 'visual center' mean?
- The mathematical center of the icon's bounding box
- The point where the icon appears optically balanced to the human eye, which may differ from the geometric center (Correct answer)
- The center pixel of a raster icon
- The center of the heaviest color region
Correct answer: The point where the icon appears optically balanced to the human eye, which may differ from the geometric center
The visual center is slightly above the geometric center due to how human perception works, so icons placed at geometric center can feel low.
Question 7: What does 'icon affordance' mean in UX design?
- The cost of licensing an icon set
- The icon's visual suggestion of how it can be interacted with or what action it triggers (Correct answer)
- The file size budget allocated to icons in an app
- The number of color variants an icon supports
Correct answer: The icon's visual suggestion of how it can be interacted with or what action it triggers
Affordance refers to how well an icon's visual design communicates its purpose or interactivity to the user.
Icon Design Graphics Icon 3
What is the difference between 'outlined' and 'filled' icon styles in a design system?