Icon fonts are dead; PNG icons are blurry. Inline SVG won — here's the professional pattern.
The magic of currentColor
<button class="btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2"/>
</svg>
Continue
</button>stroke="currentColor" makes the icon inherit the button's text color — hover states, dark mode and themes all work automatically with zero extra CSS.
Accessibility rules
- Decorative icon next to text:
aria-hidden="true"(as above) - Icon-only button:
aria-label="Search"on the BUTTON, icon stays hidden
Where to get them
Lucide, Heroicons, Tabler — free, consistent, copy-paste SVG. Keep one family per project; mixed icon styles scream amateur.
Many icons? Sprite it
<svg style="display:none"> <symbol id="i-check" viewBox="0 0 24 24">...</symbol> </svg> <svg class="icon"><use href="#i-check"/></svg> <!-- reuse anywhere -->