In a design system, why is an icon's glyph size kept separate from its tappable area?
answer
- two sizes, two jobs
- hierarchy versus fingers
- pad the hit area, not the drawing
- glyph aligns, hit area overhangs
- neighbouring targets must not overlap
basics
~20 sGlyph size serves visual hierarchy and pairing with text, while the tappable area serves the finger or pointer. A small icon becomes easy to tap by padding its hit area around an unchanged glyph, never by stretching the drawing.
solid answer
~50 sThe glyph and the target do different jobs. The **glyph size** comes from the icon size set and is chosen for hierarchy and for pairing with the text beside it; the **target** is the area that responds to a tap or click and is sized for the finger or pointer. Coupling them forces a bad trade: stretch the icon and it becomes too loud and off the size set, or shrink the target and it becomes hard to hit. So a 20-unit power icon on a smart-home light tile sits inside a much larger padded hit area. The glyph, not the padding, aligns to the layout's edges, the hit area may overhang, and neighbouring hit areas must not overlap. Minimum target sizes are set by button guidance and WCAG 2.2 2.5.8, which measure the target, not the glyph.
go deeper
Recall that the glyph comes from the icon size set while the target is padded separately, and that a tap complaint is fixed by padding, never by stretching the drawing.
Explain why coupling the two sizes forces a bad trade between loud icons and missed taps, and how a padded hit area can overhang while the glyph stays aligned.
Show you would put the split into component contracts, so the icon exposes only a set size and the wrapper owns the target, and review crowded controls for overlapping targets.
Weigh compact, information-dense layouts against comfortable targets, knowing that shrinking targets to fit more controls moves the cost onto users with less precise input.
## Two sizes, two jobs Every interactive icon has two sizes that are easy to confuse: - The **glyph size** is the size of the drawn icon, taken from the design system's small fixed **icon size set**. It is chosen for visual reasons: how prominent the icon should be and which text it sits beside. - The **target size** (also called hit area or tappable area) is the region that responds when a finger, stylus or pointer lands on it. It is chosen for motor reasons: how accurately people can hit it. A design system keeps these as **separate decisions** because they answer different questions. Visual hierarchy wants many icons to be small and quiet; fingers want every tappable thing to be comfortably large. ## What goes wrong when they are coupled | Coupling | What happens | Example in a smart-home control app | |---|---|---| | Stretch the glyph to fill the target | The icon becomes loud, off the size set and out of pairing with its label | A power icon blown up to fill a light tile's corner shouts louder than the room name | | Shrink the target to the glyph | The control is hard to hit, and neighbouring controls get triggered by mistake | A 16-unit edit icon in a room row that users keep missing | | Stretch the drawing to a non-set size | Strokes scale off spec and can render blurry | A gear icon scaled to an in-between size to make it easier to tap | The consistent answer is to leave the glyph at its set size and **grow the hit area with padding**. ## Padding the hit area In practice the icon component draws the glyph at its set size, and the interactive wrapper around it (an icon button, a tappable row, a tile) owns the target: 1. Choose the glyph size from the set for its visual role, for example 20 units beside body text in a device list. 2. Wrap it in a hit area sized to the product's target guideline. Platform guidelines commonly recommend targets of roughly 44 to 48 units for touch, well above most glyph sizes. 3. Centre the glyph within the hit area, so taps near any edge of the icon land inside. 4. Check that the enlarged hit area does not **overlap** a neighbouring target; overlapping targets make taps ambiguous. The standards side measures the same thing. WCAG 2.2 success criterion **2.5.8 Target Size (Minimum)** (Level AA) is written about the size of the *target*, and its Understanding document measures targets such as menu items by their text plus padding, not by the glyph. The exact minimum and its exceptions belong to the button guidance; the point here is that the target, not the drawing, is what gets measured. ## Keeping padded icons aligned Padding creates a layout problem: a padded icon button is wider than it looks. If the hit area's edge is aligned to the content margin, the glyph appears indented relative to the text above and below it. Common solutions: - Align the **glyph** to the margin and let the hit area **overhang** into the surrounding space, as long as it does not collide with another target. - In a row of icons, space the glyphs by the layout's rules and let their hit areas meet, not overlap, in between. - When two small actions are too close for both hit areas to fit, **space them further apart, merge them, or move the secondary action** into a menu. ## Where the rule lives in the system The split shows up in the component contract. The icon itself exposes only a size from the set. The interactive component that wraps it exposes, or fixes, the target. This keeps teams on the web and on native mobile from solving tap problems by reaching for an ever-larger icon. A good review question for any icon-bearing control is simply: *what size is the glyph, what size is the target, and do they come from different rules?* ## Why interviewers ask it The question is a quick check that a candidate thinks of an interface as both something seen and something touched. A candidate who proposes enlarging the icon to fix a tap complaint has merged the two; a candidate who pads the target and keeps the glyph on the size set has not.
- A padded icon button in a device list sits further in than the text above it. How do you fix the alignment?Align the glyph, not the hit area, to the content margin, and let the padded hit area overhang into the surrounding space. The visual edge then lines up with the text while the target stays large. Check the overhang does not overlap another target.
- Two small icons in a thermostat tile are too close for both hit areas to be large. What are the options?Overlapping targets make taps ambiguous, so do not let them overlap. Space the glyphs further apart, combine the actions into one control, or move the less frequent action into a menu or the detail screen. Spacing between targets also improves accuracy on its own.
saying these in an interview costs you the question
- Scale the icon up until it fills the touch target.
- The visible glyph size defines how large the tap area is.
- A small icon is easy to tap as long as it renders crisply.
- Overlapping padded hit areas between neighbouring icons are harmless.
- An icon's hit area only needs to cover its drawn strokes.