Icons from a CDN. One link, no install.
Line, Solid and Duotone, all 3,777 icons, are on jsDelivr, the public CDN for npm packages, as @hubtoolify/icons@1.1.1. Link one stylesheet or point an image at a file. It is free for personal and commercial projects and allowed from any site.
Quick start
Put the stylesheet in your page's <head> once, then write an icon anywhere. Size follows font-size and colour follows color, or the kit's utility classes.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hubtoolify/icons@1.1.1/css/hubtoolify-icons.min.css">
<i class="hti hti-rocket"></i>
<i class="hti hti-solid hti-heart hti-text-brand"></i>
<i class="hti hti-duotone hti-calendar hti-size-48"></i>Build a link
Checking…
CSS class with the stylesheet above
Image keeps the colour it is drawn in
File URL
CSS classes
One stylesheet covers every icon in all three styles, about 140 KB compressed. Recolour, resize, rotate and frame icons with classes.
An image per icon
An <img> loads only the icons on the page, a few hundred bytes each. Best for a handful of icons that keep their colour.
Fetch and inline
fetch() the SVG and put it in the page: it follows currentColor like text. See the CDN guide.
Questions, answered
Licence, colours, versions and what the CDN does not cover.
Something else? Ask us01 Is it free for commercial work?
Yes. The free styles can be used in personal and commercial projects under the HubToolify Icons licence. Credit is appreciated, not required. You may not redistribute the icons as an icon set of your own.
02 How do I use a colour or size outside the kit, like hti-text-[#ffffff]?
The stylesheet has a class for every palette colour (hti-text-white, hti-text-navy, hti-text-red-500…) and every size from 8 to 512 px. Any other value goes in brackets and needs its rule. Add the helper script once, after the stylesheet, and every bracket class on the page works, including icons your framework adds later.
<script src="https://hubtoolify.com/icon-library/kit/js/hubtoolify-icons-arbitrary.js" defer></script>
<i class="hti hti-heart hti-text-[#ffffff] hti-size-[72px]"></i>Or skip the script and set color yourself: icons take the text colour, so .my-icon { color: #ffffff; } or a coloured parent works too.
03 Why pin the version?
A pinned URL (@1.1.1) never changes, so jsDelivr and browsers cache it for a year. @1 follows the newest 1.x release instead; browsers keep those files for up to a week.
04 A new icon is missing from the CDN. Why?
The CDN serves the npm release, so an icon drawn after it arrives with the next one. Until then it is in the kit you can download from the icon's page.
05 Are the Pro styles on the CDN?
No. Sharp, Imprint, Pixel, Slab, Mellow, Jass, 3D, Draw, Lineal, Duo and Flat come in the Pro kit, which you host on your own site.
06 Can I use the hubtoolify.com file links instead?
For Line and Solid as images, yes; hubtoolify.com keeps Duotone only as its two layers, so whole Duotone files come from jsDelivr. The site also does not let other sites use its files as CSS masks or with fetch(), so for the classes use jsDelivr or your own copy of the kit.