How to Use an Icon Font on Your Website

What is in the download

1. Copy the files into your project

Put the font files and icon-font.css in the same folder, for example /fonts. The CSS loads the fonts with relative paths, so they must stay next to each other.

2. Load the CSS

Link the stylesheet in your page's <head>:

<link rel="stylesheet" href="/fonts/icon-font.css">

If you use a bundler such as Vite, webpack or Next.js, import the CSS from your entry point instead. The bundler resolves the font paths relative to the CSS file:

import "./fonts/icon-font.css"

3. Add icons with their class names

Each icon has a class made from icon-font- and its file name:

<i class="icon-font-home" aria-hidden="true"></i>

File names are lowercased and anything other than letters and digits becomes a hyphen. Names that start with a digit get an icon- prefix, and duplicates get -2, -3 and so on. Open icon-font-demo.html to see every class name.

4. Set size and color

Icons are text, so they take the font-size and color of their surroundings. Style them like any other text:

.icon-font-home {
  font-size: 24px;
  color: #2563eb;
}

Each icon is drawn in a single color. Colors in your SVGs are ignored, so multi-color artwork is flattened to one color.

5. Keep icons accessible

Screen readers can announce icon glyphs as meaningless characters. Hide decorative icons with aria-hidden="true", and give icon-only buttons a label:

<button type="button" aria-label="Search">
  <i class="icon-font-search" aria-hidden="true"></i>
</button>

Updating your icon set

To add or change icons, upload the full set again and replace all of the files. Codepoints are assigned in upload order starting at U+E000, so they can change between downloads. Class names stay the same as long as the file names do, which is why you should use classes rather than hard-coded codepoints.

Icon fonts or inline SVG?

An icon font puts every icon in one cached file and lets you style icons with plain CSS, which makes it a simple choice for single-color icon sets. Inline SVG suits multi-color icons, and icons that must stay visible even if a custom font fails to load.