A list looks tidy when every row starts with one icon. Then one item gets three icons, another gets five, and the labels stop lining up.

The tempting fix is to adjust the gap. That works for one row and breaks another. The gap was consistent already; the space before it was changing.

Give every row the same leading slot, then put a limit on what can occupy it. In this React example, that means a shared CSS Grid column, a bounded icon stack, and an explicit rule for overflow.

Why the labels drift

Suppose a row contains an icon group followed by its label:

< li className = "source-row" > < IconGroup members = { item . members } /> < div className = "row-content" > { item . label } </ div > </ li >

Enter fullscreen mode

Exit fullscreen mode

With a content-sized group in a flex row, the label follows the group's width. One badge takes less space than three overlapping badges. Even with identical icon sizes and gaps, the labels start at different positions.

That is reasonable flex behavior.…