Optimizing Icons for Web: File Size, Names, and Tap Targets
Optimizing icons for web means three separate jobs: a small file, a name that assistive technology can use, and a target a finger can hit. A pretty SVG that is still huge, unlabeled, and too small to tap fails all three. This page is a production checklist for interface icons. It is not a design-trend roundup, and it is not legal advice about accessibility lawsuits.
Media Icons already has notes on SVGO and on responsive icons. Use those when you want the tool or the scaling question on its own. Use this checklist when you are about to ship a set.
Choose a format that matches the artwork
An interface icon is usually a few filled shapes. SVG is the right file for that. It stays sharp when the layout scales, and you can recolor it. A photograph of a product, or a textured illustration with gradients and noise, is not an icon problem. Leave that as a raster image and do not force it through an icon pipeline.
MDN documents where an SVG can stand in as an image: an HTML img or picture, a CSS background, list-style-image, the content property, an SVG image or use element, and canvas drawImage. The same page lists the limits that apply when SVG is used as an image. Script does not run. External files such as images and style sheets are not loaded unless you inline them as data URLs. Visited-link styles are not painted. Those limits are a feature when the icon is decorative. They are a problem when you expected a script inside the file to draw the icon.
If the icon must change color with the surrounding text, put the SVG in the HTML and use currentColor for the fill or stroke. An img pointing at an SVG file will not pick up the button’s text color. Google’s web.dev icons guide makes the same split: inline SVG can be styled like any other element; an img cannot.
Strip the file before you argue about compression
Exported SVG is full of editor debris: editor namespaces, hidden layers, unused ids, and decimal coordinates carried out to six places. Run a dedicated optimizer before you invent a sprite system. SVGO is the tool most teams mean by that. The project describes itself as a Node.js tool for optimizing SVG files. Point it at the export, keep a copy of the original in version control, and diff the result. If a path disappears, the export had a hidden object, not a bug in the optimizer.
A few settings matter more than the rest. Turn artwork into shapes you meant to ship, not into a font. Remove unused groups. Do not let the optimizer rewrite ids that your CSS already targets. If two icons share a gradient, decide whether that gradient is worth the bytes. A single solid fill is smaller and easier to recolor.
Then look at one icon, not the zip of the whole set. If the optimized file is still a traced bitmap or a compound path from a logo, redraw it with a few shapes, or stop calling it an icon.
Names, empty alt text, and what not to hide
web.dev’s icons guide draws the line that matters. If a button or link already has visible text, the icon is presentational. On an img, an empty alt attribute says that. An empty alt is not the same as a missing alt. A missing alt lets some browsers fall back to the file name, which is worse than silence. On inline SVG, aria-hidden=”true” keeps the graphic out of the accessibility tree so the visible text is read once.
If the icon is the only thing in the control, it is no longer presentational. The control needs an accessible name. Put that name on the button or link, and keep the icon hidden. Describe the action, not the picture: “Close dialog”, not “X”. web.dev shows both patterns: alt text on an img when the image itself is the content, and aria-label on the control with aria-hidden on the inline SVG when the icon sits inside a button.
Do not put a second name on the icon and on the button. Screen readers will announce both. Lucide’s accessibility notes say the same thing from the library side: their icons ship with aria-hidden because the name belongs on the control, not on the glyph. Match any tooltip to that name so sighted and non-sighted users get the same words.
A decorative icon in running text can stay an img with alt=””. A status icon that is the only signal, such as an error mark with no words beside it, cannot. Add the words, or name the control.
Target size and contrast
A 16-pixel glyph is fine to look at and easy to miss with a thumb. WCAG 2.2 success criterion 2.5.8, Target Size (Minimum), level AA, says the target for pointer inputs is at least 24 by 24 CSS pixels, with exceptions for spacing, an equivalent control, inline text, user-agent controls, and cases where the small size is essential. The understanding document is explicit that this is a minimum, and that larger targets help. For an icon button, keep the drawn icon at whatever size matches the set, and pad the button until the hit area is at least 24 by 24 CSS pixels. Spacing can save an undersized target only when a 24 CSS pixel circle centered on it does not intersect another target. A toolbar of 16-pixel icons with no gap fails that test. Add the gap or grow the button.
Color is the other failure. WCAG 2.2 success criterion 1.4.11, Non-text Contrast, level AA, requires a contrast ratio of at least 3:1 between a graphical object that is required to understand the content and the adjacent colors. A pale gray icon on a white header often misses that. If the icon uses currentColor, it inherits a text color you already chose for reading, which is usually darker than a “subtle” icon gray. Check the actual pair, not the brand swatch in isolation. The criterion has exceptions, including inactive components and graphics that are essential, so do not treat every decorative flourish as a failure. Do treat the only icon on a button as a graphical object people need.
A shipping pass for optimizing icons for web
Run this list on the set, not on a single favorite icon.
- One source file per icon, named for the action or object, not for the frame in the design tool.
- SVGO or an equivalent cleanup, then a visual diff against the export.
- Inline SVG when the icon must follow text color. An img or a CSS mask when it does not, and when you want the image-context restrictions MDN describes.
- Empty alt or aria-hidden when visible text already names the control. A name on the control when the icon is alone.
- Hit area at least 24 by 24 CSS pixels, or spacing that meets 2.5.8. Do not count browser zoom as the fix. The understanding document says the requirement does not change when the user zooms, because CSS pixels do not.
- Contrast of meaningful icons at least 3:1 against the surface behind them, per 1.4.11.
- A keyboard check: tab to the button, see the focus style, activate it with Enter and Space.
When that list is done, the set is ready to put in the product. Optimizing icons for web is finished for this release when a new icon can go through the same seven steps without a special case. If a symbol needs a special case, redraw it or write the exception down next to the file so the next person does not rediscover it in production.
