What Icons Do in Web Design — and Where They Fail
Icons are not decoration. They are mini-signals that help an eye recognize a function in milliseconds — a magnifying glass for search, a padlock for security, a pencil for editing.
Well-chosen icons reduce text load, guide the eye and create recognition across a website. They are the silent vocabulary of a brand, long before anyone reads the first sentence. Those looking for the visual language layer behind icons will find the right background in the article on visual language.
Poorly chosen icons do the opposite. They confuse, because three styles were mixed. They slow the page down, because a 300 KB icon font was loaded for five symbols. They violate licenses that are rarely read in the rush.
This article takes an honest look at the selection of web design icons: which sources matter in 2026, in which format icons are delivered today, what the license actually permits and how Noevu built its own stack. For a project-specific assessment, a short conversation about the right solution is worthwhile.
A fiduciary firm in Zurich started its website relaunch with three icon sets — Font Awesome for navigation, Heroicons for service pages and stock SVGs from Flaticon for the footer. Each set looked good on its own. Together, the site looked as if three different agencies had worked on it.
When Icons Are Useful — and When They Cause Harm
An icon earns its place when it makes a function immediately recognizable. Phone handset for call, envelope for email, arrow for next — these meaning pairs are so culturally established that no accompanying text is needed.
Once that is no longer the case, an icon costs more reading attention than it saves. Three stick figures with three different hats do not explain an audience. An abstract shape next to a service entry does not explain a service.
For Swiss SME sites, a simple test applies: if an icon cannot be clearly understood without its accompanying text, the text is mandatory — or the icon goes.
Icons help when …
Icons cause harm when …
SVG, Icon Font or Variable Font — What Works in 2026
Three formats are available for icons: inline SVG, SVG sprite or a webfont — either a classic icon font or a modern variable font like Material Symbols. The difference feels technical, but has direct consequences for performance, style control and maintenance.
Inline SVG means the icon sits as XML directly in the HTML. Advantage: individually styleable, multi-color, animatable. Disadvantage: with many icons it bloats the HTML. SVG sprites collect all symbols in one file and reference them via <use>. Scalable, but somewhat more brittle to maintain.
Webfonts load a font file that contains glyphs instead of letters. Classic icon fonts (Font Awesome-style) are considered outdated — they are monochrome, hard to keep accessible, and often deliver an entire set even though the website uses twenty icons. Variable fonts like Material Symbols solve this problem: a single font with axes for stroke weight, fill and size — subsettable to the icons actually used.
| Inline SVG | SVG Sprite | Variable Font (subset) | Icon Font (classic) | |
|---|---|---|---|---|
| Payload for 25 icons | 10–30 KB | 5–15 KB | approx. 2 KB | approx. 80–300 KB |
| Multi-color possible | via axes | – | ||
| Stroke weight via CSS | – | – | – | |
| Maintenance for new icons | high | medium | Build step | low |
| Accessibility out of the box | – |
As of May 2026. "Variable Font (subset)" refers to Material Symbols woff2, subsetted to the icons used (see Noevu in practice section).
For new SME websites, the honest recommendation in 2026 is: inline SVG for one or two decorative hero icons, subsetted variable font for UI icons. Classic icon fonts are being phased out — but the migration pain rarely makes sense for icons alone; it tends to happen naturally with the next relaunch.
The Most Important Icon Libraries in 2026 Compared
Seven libraries dominate the selection for modern websites in 2026. They differ in style character, scope, license and suitability for SME sites. The order is not a ranking but a description of fit.
| Number of icons | License | Style character | When appropriate | |
|---|---|---|---|---|
| Material Symbols | 3000+ × 3 styles | Apache 2.0 | neutral, variable | Default for SME sites |
| Lucide | 1500+ | MIT | outline, slim | Component-based frontends (React, Vue) |
| Phosphor | 1248 × 6 weights | MIT | friendly, soft | When stroke-weight hierarchy matters |
| Heroicons | 292 × 3 styles | MIT | precise, geometric | Tailwind projects, lean UIs |
| Tabler Icons | 5000+ | MIT | outline, technical | Admin dashboards, broad coverage |
| Iconify | 300k+ from 200 sets | per set | per set | When an exotic set is needed |
| Font Awesome Free | 2000+ | CC BY 4.0 | established, full | Legacy — not the first choice in 2026 |
Sources: phosphoricons.com, lucide.dev, fonts.google.com/icons, iconify.design — as of May 2026.
Anyone without a strong brand style requirement is safest with Material Symbols — vast concept coverage, variable axes, clean license. When the brand is distinctly soft or unconventional, Phosphor is worth considering as an alternative. Lucide remains the clean answer for component-based frontends. Three libraries cover the style requirements of virtually every SME project — but only one gets used per website.
Understanding Licenses: MIT, CC BY 4.0 and the "Free" Misconception
"Free" does not mean "free to use". Behind that word lie three different agreements, and only one of them is genuinely uncomplicated for commercial Swiss websites.
MIT and Apache 2.0 license: commercially usable, no attribution required, source code may be modified. This applies to Lucide, Heroicons, Tabler, Phosphor, Bootstrap Icons and Material Symbols. The clean choice, because no attribution obligation exists.
CC BY 4.0: also commercially usable, but formally requires crediting the authors. This is exactly where the trap lies with Font Awesome Free and Boxicons — many sites use the icons without the required notice in the footer or legal information page.
Pro or premium tier: stock portals (Flaticon, Iconscout, Streamline) are built on subscription models. Here the license is tied to an active account, download volumes and sometimes project types. After the contract ends, many icons may formally no longer be used.
License checklist before launch
Font Awesome Free is frequently used in German-speaking regions without the required CC BY attribution. The glyphs are under CC BY 4.0 — the accompanying code is under MIT. Anyone using Font Awesome Free on a commercial website formally needs an attribution notice. In practice it is almost always missing. Those who want to avoid this switch to Lucide, Tabler or Material Symbols.
Accessible Icons: aria-hidden vs aria-label
Icons only matter to screen readers when they carry meaning. The most important distinction is: decorative icon or meaningful icon.
A decorative icon sits next to text that already conveys the meaning — an arrow next to "Next", an envelope next to "Write email". Here the icon should be hidden from the screen reader, otherwise the information is doubled. This is done with aria-hidden="true" on the SVG or span element.
A meaningful icon stands alone — a pure hamburger menu symbol, a lone magnifying glass icon on mobile. Here the screen reader must be able to announce the function. This is solved either with an aria-label on the button or a visually hidden text via the .sr-only class.
// Dekorativ — der Text trägt die Bedeutung
<button>
<span class="material-icon" data-icon="arrow_forward" aria-hidden="true"></span>
Weiter
</button>
// Bedeutungstragend — Icon allein
<button aria-label="Suche öffnen">
<span class="material-icon" data-icon="search" aria-hidden="true"></span>
</button>AI-Generated Icons — Where They Work Today and Where They Don't
AI tools can now generate icons. Recraft V4 Vector delivers real SVG files, Iconify AI responds in seconds, and Ideogram also produces icon-like shapes on request. For a single hero symbol or an illustrated pictogram, these tools are useful — for a complete UI vocabulary, not yet.
The problem is consistency. A UI needs twenty to forty symbols in exactly the same visual style: same stroke weight, same corner radius, same proportion between inner space and outer edge. Current AI models do not reliably hit this consistency across an entire set. What works at icon one drifts by icon fifteen.
Sensible use today: AI icons for one or two standalone pictograms that are not part of a toolbar. For UI icons, an established library remains the clean solution in 2026.
A pop-up studio from Bern generated fifteen service icons via Recraft and used them directly. At first glance everything looked fine. In live operation it became apparent that three icons appeared proportionally larger than the rest and two had a different stroke weight. The correction ultimately cost more effort than starting with a Material Symbols set for the standard UI plus targeted individual illustrations for the service cards would have done.
Icons and SEO: Why the Format Affects Core Web Vitals
Icons are not a direct SEO ranking factor. Google does not evaluate their selection, style or quantity. Nevertheless, the chosen format has measurable consequences for Core Web Vitals — and Core Web Vitals feed into rankings.
A classic icon font with three hundred kilobytes for five used glyphs delays the first render output step (LCP). An undefined width/height attribute on SVG icons causes layout shifts (CLS). A subsetted Material Symbols woff2 of two kilobytes contributes to neither problem.
For most Swiss SME sites with moderate traffic, the effect is small but real. Anyone serious about search engine optimization also checks the icon system during a performance audit — typically as part of a broader SEO check.
How Noevu Uses Icons in Practice
On noevu.ch, Material Symbols runs as a subsetted webfont. A build step scans the source code for icon names (data-icon="foo" as well as *Icon schema fields in JSON), loads only these glyphs from Google Fonts and writes them to a dedicated woff2 file.
The result: around 140 icons across the entire website, delivered together in a single file of approximately two kilobytes. No external requests, no render delay, one central location for new symbols. When a new icon is added, one command is run, and the next delivery includes the glyph.
This pipeline is not an end in itself. It is the leanest way to deliver a consistent icon vocabulary without having to renegotiate an old design decision with every relaunch.
What Noevu values about the Material Symbols workflow
Conclusion
Icons are a small but effective design element. Choosing a set means checking license, style character and concept coverage — and sticking with it. Choosing the format in 2026 means thinking in SVG or subsetted variable font, not in classic icon fonts.
For most Swiss SME websites, Material Symbols is the lowest-risk default choice. Lucide and Phosphor are worth it when brand style or technical stack suggests them. Stock portals and AI tools remain tools for individual cases, not for the UI vocabulary.
A deliberate icon decision costs less effort than the retrospective style-correction cycle. It pays off year after year through performance, brand clarity and license peace of mind.
Which icon set suits the website and how performance, license and brand style work together can be assessed honestly in twenty minutes.
Frequently Asked Questions
Which icons are free for commercial use?
Truly free for commercial Swiss websites are Material Symbols, Lucide, Heroicons, Phosphor, Tabler and Bootstrap Icons — all under the MIT license. Font Awesome Free and Boxicons are under CC BY 4.0 and formally require attribution. Stock platforms like Flaticon or Iconscout operate under their own licensing terms and do not belong in a website's icon vocabulary.
What is the difference between an icon font and SVG icons?
An icon font loads a font file with glyphs referenced via CSS classes. An SVG icon is a real vector graphic — either inline in the HTML, as a sprite, or via a subsetted webfont. SVG allows multi-color symbols, precise animation and better screen reader behavior. Icon fonts are technically outdated; the SVG ecosystem took over their strengths in 2026.
How do I choose an icon set for my website?
Three criteria matter. First: does the style character match the brand (outline, solid, geometric, soft)? Second: does the set cover the required concepts — UI, industry, navigation? Third: does the license allow commercial use without mandatory attribution? Material Symbols and Lucide meet all three criteria most reliably for the majority of SME websites.
Is Material Symbols free?
Yes. Material Symbols is licensed under Apache 2.0 and can be used freely, both privately and commercially — without attribution. The older variant Material Icons continues under the same terms. Both variants can be embedded as a font or loaded as individual SVGs. On noevu.ch, the woff2 variant is subsetted and delivers the used icons in approximately two kilobytes.
Which icon library suits a Swiss SME website in 2026?
For classic SME sites with clear visual language, Material Symbols works as the default — variable axes for stroke weight and fill, MIT-adjacent via Apache 2.0, vast concept coverage. Lucide is the second choice when the frontend is heavily component-based (React, Vue). Phosphor is worth it when design hierarchy across six stroke weights plays a real role.
