Icon font

/ˈaɪkɒn fɒnt/

An icon font is a font file in which each character is a vector icon rather than a letter. By typing a character (or using a CSS class), designers render symbols — arrows, hearts, menus — that scale crisply to any size and inherit text colour.

Popular examples include Font Awesome and Material Icons. Because icons behave like type, they can be sized, coloured and shadowed with ordinary CSS, and they stay sharp at any screen resolution.

Why does it matter?

Icon fonts were a lightweight way to ship many resolution-independent icons in a single request, and they keep icons consistent and easy to restyle across a whole product.

Today many teams prefer inline SVG for better accessibility and flexibility, but icon fonts remain common in design systems and older codebases.

Similar