Icon Design Graphics Icon 4 — Questions and Answers
Question 1: Which SVG attribute controls the coordinate system and viewBox scaling for an icon?
- preserveAspectRatio
- viewBox (Correct answer)
- transform
- clipPath
Correct answer: viewBox
The viewBox attribute defines the internal coordinate system of an SVG, enabling it to scale proportionally to any display size.
Question 2: When should a designer use a 'two-tone' icon style rather than a flat monochrome style?
- When the icon must be smaller than 16px
- When additional visual hierarchy or depth is needed to differentiate parts of the icon (Correct answer)
- When the platform only supports PNG format
- When the icon will be used on a white background only
Correct answer: When additional visual hierarchy or depth is needed to differentiate parts of the icon
Two-tone styles use a secondary lighter or transparent color to add depth and help users distinguish different parts of a complex icon.
Question 3: What is the role of 'corner radius' in icon design?
- It determines the icon's overall size in pixels
- It controls the softness or roundness of icon edges, influencing the icon's personality and style (Correct answer)
- It sets the anti-aliasing level during export
- It defines the stroke end cap shape
Correct answer: It controls the softness or roundness of icon edges, influencing the icon's personality and style
Corner radius shapes an icon's character—sharper corners feel technical or formal, while rounder corners feel friendly and approachable.
Question 4: What problem does using an icon font (like Font Awesome) solve compared to individual SVG files?
- Icon fonts always render sharper than SVGs at all sizes
- Icon fonts allow styling icons with CSS text properties and deliver many icons in a single file (Correct answer)
- Icon fonts support animation natively
- Icon fonts automatically adapt to dark mode without code
Correct answer: Icon fonts allow styling icons with CSS text properties and deliver many icons in a single file
Icon fonts bundle many icons into a single font file, allowing CSS properties like color, size, and shadow to style them as text glyphs.
Question 5: Which design principle helps ensure an icon remains recognizable when converted to grayscale?
- Using high-saturation colors
- Relying on shape and form rather than color alone to convey meaning (Correct answer)
- Adding drop shadows to increase contrast
- Using thin outlines to separate elements
Correct answer: Relying on shape and form rather than color alone to convey meaning
Meaningful shapes allow icons to be understood without color, which is critical for accessibility and monochrome display contexts.
Question 6: What is 'icon padding' and why is it included inside an icon's bounding box?
- Space added between icon and label text in a button component
- Empty space around the icon artwork within its bounding box to ensure visual breathing room and alignment with other icons (Correct answer)
- Margin applied in CSS when placing an icon in a layout
- Extra pixels added during export to prevent clipping
Correct answer: Empty space around the icon artwork within its bounding box to ensure visual breathing room and alignment with other icons
Inner padding creates consistent optical spacing so icons don't appear to collide with adjacent elements when placed side by side.
Question 7: What is the MAIN advantage of designing icons on a standard grid (e.g., 24x24 with 1px increments)?
- It reduces the SVG file size by 50%
- It ensures anchor points align to pixel boundaries, producing crisp rendering at intended sizes (Correct answer)
- It automatically generates multiple size variants
- It enforces a specific stroke width across all icons
Correct answer: It ensures anchor points align to pixel boundaries, producing crisp rendering at intended sizes
Working on a pixel grid ensures that paths and anchor points land on whole pixel values, preventing sub-pixel blurring.
Icon Design Graphics Icon 4
Which SVG attribute controls the coordinate system and viewBox scaling for an icon?