The Inline SVG Layer of app.onepassapps.com: 491 Icons in 27 Drawings, and the Class That Hides 154 of Them on a Small Screen

I work on OnePassApps, the team behind app.onepassapps.com. This post is a census of our own served HTML: the inline vector graphics the server sends before a single line of our app code runs, counted across all 56 URLs in our sitemap.

Everything below was measured on 10 November 2026 with plain HTTPS from one machine, outside the browser, signed out, no session, no cookies and no JavaScript executed. One guide page was then opened in a real browser at two viewport widths to check how the stylesheet behaves. Facts file: content/svg-icon-layer-facts-2026-11-10.json. Tool: tools/svg-icon-layer-final-2026-11-10.py.

The headline: 491 inline SVG elements

Every page in our sitemap carries inline SVG, and almost all of it is one repeated drawing in one repeated shape.

inline svg elements   491
icons (class gd-icon) 458
startup avatar        33
pages with icons      23
pages with the avatar 33
distinct icon drawings 27

Of the 491 elements, 458 are icons and 33 are the same startup avatar repeated. Every one of the 458 icons carries the same eleven attributes - one icon shape in the served HTML, with only the size and the class changing from instance to instance:

viewBox      0 0 24 24
fill         none
stroke       currentColor
stroke-width 1.7
stroke-linecap / stroke-linejoin  round
aria-hidden  true
focusable    false

Three sizes are used: 220 icons at 24 by 24, 216 at 16 by 16 and 22 at 20 by 20.

27 drawings behind 458 icons

The icons are not 458 different drawings. They are 27 distinct path drawings, repeated. One of them is used 105 times: 61 times as a plain icon and 44 times with the extra class described below. The other drawings appear between once and a few dozen times each.

Not one of the 491 elements carries a name

Across all 56 pages:

svg with a title child   0
svg with a role          0
svg with an aria-label   0

Every one of the 458 icons is marked decorative with aria-hidden true, so the icon itself is not the thing that gets read - the text beside it carries the meaning. The 33 avatars are the only inline SVG elements on the site not marked that way. They have no title child, no role and no label, so in the served markup they are graphics without a name. We are reporting what the attributes say, not making a claim about how any particular screen reader announces them.

The class that hides 154 of them below 768 pixels

154 of the icons carry a second class, gd-d, and they appear only on our 22 guide pages. In the whole 255,426 bytes of our stylesheet the token gd-d appears exactly 2 times, and both are the same rule:

media query condition: (width < 768px) or ((width < 1024px) and (height <= 500px))
rule inside that media query: .gd .gd-d.gd-d{display:none}

The rule sits inside one media query - width under 768 pixels, or width under 1024 pixels with a height of 500 pixels or less. In practice that class marks everything we drop on a small screen. A browser check on one guide page confirms it: at 1280 pixels wide the 7 gd-d icons on that page computed display block and all 7 of them were visible; at 390 pixels wide the same 7 icons computed display none and none of them was visible.

The class is not really about icons at all. It also sits on 348 other elements across those pages - a, b, div, p, span - which is how we hide the parts of a guide that do not fit a small screen. All 22 of the 20 by 20 icons are gd-d icons, exactly one per guide page, the one in the side panel button.

The avatar, 33 times

The startup avatar - the element our build marks with the startup-sam data attribute - is a single drawing repeated on every page except our guides. Each copy carries four gradients, three linear and one radial, with 12 stops in 10 distinct colours, one drop-shadow filter, 2 paths, five internal ids and nine internal references. All 33 copies draw the same thing.

Where the icons live, and where they do not

The 22 app pages carry no inline icon at all in the served HTML, and a browser check after the bundle boots found the same: 1 inline SVG element on the booted app page, and that one is the avatar. Our 22 guide pages carry the icons - 17 of them with 19 icons and 5 with 17 - and the guide index carries 50. The icon drawing is a guide-shell thing, not an app thing.

The guide pages with 17 icons rather than 19 are newsflow, movie-tracker, subtitle-workbench, teleprompter, citation-formatter.

What I did not do

One build, one day, one network, signed out, one GET per URL, plain HTTPS and no JavaScript for the census; the browser check ran on a single guide page at two widths, and a booted app page once. I did not test any other browser, did not check how a screen reader announces the avatar, and did not compare against the app pages' runtime DOM beyond that one booted page. The stylesheet file name is content-hashed, so the rule above is the one in the build we measured today.

If you want to see the icons yourself, the guide shell is at [https://app.onepassapps.com/guides?utm_source=devto&utm_medium=community&utm_campaign=svg-icon-layer&utm_content=guides-link] and the home page that carries the avatar is at [https://app.onepassapps.com/?utm_source=devto&utm_medium=community&utm_campaign=svg-icon-layer&utm_content=home-link].