One font.
All your icons.
Upload SVGs → get a WOFF2 colour font you can style with CSS. One character per icon. Zero JavaScript.
CSS animations, zero JS
Animated loaders out of the box
Every animation in this app runs on font-palette — no canvas, no SVG redraws, no runtime JS in your bundle.
Small
20px glyphs
Medium
36px glyphs
Large
56px glyphs
/* Inject a named palette and swap it dynamically */
@font-palette-values --my-palette {
font-family: HueType;
override-colors: 0 #7c6af5, 1 #eefa94, 2 #ff6b9d;
}
.icon {
font-family: HueType;
font-palette: --my-palette;
}
/* Palette crossfade — stack two icons, crossfade opacity */
.icon-rest { opacity: 1; transition: opacity 300ms ease-in-out; }
.icon-hover { opacity: 0; transition: opacity 300ms ease-in-out; }
button:hover .icon-rest { opacity: 0; }
button:hover .icon-hover { opacity: 1; }Interactive
Palette crossfades — hover to see
CSS can't interpolate between two palette names directly — so we stack two icons and crossfade their opacity. 300ms. No JS required at render time.
Close
--ht-icon → --ht-close-hover
Edit
--ht-icon → --ht-edit-hover
Add
--ht-ref → --ht-brand
Download
--ht-ref → --ht-brand
Upload
--ht-duo → --ht-brand
Go
--ht-arrow → --ht-brand
File size
12 icons. One file. 30× smaller.
A COLR colour font packs everything into a single cached file — no sprite sheets, no SVG-in-JS bundle bloat.
15× smaller than SVGs · 30× smaller than PNGs
hue-type.ttf is 4,008 bytes for 12 COLR/CPAL v1 glyphs. One HTTP request. One cache entry. Every icon.
Inline usage
Use them like emoji — right in your text
Fonts live in the text flow. Drop a glyph anywhere you'd type a character — headings, buttons, body copy — no img tag, no SVG block.
Design systems that scale and delight users
The same format that powers Google Noto Color Emoji. COLRv1 ships on every Android device and Chrome install. Apple's emoji system is an SBIX font. Now you can build the same for your brand.
Comparison
Why a font wins
A COLR colour font combines the scalability of SVG, the richness of PNG, and adds CSS-programmable palettes — in a fraction of the size.
| Feature | SVG files | PNG sprites | Colour font |
|---|---|---|---|
| Scalable | ✓ | ✗ | ✓ |
| Multi-colour | ✓ | ✓ | ✓ |
| CSS recolour | Partial | ✗ | ✓ font-palette |
| Single request | ✗ | Sprite only | ✓ |
| Cacheable | Per file | ✓ | ✓ |
| Inline in HTML | ✓ (verbose) | ✗ | ✓ 1 char |
| Animations | JS / CSS | ✗ | CSS only |
| 12 icons — size | ~48 KB | ~120 KB | ~4 KB |
COLR/CPAL v1 · Chrome 98+ · Firefox 108+ · Edge 98+ · ~72% global coverage. Safari support coming.
Build your first colour font
in 60 seconds
Free. No credit card. Export WOFF2 + TTF.
Start building →