SVG icons versus icon fonts: technical trade-offs

WHAT THIS TESTS Whether you understand how each technology actually renders, and can justify a recommendation on performance, accessibility, and scalability rather than habit.

A GOOD ANSWER COVERS An icon font packages icons as glyphs in a font file, mapped to characters; the browser renders them as text. That means they scale by font-size and inherit color, which is convenient, but they are subject to font anti-aliasing and hinting, so edges can look slightly blurry off the pixel grid, and they are monochrome per glyph. Accessibility is awkward because a screen reader may read the mapped character, so you need aria-hidden and pseudo-element tricks, and if the font fails to load the user sees a tofu box or the wrong character. You also typically ship the entire font even when using a few icons. SVG icons are genuine vector graphics: crisp at any resolution, capable of multiple colors, gradients, and animation, individually accessible with a title element and role or aria-label, and inlinable so they can be styled with CSS, including currentColor. They tree-shake or are bundled per-icon, so you ship only what you use, and they fail gracefully.

COMMON WRONG ANSWERS Claiming icon fonts are crisper; they are subject to text rendering blur. Ignoring the tofu fallback failure mode. Saying SVGs cannot be colored by CSS. Treating accessibility as equivalent. Defaulting to icon fonts for a new project without a compelling reason.

LIKELY FOLLOW-UPS When might a legacy codebase justify keeping an icon font? How does an SVG sprite compare to inline SVG? How does currentColor work? What about HTTP overhead for many individual SVGs?

ONE CONCRETE EXAMPLE For a new design-system-driven React app you advocate SVG: each icon is a component, tree-shaken so only used icons ship, accessible via aria-label, multicolor where needed, and pixel-crisp on high-DPI screens, styled with currentColor for theming. You would only lean toward an icon font for a constrained legacy environment already built around one, where retrofitting SVG handling is not worth the churn, accepting the blur and accessibility caveats consciously.