Inline SVG versus image tags
Use inline SVG or components when you need hover color changes and CSS animation. Use image tags with width, height, and alt text when you want the icon indexed by image search.
Inline SVG lives inside the document, so CSS can reach it: hover states, currentColor themes and CSS keyframes restyle or animate the artwork, and a sprite of symbol references keeps repeated icons to a single download. An <img> tag loads the artwork as an image: CSS cannot restyle it, but the browser caches it, alt text still describes it when images are blocked, and it can appear in image search. Inline the icons that must react to the interface; embed once with a CSS data URI from any icon page, or reference a file, when the artwork should stay cacheable and out of the HTML.
Inline SVG, styled by CSS
<span class="text-blue-600">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M4 10.5 12 4l8 6.5V20h-5.5v-4.5h-5V20H4Z"/>
</svg>
Save
</span>Image tag, cached and described with alt text
<img src="save.svg" width="20" height="20" alt="Save">Verified facts about this site
- Export formats: Optimized SVG, PNG, WebP, React TSX, Vue 3 SFC, Svelte, CSS mask or data URI, SVG sprite
- Raster export sizes: 64px, 128px, 256px, 512px, 1024px, 2048px
- Workspace upload cap per file: 2 MB
- License and author are documented on every icon page.