SVG, sprites and JavaScript

When CSS classes do not fit (an email, a native app, a canvas, a server-rendered file), use the SVG files directly.

SVG files#

Every icon is a standalone file in svg/line of the free kit and on the CDN (from 2.0.0, svg/solid and svg/duotone are in the Pro kit), and as Download SVG or Copy SVG on its page.

<img src="/assets/hubtoolify-icons/svg/solid/home.svg" width="24" height="24" alt="Home">

An SVG used as an <img> is a separate image, so it does not take the page's text colour. Paste the markup inline when you want to colour it with CSS. Inline icons use currentColor, and Duotone's tone is a path.hti-tone:

/* Inline Duotone SVG: the tone is a path you can style */
.hti-tone { fill: #ffd23f; opacity: .9; }

Sprites#

The kit's sprites/ folder has one sprite per style, with a <symbol id="hti-NAME"> for every icon. Inline a sprite once and reference icons by id. This also works in frameworks that have no package of their own:

// Put the Line sprite into the page once.
const res = await fetch('/assets/hubtoolify-icons/sprites/hubtoolify-icons-line.svg');
document.body.insertAdjacentHTML('afterbegin', await res.text());

// Then use any icon by name.
function icon(name, size = 24) {
  return `<svg width="${size}" height="${size}" aria-hidden="true"><use href="#hti-${name}"></use></svg>`;
}
document.querySelector('#save').innerHTML = icon('save') + ' Save';

Switching icons#

With the CSS classes, changing an icon or its style is a class change:

const el = document.querySelector('.like .hti');
el.classList.toggle('hti-solid');                 // outline ↔ filled
el.classList.replace('hti-heart', 'hti-heart-star');

In Node#

@hubtoolify/icons-svg has every free icon as markup (Line only from 2.0.0; Solid and Duotone are in the Pro packages), one module per icon, and the catalogue's metadata. Use it to render icons on the server, in a build script or in a static site generator.

npm install @hubtoolify/icons-svg

import { getIcon, metadata } from '@hubtoolify/icons-svg';

const svg = getIcon('calendar', 'duotone');      // the SVG markup as a string
console.log(metadata.count, 'icons');