DEV Community

Cover image for Why Your Website in 2025 Should Stop Using Raster Icons
Andrey S Kalmatskiy
Andrey S Kalmatskiy

Posted on

Why Your Website in 2025 Should Stop Using Raster Icons

#webdev #design #frontend

I feel a little awkward saying this - it seems like I’m stating the obvious - but even in 2025, we still see websites (including those backed by billions of dollars and the work of hundreds of developers and designers) using raster graphics for icons.

Google Drive and FB.com
(Google Drive and FB.com)

Maybe companies shy away from vector graphics because they think it's too complicated.
This article aims to briefly dispel those doubts: vector graphics are simple, stylish, and modern.

Why SVG is the Right Choice

Modern web development offers two main approaches for vector graphics: TTF/OpenType fonts and SVG.
Here’s why SVG is better:

  • Crisper rendering at any size, including fractional scaling - fonts can blur.
  • Better accessibility - screen readers ignore decorative SVGs by default (fonts can cause confusion).
  • No font loading delay.

In short: a modern website should be using SVG, not custom fonts.

Inline vs. External SVGs

You can use SVGs in two ways:

  • Reference an external SVG file via <img src="icon.svg">.
  • Embed the full SVG markup inside your HTML using the <svg> tag.

The second method has major advantages:

  • No extra downloads.
  • Full style control via CSS and JS (colors, strokes, filters).

However, when pages contain many repeated icons, developers often include full copies of SVG markup inline.

It's hard to believe that each instance of this tiny globe icon has 1.5Kb of coordinates in text form
(It's hard to believe that each instance of this tiny globe icon has 1.5Kb of coordinates in text form)

That needlessly bloats page size and creates serious performance issues:

  • Page size increases dramatically (see the above image).
  • Every SVG fragment is parsed and rendered separately, consuming CPU/GPU.
  • Each instance occupies separate GPU memory.

A Better Way: Define Symbols Once

There’s a simple solution - define all your icons once at the top of your HTML:

<svg width="0" height="0" style="display:none;">
  <defs>
    <symbol id="like-svg" viewBox="0 0 170 170" fill="#000">
      <path d="M 74 122 L 31 81 ... Z"/> <!-- Put the content of your SVG-file. -->
    </symbol>
    <symbol id="close-svg" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" stroke-linecap="round">
      <line x1="17" y1="7" x2="7" y2="17"/> <!-- Same here- just an SVG-file data -->
      <line x1="7" y1="7" x2="17" y2="17"/>
    </symbol>
    <!-- More symbols... -->
  </defs>
</svg>
Enter fullscreen mode Exit fullscreen mode

Then, whenever you need an icon:

<svg class="main-icon" width="24" height="24"><use href="#like-svg"/></svg>
Enter fullscreen mode Exit fullscreen mode

Et voila.

Benefits of This Method

This approach gives you the best of all worlds:

  • No delays from additional resource loading.
  • No page size bloat from repeated code.
  • Potential for symbol-level caching.
  • Full CSS/JS control over transforms, scale, color, fill, stroke.
  • Ability to compose complex icons from layered elements.
  • Support for **filters **like soft shadows or outlines.

Native Light/Dark Theme Support with SVG

One of SVG’s most powerful features is its automatic adaptation to light and dark themes.

Here’s how:

  1. Replace fixed fill/stroke in SVG with: fill="currentColor" stroke="currentColor"

  2. Assign icon color via CSS:

.main-icon {
  color: var(--iconColor);
}
Enter fullscreen mode Exit fullscreen mode
  1. Define light/dark values: 
:root { --iconColor: #225; }
@media (prefers-color-scheme: dark) {
  :root { --iconColor: #aaf; }
}
Enter fullscreen mode Exit fullscreen mode

That’s it. No JS required - your SVG icons will automatically recolor based on the system theme using just one image.

Example: latis.cc in light and dark mode

dark and light mode example

Why This Matters

Using embedded SVGs + <use> + currentColor:

  • Delivers instant, synchronous rendering.
  • Enables GPU caching of rendered images (depending on engine).
  • Keeps your single-page app **lean **and removes all coordinate/geometry duplication.
  • Allows you to style icons freely via CSS.
  • Supports any scale or pixel density - your UI won’t feel outdated.
  • Supports any number of color schemes, with fill, stroke, and filters.

And most importantly: it’s much easier than it seems.

For example, my favorite community link sharing site, latis.cc, uses no raster graphics at all — except for user-uploaded images.
Even the logo and favicon are SVG.

This is how nice and sleek it looks:

Latis.cc 100% SVG

Upcoming Topics

A few things I plan to cover in future posts:

  • Optimizing SVG path coordinates - with a few simple tricks, you can reduce size up to 10×.
  • Implementing a **programmatic light/dark **theme toggle.
  • Hosting icon atlases in external SVG files, referencing them via <use> - useful for multi-page sites.
  • Exploring SVG animations.
  • Soft shadows with filters.

TL;DR Bitmap icons got zero rizz, fr. SVGs only — no cap. 🧢✨

Top comments (0)