Flag assets are deceptively simple: they're images. But the right delivery method depends on your use case, performance budget, and whether you need to manipulate colors. Here's a systematic breakdown of every approach, with trade-offs for each.
Method 1: The <img> Tag
The simplest approach: <img src="/flags/us.svg" alt="United States" width="32" height="24" />. Browsers cache SVGs efficiently, and this works in every framework. The downside: you can't style the SVG's internal colors with CSS, and you get no accessibility control over internal SVG structure. Best for: simple display, no color customization needed.
Method 2: Next.js Image Component
In Next.js, use the Image component for automatic optimization: <Image src="/flags/us.svg" alt="United States" width={32} height={24} unoptimized />. Note the unoptimized prop — Next.js image optimization doesn't process SVGs by default. For PNG flags, omit unoptimized to get automatic WebP conversion and srcset generation. This is the recommended approach for any Next.js project.
Method 3: Inline SVG
Inline SVG gives you maximum control. You can change fill colors with CSS, animate paths, and add interactivity. The trade-off is bundle size and no browser caching. Implementation pattern: create a React component that accepts the SVG markup as a prop, or use a bundler plugin that imports SVG files as React components (SVGR). Use this when you need hover states, theme-aware colors, or animated flags.
Method 4: CSS Background Images
background-image: url('/flags/us.svg') works well for decorative flags in CSS-heavy layouts. Combine with background-size: cover or contain. The main limitation: no alt text for accessibility, so this should be reserved for purely decorative use cases. A common pattern is using it on :before pseudo-elements for icon-style flag indicators.
Method 5: CDN Embedding
Flagswing provides CDN URLs for each asset. Reference them directly: <img src="https://cdn.flagswing.com/flags/us/standard.svg" />. This offloads bandwidth and leverages global CDN caching. Important: set crossOrigin='anonymous' if you need to draw the image on a Canvas element (e.g., for image composition). CDN embedding is ideal for email templates, third-party embeds, and platforms where you can't serve local files.
Performance Checklist
For flag grids with 50+ items: use PNG with lazy loading and srcset. For individual hero flags: use SVG directly or inline SVG. For country selectors/dropdowns: load a sprite sheet or use an icon font. Always provide meaningful alt text describing the flag ('Flag of Germany'), not just the country name. For internationalization, localize the alt text to the user's language.