CDN

Use the free icons from jsDelivr with one stylesheet link or an image URL, with nothing to host.

as Markdown, for notes or an AI chat

The free icons (Line) are published on npm as @hubtoolify/icons (version 2.0.2, 4,309 icons), which makes them available on jsDelivr, the free public CDN for npm packages. There is nothing to install or host, the files come from a global edge network, and any site may use them.

From version 2.0.0 the free CDN serves Line only; Solid and Duotone are now Pro styles. Files from the 1.x releases (up to 1.2.1) that you already use stay under the free licence they were published with.

Every icon is a file at:

URL pattern

https://cdn.jsdelivr.net/npm/@hubtoolify/icons@2.0.2/svg/line/{name}.svg

The free icon CDN page has a link builder with a live preview.

CSS classes#

Link the stylesheet once, then use the same classes as the self-hosted kit. Colour and size follow color and font-size, or the utility classes.

HTML

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

<i class="hti hti-ai-prompt" 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>

One stylesheet covers every icon in the Line style. On a page with only a few icons, images are lighter.

Colours and sizes outside the palette#

The stylesheet has a class for every palette colour and every size from 8 to 512 px. Any other value goes in square brackets and needs a rule. Add the helper script once, after the stylesheet, and every bracket class on the page works, including icons your framework adds later:

HTML

<script src="https://hubtoolify.com/icon-library/kit/js/hubtoolify-icons-arbitrary.js" defer></script>

<i class="hti hti-heart hti-text-[#e11d48] hti-size-[72px]" aria-hidden="true"></i>
<span class="hti-box hti-bg-[#0f172a] hti-p-[4] hti-rounded-[30%]">
  <i class="hti hti-star hti-text-[#fbbf24]" aria-hidden="true"></i>
</span>

The script accepts hex colours and numbers only, so a class cannot inject other CSS, and it works under a strict Content Security Policy. Without it, write the rule yourself or just set color on the icon.

Images#

An <img> is the simplest embed and loads only the icons on the page, a few hundred bytes each. An image keeps the colour it is drawn in.

HTML

<img src="https://cdn.jsdelivr.net/npm/@hubtoolify/icons@2.0.2/svg/line/ai-prompt.svg" width="64" height="64" alt="AI prompt">
<img src="https://cdn.jsdelivr.net/npm/@hubtoolify/icons@2.0.2/svg/line/heart.svg" width="24" height="24" alt="Like">

Recolour by inlining#

Inline SVG follows currentColor, so fetch a file once and put it in the page to colour it with CSS:

HTML

<span class="icon" data-icon="ai-prompt" data-style="line" style="color:#0d1b3e;width:64px"></span>

<script>
document.querySelectorAll('.icon[data-icon]').forEach(async (el) => {
  const { icon, style = 'line' } = el.dataset;
  const res = await fetch(`https://cdn.jsdelivr.net/npm/@hubtoolify/icons@2.0.2/svg/${style}/${icon}.svg`);
  el.innerHTML = await res.text();   // inline SVG follows currentColor
});
</script>

Pin the version#

Keep an exact version in the URL (@2.0.2). jsDelivr and browsers then cache the files for a year, and they never change under you. @1 follows the newest 1.x release instead, and browsers keep those files for up to a week.

A newly drawn icon reaches the CDN with the next npm release. Until then, download it from its page or use the kit.

Files on hubtoolify.com#

The Line files under https://hubtoolify.com/icon-library/kit/svg/… also work as images. The site does not allow other sites to use them as CSS masks or with fetch(), so for the classes use jsDelivr or your own copy of the kit.

Pro styles are not on the CDN. Solid, Duotone, Sharp Line, Sharp Solid, Sharp Duotone, Imprint, Pixel, Slab, Mellow, Jass, 3D, Draw, Lineal, Duo and Flat come in the Pro kit, which you host yourself, or from the Pro npm registry.