The Problem with Unnecessary JavaScript

In the era of Single Page Applications, many developers have fallen into the trap of using heavy JavaScript libraries for something as simple as displaying icons. React Icons, Font Awesome with JS, Heroicons with hydration... all these solutions add kilobytes of JavaScript that the browser must parse, compile and execute.

The result: pages that take longer to load, lower Core Web Vitals scores, and worse user experience especially on mobile devices. All this to show... static icons?

The alternative is surprisingly simple: SVG embedded directly in HTML. No JavaScript. No hydration. No runtime dependencies. Icons render instantly with the first byte of HTML, and animations are achieved with pure CSS, leveraging the browser's hardware acceleration.

Why Static SVG is Superior?

Extreme Speed

SVGs render on first paint. They don't wait for JavaScript to load or execute.

Perfect SEO

Crawlers see complete content without executing JS. Better indexing guaranteed.

Lower Consumption

No JavaScript = less CPU = longer battery life on mobile devices.

More Accessible

Works even when JavaScript is disabled. Better screen reader support.

Technical Implementation

It's this simple to implement an icon with hover animation in Astro:

component.astro

---
import { Icon } from 'astro-icon/components';
---

<div class="group">
  <Icon
    name="ph:rocket-launch-duotone"
    class="w-12 h-12 text-blue-600
           transition-transform duration-300
           group-hover:scale-110 group-hover:-rotate-6"
  />
</div>

Note: The group class on the parent container allows children to react to parent hover using group-hover:.

Living Design: Icons that Breathe without JavaScript