An icon font packages icons the same way a regular font packages letters. Instead of mapping a key to a letter, it maps a class name to a crisp, scalable icon.
For example, write this:
<i class="icf-solid icf-shopping-cart"></i>
and the browser renders a shopping cart icon, perfectly sharp at any size, that you can recolor and resize with plain CSS. That simple idea solves a surprising number of problems for web developers.
Icons that behave like text
Because an icon font is just a font, your icons inherit everything text does. Change color and the icon recolors. Change font-size and it scales perfectly. Put it inside a button and it aligns with the label automatically.
.btn:hover i { color: white; }
No fill attributes, no viewBox math, no JavaScript. Just CSS.
One request, every icon
A single font file can hold thousands of icons. Load it once and the whole set is available, cached by the browser across every page.
Icon font vs inline SVG
Inline SVG is great when you need per-path control or animation of individual shapes. But for the everyday job of placing UI icons, icon fonts keep your markup clean and your styling trivially simple.
- Icon font: one class, full CSS control, tiny markup.
- Inline SVG: verbose markup, but per-path access.
The modern icon font
Iconfyra is a modern take on the icon font: 4,510+ icons, Classic and Duotone themes, four weights, delivered by CDN or self-hosted. You get the simplicity of fonts with the crispness of SVG.
Icon fonts never went away. They just got better.
