Better icon and label alignment

Title “Better Icon and Label Alignment”, author’s photo, a demo with “Icon” and “Font size” sliders, two list items reading “How to align an icon to a label.”, and a CSS code block.

Ahmad Shadeed starts with a list where align-items: center drifts as soon as a label wraps to a second line, while align-items: start leaves the icon too high because of the line box around the text. The fix is the lh unit: half the difference between the line box and the icon size, applied as a translateY() offset that holds at any font size. Icons drawn as pseudo-elements need a couple of extra declarations.

ishadeed.com/article/aligning-list-icons