Icon font

The free Line style is also a web font. One stylesheet, one class per icon: <i class="htf htf-home">. Use it where CSS masks and inline SVG are not an option: an old WebView, a rich-text editor or CMS that strips SVG, a theme that already expects an icon font, or an app that can only set a font and a character.

Everywhere else the CSS classes or inline SVG are the better choice: they load only the icons a page uses, and screen readers never meet a stray character.

Add it to a page#

Link the stylesheet from jsDelivr, the free CDN for npm packages, with nothing to host (version 2.0.3):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hubtoolify/icons@2.0.3/font/hubtoolify-icons-font.min.css">

<i class="htf htf-home" aria-hidden="true"></i>
<i class="htf htf-heart text-rose-600" aria-hidden="true"></i>
<i class="htf htf-calendar text-5xl text-blue-600" aria-hidden="true"></i>

Keep the stylesheet next to its font files: it loads hubtoolify-icons.woff2 (WOFF as a fallback) from its own folder.

Colour, size and alignment#

An icon is a character, so it follows color and font-size like text. With Tailwind CSS, colour and size it with the text utilities you already use (text-rose-600, text-2xl, hover:text-slate-900); no plugin or config is needed. One em is the whole 24-unit icon grid, and the icon sits a little below the baseline (vertical-align: -0.125em) so it lines up with lowercase text in a button or a link.

<button type="button" class="inline-flex items-center gap-2 text-sm text-white bg-blue-600 rounded-lg px-4 py-2">
  <i class="htf htf-search" aria-hidden="true"></i> Search
</button>

<a href="/settings" class="text-2xl text-slate-500 hover:text-slate-900" aria-label="Settings">
  <i class="htf htf-settings" aria-hidden="true"></i>
</a>

Every icon is one colour. Two-tone looks and the other styles are not part of the font: they are Pro styles in the Pro kit.

Accessibility#

A screen reader may read a Private Use Area character as an unknown symbol, so give every decorative icon aria-hidden="true". When an icon is the only content of a link or button, put the name on the link or button (aria-label="Settings"), as above.

Use a codepoint directly#

Each icon has one codepoint in the Unicode Private Use Area, from U+E001. A codepoint never moves between versions: a new icon takes the next free one, and a removed icon's codepoint stays reserved. font/codepoints.json lists them all (name → codepoint), so you can put an icon in your own CSS without the htf classes:

/* Any element, no extra class: the codepoint from font/codepoints.json */
.menu-link::before {
  font-family: "HubToolify Icons";
  content: "\e742";   /* home */
  margin-right: .4em;
  vertical-align: -0.125em;
}

From npm#

The font is in @hubtoolify/icons, the same package as the CSS kit. Unlike the kit's mask stylesheet, the font stylesheet references only two files, so a bundler can import it:

npm install @hubtoolify/icons

// Vite, webpack, Next.js…: the font stylesheet references only its two font files
import '@hubtoolify/icons/font/hubtoolify-icons-font.css';

Or copy the kit into a static folder:

npx hubtoolify-icons public/hubtoolify-icons   # copies css/, svg/ and font/

Fewer icons, smaller font#

The font holds every free icon (4,309), about 364 KB as WOFF2. Browsers download it once and cache it. If a site uses only a handful of icons, subset the TTF to their codepoints with fontTools and link your own file:

pip install fonttools brotli
pyftsubset hubtoolify-icons.ttf --unicodes=U+E742,U+ECDE,U+E724 \
  --flavor=woff2 --output-file=my-icons.woff2

How it is made#

The glyphs are not traced. Each one is computed from the icon's SVG: the 1.2-unit strokes are turned into outlines with round caps and joins, filled shapes are added, and cut-outs are subtracted. The result is compared with the SVGs in Chromium, pixel by pixel, at 24 and 96 pixels.