Quick start

Three ways to get an icon on screen. Each takes about a minute; pick the one that matches how your project is built.

1. From the CDN#

Best for a plain website, a prototype or anything without a build step. Put the stylesheet in the page's <head> once:

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

Then write an icon anywhere in the page:

<i class="hti hti-rocket" aria-hidden="true"></i>
<i class="hti hti-heart hti-text-brand" aria-hidden="true"></i>
<i class="hti hti-calendar hti-size-48" aria-hidden="true"></i>

Icons take the colour and font size of the text around them. The CDN page covers images, pinning the version and colours outside the palette.

2. With npm and React#

Best for an app with a bundler. Install the package:

npm install @hubtoolify/icons-react

Import icons by name. Each icon is its own module, so the bundle only contains the ones you import:

import { HtiRocket } from '@hubtoolify/icons-react';

export default function Launch() {
  return <button><HtiRocket size={20} /> Launch</button>;
}

Props, Duotone colours and the Pro styles are on the React page.

3. From the kit#

Best when you want every file on your own server. Download the free web kit, unzip it into your site (for example /assets/hubtoolify-icons/) and link the stylesheet:

<link rel="stylesheet" href="/assets/hubtoolify-icons/css/hubtoolify-icons.min.css">

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

Keep the svg/ folder next to css/: the stylesheet loads each icon from there. More on the CSS classes page.

Find an icon's name#

Search the icon library and open an icon: its name is in the page address (/icons/shopping-cart is shopping-cart), and its page has ready-made snippets for every format. The class is hti- plus the name; the React component is Hti plus the name in PascalCase (HtiShoppingCart).