Lazy-loading icons: when it helps

Icons are usually tiny, so lazy-loading each one rarely pays off. But on icon-dense pages — think an icon browser like this one — deferring off-screen icons genuinely helps. Here's when to bother.

Small icons: don't overthink it

A handful of inline SVGs or a small sprite adds negligible weight. Lazy-loading them adds code and can cause layout shift for little gain. Ship them normally.

Icon-dense pages: defer off-screen

When you render hundreds or thousands of icons (galleries, pickers, dashboards), load only what's visible. Two easy techniques:

• loading="lazy" on <img> icons so off-screen ones fetch as you scroll.
• On-demand APIs (like Iconify) that fetch icon data only when an icon is actually rendered.
• Virtualized grids that only mount visible rows.

Avoid layout shift

Reserve space for lazy icons with fixed width/height or an aspect-ratio box, so the page doesn't jump as they load.

Frequently asked questions