How to trim an SVG icon bundle in a custom PHP site

An icon bundle grows easily: a project starts with a full set, then each page uses only a fraction of it. Shipping the entire set wastes bytes and makes it harder to see what the page actually needs. In a custom PHP site, the practical fix is to inventory the icons in production, keep those definitions, and load the resulting stylesheet directly.

BuiltToWinWeb’s site provides one concrete example: its icon stylesheet is a 4.8 KB subset covering the 97 icons in use. The stylesheet loads as a regular file, without a JavaScript loader or a separate noscript version. That is a useful implementation target, not a promise of a particular PageSpeed score. A score depends on the whole page, not one asset.

Start with the rendered pages

Do not guess which icons matter from a design file or a list of available glyphs. Inspect the pages and shared components that actually ship: navigation, buttons, forms, alerts, social links and footer elements. Include states that users can reach, such as an expanded menu or an error message. A glyph used only in a live interface state still belongs in the production set.

Make a short inventory of the icon names or classes found in the PHP templates and their CSS. Search the codebase for each class, then check the rendered pages in a browser. PHP templates can assemble class names conditionally, so a text search alone may miss a state-dependent icon. Also check any content or settings that can add an icon at runtime. If those names are not controlled, removing their definitions could break a real page.

Build a production subset

1. Copy the source bundle. Keep the original outside the production path so the subset can be regenerated or compared later. Do not edit a shared vendor file in place if other projects depend on it.

2. Retain only used definitions. Keep the CSS selectors and the SVG data or references those selectors need. Remove unused glyph rules and any font or asset declarations that the remaining icons do not require. Preserve names used by templates; changing a class while trimming creates needless breakage.

3. Check the complete dependency chain. A selector may rely on a shared rule, a custom property, or a file path declared elsewhere in the bundle. Keep those dependencies. Then compare the final list with the inventory rather than treating a smaller file as proof that it is correct.

4. Load the result directly. Reference the small stylesheet from the page’s normal stylesheet markup. Avoid adding a client-side loader just to bring in icons after the page starts rendering. If the icons are part of visible content, delayed styling can leave blank spaces or unstyled substitutes on screen.

Test the change on real routes

Check the homepage, inner pages and interactive states at desktop and mobile widths. Look for missing glyphs, incorrect colors, alignment shifts and icons that appear only after an interaction. Confirm that the stylesheet request succeeds and that its asset references resolve. Test a cold load as well as a repeat visit; cached files can hide a missing or delayed request.

Compare the network and rendering behavior before and after the change. The goal is not to make every stylesheet non-blocking. CSS needed to draw the page can affect the first render, and deferring icon rules may simply move the problem from download size to a visible late change. Instead, keep the icon file small and available when the page needs it. Check the browser’s performance report for warnings, but judge the result on the actual rendered page too.

Keep the subset from drifting

Icon trimming is maintenance, not a one-time cleanup. When a template adds a new glyph, update the inventory and the subset together. A short build or review checklist can require a search for icon classes and a visual check of shared components before release. If the source bundle changes, regenerate the subset from the updated source rather than pasting rules from an old copy.

This approach fits hand-coded PHP sites because the templates provide a clear place to audit usage, while the delivered stylesheet remains an ordinary asset. The important discipline is exactness: keep every glyph the site can render, remove the rest, and avoid introducing a loader that delays styling. That produces a lighter, more predictable icon path without pretending that icon cleanup alone determines a site’s performance score.