Serve WebP, download PNG
The PNG is the download, the thing you keep and edit. It is not what a browser should be asked to render. A full resolution PNG behind a 96 pixel tile is the single most common cause of a page shipping megabytes it did not need, and it is invisible in code review because the URL looks perfectly ordinary.
Thridy serves a WebP for display at around six kilobytes for a grid thumbnail, which is roughly forty per cent smaller than the same artwork as a lossless PNG, measured across five real icons from this library rather than quoted from a blog post. Use the WebP embed on the page and keep the PNG for the design file.
Tell the browser how each one loads
Every image on a page should declare how it loads. The one or two icons in your hero are the ones a visitor sees first, so those load eagerly. Everything below the fold gets loading equals lazy, which stops a feature grid of twelve icons competing with the content somebody actually came for.
Set width and height on the element as well. Without them the browser does not know how much space to reserve, the text jumps down when the image arrives, and your layout shift score records it.
Where they work hardest
A 3D icon buys you warmth and depth, so spend it where a page needs personality: a feature grid, a pricing tier, an empty state, a 404, a testimonial block, a step in an onboarding flow. These are the places a line icon reads as functional and forgettable.
Keep one style across all of them. Nine icons in a feature grid from three different sets is more noticeable than any single icon choice, and it is the kind of thing a visitor registers as sloppiness without being able to name it.
Alt text, and when to use none
An icon that carries meaning needs alt text describing what it means, not what it looks like. Next to a heading that reads Secure by default, the padlock wants alt text of nothing at all, because the heading already says it and a screen reader announcing padlock immediately afterwards is repetition.
An icon that IS the link needs alt text saying where the link goes. A shopping cart with no text beside it should be Basket rather than shopping cart icon, because the person hearing it needs the destination and not the drawing.
A purely decorative icon takes an empty alt attribute and aria-hidden, which removes it from the reading order entirely. Most icons in a feature grid are in this category: the words carry the meaning and the picture carries the mood.
