The Archivist's Two Shelves: On the Settled Order of Inline SVGs Versus the Shifting Pile of Icon Fonts

In the quiet corners of an archive, the method of storage defines the ease of access. One shelf holds a series of identical, labeled boxes; you know precisely where everything is, and retrieving an item is a matter of simple, predictable motion. Another shelf contains a single, large crate filled with a jumble of objects; finding the one you need requires sifting, shifting the contents, and hoping nothing is buried. This is the quiet, foundational difference between using inline SVGs and icon fonts on the web, a choice that fundamentally shapes layout stability and user perception.

Icon fonts arrived as a clever solution. By packaging dozens of glyphs into a single HTTP request and leveraging the text-rendering power of the browser, they offered a way to serve crisp, scalable vector icons efficiently. They feel like that single crate. It's a convenient bundle. But when the browser goes to 'retrieve' a specific icon—to render it on the page—it must first parse and apply the entire font file. This process, while fast, is not instantaneous. The dreaded flash of unstyled content (FOUT) or, worse, a flash of invisible text (FOIT), is the visual equivalent of that crate being upended and its contents spilling onto the floor before being hastily rearranged. The layout shudders as text reflows to accommodate icons that suddenly snap into existence, a subtle but perceptible break in the user's confidence.

Inline SVGs, in contrast, are the meticulously labeled boxes. Each icon is a self-contained entity, written directly into the DOM. There is no external dependency to fetch, no secondary resource that must load and process before the icon can be displayed. What you code is what you get, the moment the HTML itself is parsed. The layout is calculated with the icon's precise dimensions and placement already known. There is no subsequent shift, no jarring reflow. The experience is settled from the very beginning.

The trade-off, of course, is in the initial payload. An archive of labeled boxes takes up more shelf space than a single crate. Inlining many complex SVGs can increase your HTML's file size. Yet, this is a known, quantifiable cost paid upfront, not a deferred unpredictability. With modern compression and build processes that can smartly inline critical icons and serve the rest, this approach offers a superior guarantee of stability. The user is presented with a finished, stable composition immediately, not a page that nervously assembles itself before their eyes. In the pursuit of a calm and trustworthy interface, the archivist’s choice is clear: settle the shelf before the visitor arrives.

Notes & further reading

A few pages I came back to while writing this: