Bootstrap Icons

Home / Guides / How to Use Icons in Responsive Website Design

How to Use Icons in Responsive Website Design

Icons that look right on a desktop can crowd a phone. Scale icons with type, protect touch targets and adapt to small screens.

Size in em

Using em keeps icons proportional to nearby text.

.icon { width: 1.25em; height: 1.25em; }

Touch targets

Wrap small icons in buttons of at least 44px.

.icon-btn { min-width: 44px; min-height: 44px; }

Hide or swap

Drop secondary icons on narrow screens to keep layouts calm.

Scaling with clamp

Use clamp() to let icons grow smoothly between a minimum and a maximum size, for example width: clamp(1.25rem, 2vw, 2rem). This avoids jumping between fixed breakpoints.

Icon-only navigation on small screens

On narrow screens you can swap text links for icons, but keep accessible names and touch targets of at least 44 pixels. Test thumb reach on a real phone.

Test at several widths

Check 320, 375, 480, 768, 1024 and 1440 pixels. Look for clipped icons, overlapping labels and controls that become too small to tap.

Quick checklist

  • Icon sizes use rem, em or clamp
  • Touch targets are at least 44px
  • Labels remain for key actions
  • No icon is clipped at 320px
  • The layout was tested on a real device

Common mistakes to avoid

Using fixed pixel sizes on every icon, shrinking touch targets below a comfortable size on phones, and testing only at desktop widths. Another mistake is hiding every label, which leaves new visitors guessing.

Conclusion

Responsive icons scale with their text, keep comfortable touch targets and keep labels where meaning could be lost. Test at several widths and on a real phone so nothing clips, overlaps or becomes hard to tap.

Frequently asked questions

Next steps

Try these ideas with real icons in the icon browser, or review the categories. See the license page for usage terms.

Related guides