CSS tip to align icons with text

Did you know about the “cap” unit in CSS? 1cap is equal to the height of a capital letter (relative to current font size).

This is especially helpful to align icons to accompanying text, such as inside button — by setting the icon height to 1cap.

HTML

<div class="container">
  <div class="icon"><!-- icon --></div>
  <div class="text">Settings</div>
</div>

CSS

.container {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.container .icon {
  height: 1cap;
  aspect-ratio: 1;
}