Crisp, consistent, scalable icons. Modern icon libraries are SVG-based — so they stay razor-sharp at any size and recolour with a single CSS property.
Because icons are SVG (or icon-fonts), size and colour are just CSS. Drag the slider and pick a colour — every icon on the page updates instantly.
Left to right: Font Awesome (icon font), Lucide (SVG), Heroicons (inline SVG).
Lucide is a community fork of Feather: 1000+ consistent, open-source stroke icons. You drop in a placeholder and call lucide.createIcons() to swap them for SVG.
<!-- placeholder --> <i data-lucide="camera"></i> <!-- then run --> <script src="https://unpkg.com/lucide@latest"></script> <script>lucide.createIcons();</script>
Font Awesome serves icons as a font (and SVG). You add a class like fa-solid fa-house to an <i> tag and CSS does the rest — colour follows the text color.
<link rel="stylesheet" href=".../font-awesome/6.5.2/css/all.min.css"> <i class="fa-solid fa-house"></i> <i class="fa-regular fa-star"></i> <i class="fa-brands fa-github"></i>
Heroicons (by the Tailwind team) are often pasted directly as inline <svg>. No library to load — the markup is the icon, so it inherits currentColor and any sizing you give it.
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M3 12l2-2m0 0l7-7..." /> </svg>
An old PNG icon is fixed pixels — blow it up and it blurs. An SVG icon is math (paths), so it's pin-sharp at 16px or 160px, and recolouring is a single CSS line instead of a re-export.
Same icon, four sizes — no blur, because it's drawn from paths.
unpkg.com/lucide, rendered via lucide.createIcons()), Font Awesome 6 (cdnjs icon-font CSS), and Heroicons pasted as inline SVG. The size slider and colour picker drive real CSS variables that restyle every icon live. The shared CSS shell styles the surrounding page.