Icon Sizes in rem (16px, 20px, 24px, 32px)

Standard Icon Sizes: px to rem

Icons are fundamental UI elements. Here are the standard sizes used across major icon systems:

Icon Size Conversion Table

px	rem	Usage
12	0.75	Inline micro icons (caret, dot)
14	0.875	Small inline icons (external link arrow)
16	1	Inline text icons, small buttons
20	1.25	Default in some systems (Heroicons)
24	1.5	Standard default (Material, Lucide)
32	2	Medium feature icons, navigation
40	2.5	Large feature icons, empty states
48	3	Hero icons, marketing sections
64	4	Extra-large illustrations

Icon System Defaults

Icon System	Default Size	rem
Material Icons	24px	1.5rem
Lucide React	24px	1.5rem
Heroicons	20px / 24px	1.25 / 1.5rem
Font Awesome	16px (1em)	1rem
Phosphor Icons	24px	1.5rem

rem vs em for Icons

• rem — Icon size is relative to the root. Consistent across the page.
• em — Icon size is relative to the parent font size. The icon scales with nearby text.

For standalone icons (navigation, toolbars), rem is preferred for consistency. For inline icons next to text (like a link icon beside a label), em ensures the icon matches the text size:

.icon-inline {
  width: 1em;
  height: 1em;
}

.icon-standalone {
  width: 1.5rem;  /* 24px */
  height: 1.5rem;
}

Optical Alignment

Icons often need slight size adjustments to appear visually aligned with text. A 24px icon next to 16px text may look too large. Common approach:

.button-icon {
  width: 1.25rem;  /* 20px — slightly smaller than 24px default */
  height: 1.25rem;
  margin-right: 0.5rem; /* 8px gap */
}

Touch Target Considerations

Even if the visual icon is 24px (1.5rem), the clickable area should be at least 44px x 44px (2.75rem) per WCAG 2.5.8. Use padding to expand the touch target:

.icon-button {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.625rem; /* (44 - 24) / 2 = 10px */
}