# @hubtoolify/icons
Original HubToolify icons as CSS classes, in the free Line style. For plain HTML sites and any project
that serves static files. (React or a bundler? Use `@hubtoolify/icons-react` or
`@hubtoolify/icons-svg`; see "Bundlers" below.)
## Version 2.0.0: Line only
Since 2.0.0 (11 November 2026) this package holds the free Line style only, on every icon. Solid and
Duotone are now HubToolify Pro styles: their `hti-solid` and `hti-duotone` classes are in the Pro kit and
`@hubtoolify-pro/icons`. Versions 1.x, up to 1.2.1, were published with Solid and Duotone under the free
licence: if you downloaded or installed one of them, you keep using it under that licence.
## Install
```sh
npm install @hubtoolify/icons
npx hubtoolify-icons public/hubtoolify-icons # copies css/, svg/ and font/ into a static folder
```
```html
```
Without Node tooling, copy `node_modules/@hubtoolify/icons/css` and `.../svg` yourself. They must stay
side by side: the stylesheet loads each icon from `../svg/`.
Icons are CSS masks over `currentColor`: they take the text colour and `font-size`.
```css
.hti { color: #2463ed; }
```
Modifiers: `hti-xs` `hti-sm` `hti-lg` `hti-xl` `hti-2x`…`hti-5x` `hti-fw`,
`hti-rotate-90|180|270`, `hti-flip-h|v|both`, `hti-spin`, `hti-pulse`.
Pages must be served over HTTP(S): browsers do not load CSS mask images on `file://` pages.
Decorative icons need `aria-hidden="true"`; an icon that carries meaning needs a text label or
`role="img" aria-label="..."`.
## Icon font
The same Line icons as a web font, for places where CSS masks and SVG are not an option: email-safe
web views, old WebViews, rich-text editors that strip SVG, or a design that already uses an icon font.
```html
```
The font stylesheet references only its two font files, so a bundler can import it:
```js
import '@hubtoolify/icons/font/hubtoolify-icons-font.css';
```
Or link it from jsDelivr: `https://cdn.jsdelivr.net/npm/@hubtoolify/icons@2/font/hubtoolify-icons-font.min.css`.
Glyphs take the text `color` and `font-size` like any text. Classes are `htf htf-NAME` (not `hti`, so
both stylesheets can be on one page). Each icon has a fixed Private Use Area codepoint that never
changes between versions; `font/codepoints.json` lists them. The font is WOFF2 (about 370 KB, all
icons) with WOFF and TTF fallbacks. To ship fewer icons, subset it to the codepoints you use, e.g.
`pyftsubset hubtoolify-icons.ttf --unicodes=U+E001,U+E0A2 --flavor=woff2`.
## Bundlers
The stylesheet references every icon file (thousands of URLs). Importing it into Vite or webpack
makes the bundler try to process all of them (Vite fails with `EMFILE: too many open files`), so the
package has **no importable entry** on purpose. Put the folder in your static/public directory as
above, or use `@hubtoolify/icons-react` / `@hubtoolify/icons-svg`, which import one icon at a time.
## HubToolify Pro (private registry)
The Pro icon styles, Solid and Duotone included, are installed from HubToolify's own registry, not from npmjs.com, and need an active Pro plan.
Sign in once per machine with this package's login command (Windows PowerShell, macOS and Linux, Node 18+):
```sh
npx @hubtoolify/icons login
npm install @hubtoolify-pro/icons-react
```
It asks for your HubToolify email and password (the password is not shown), then saves a read-only registry token
for the `@hubtoolify-pro` scope in your user npm config. The token is never printed. Details: the
`@hubtoolify-pro/icons` README (after sign-in) and https://hubtoolify.com/icons.
## What's in the package
- `css/` — `hubtoolify-icons.css` and `.min.css`. Link one.
- `svg/line` — every icon as its own SVG file.
- `sprites/` — the Line sprite, a hidden `