BETTER ICON AND LABEL ALIGNMENT

Summary from the TLDR Design newsletter

When list item text wraps to multiple lines, a centered icon ends up looking misaligned against the first line of text. Switching align-items to start and offsetting the icon with a translateY calculated from the lh unit keeps it aligned regardless of icon or font size. The same lh-based offset, paired with aspect-ratio, flex-shrink, and background-size: contain, fixes alignment for icons built as pseudo-elements too.