CSS classes

Host the web kit and draw any icon with one class: Line in the free kit, every Pro style in the Pro kit.

as Markdown, for notes or an AI chat

The web kit is a folder you copy into your site: one stylesheet, and every icon as an SVG file. Each icon is then one class.

Install the kit#

Download the free web kit (3.9 MB) and unzip it into your site, for example as /assets/hubtoolify-icons/.
Link the stylesheet in your page's <head>.
Write hti plus hti- and the icon's name.

HTML

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

<i class="hti hti-home" aria-hidden="true"></i>              <!-- Line (the default) -->
<i class="hti hti-solid hti-home" aria-hidden="true"></i>    <!-- Solid (Pro kit) -->
<i class="hti hti-duotone hti-home" aria-hidden="true"></i>  <!-- Duotone (Pro kit) -->

From version 2.0.0 the free kit has Line only. The hti-solid and hti-duotone classes are in the Pro kit; a 1.x kit you already downloaded included them under the free licence, and that copy keeps it.

What is in the folder#

hubtoolify-icons.zip

hubtoolify-icons/
├─ css/        hubtoolify-icons.css, hubtoolify-icons.min.css
├─ svg/        line/ (one file per icon)
├─ sprites/    one SVG sprite per style
├─ js/         the bracket-class helper
├─ icons.json  every name, category and tag
└─ demo.html   every icon, to check your copy works

Keep svg/ next to css/: the stylesheet loads each icon from there as a CSS mask, so only the icons on the page are downloaded.

How the classes work#

Each icon is a CSS mask painted with currentColor. That is why an icon behaves like a letter of text: it takes the color and the font-size of its element, lines up with the text around it, and needs no extra markup.

Class	Does
`hti`	Makes the element an icon (required)
`hti-{name}`	Which icon, for example `hti-shopping-cart`
`hti-line` `hti-solid` `hti-duotone`	The style; Line is the default

Pro styles#

The Pro kit replaces the free one: the same folder layout and the same stylesheet name, with Line still inside and one more class per Pro style (hti-solid, hti-duotone, hti-sharp-line, hti-sharp-solid, hti-sharp-duotone, hti-imprint, hti-pixel, hti-slab, hti-mellow, hti-draw, hti-duo, hti-flat).

HTML

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

<i class="hti hti-sharp-line hti-bell" aria-hidden="true"></i>
<i class="hti hti-slab hti-bell" aria-hidden="true"></i>
<i class="hti hti-mellow hti-bell" aria-hidden="true"></i>
<i class="hti hti-duo hti-bell" style="color:#2f86eb" aria-hidden="true"></i>

Duo and Flat are two tones of one colour, so give each icon its own color for a colourful set. Sharp Duotone, Imprint, Mellow, Duo and Flat read --hti-secondary and --hti-secondary-opacity for their tone.

Jass and Lineal have a fixed palette and 3D is a rendered picture, so they are not classes. Use the files as images: svg/jass/ and svg/lineal/ in the Pro kit, and png/ in the separate 3D pack.

HTML

<img src="/assets/hubtoolify-icons/svg/jass/bell.svg" width="48" height="48" alt="">
<img src="/assets/hubtoolify-icons-pro-3d/png/bell.png" width="64" height="64" alt="">

Download the Pro kit and the 3D pack while signed in with Pro, from the icon library or any icon's page.

Open the page over http(s). Browsers do not load CSS mask images on a file:// page, so a kit opened straight from your disk shows blank squares. Any local server works, for example npx serve.