Better Icon and Label Alignment

There is a common design pattern that sometimes gets missed or overlooked. It’s having a list of items, each with an icon. When the text is one line, the icon is centered, but when the text has multiple lines, the icon is still centered but looks odd.

Here is an example:

Throughout this article, I will show two solutions that I use based on the HTML:

The icon is an HTML element (e.g., <svg> or <img> )

or ) The icon is added via a pseudo-element as a background image

The icon in the markup

In this case, we have a container with the icon and the content. Usually, we use flexbox. Like so:

< ul class = " list " > < li class = " list-item " > < svg class = " icon " > </ svg > < span class = " label " > How to align an icon to a label. </ span > </ li > </ ul >

.list-item { display : flex ; align-items : center ; gap : 0.5rem ; }

By default, it looks okay. Here it is:

... continue reading