Hue Type — Colour Icon Fonts
Turn your Figma icon set into a colour font. One click. CSS palette included.
Plugin Preview
About this plugin
Hue Type converts your Figma icon frames into a real OpenType colour font —COLRv1 format, WOFF2 + TTF export, CSS font-palette snippet included.Select your icon components. Run the plugin. Get a font.──────────────────────────WHAT YOU GET→ A single .woff2 file containing all your selected icons as colour glyphs→ A .ttf fallback→ A ready-to-use CSS snippet:@font-palette-values --brand {font-family: YourIcons;override-colors: 0 #0066FF;}.icon { font-family: YourIcons; font-palette: --brand; }One CSS variable. Every icon. Every theme.──────────────────────────WHY IT MATTERSA 200-icon SVG sprite runs ~460KB.The same icons as a WOFF2 colour font: ~12KB.~30× smaller. CSS recolour. No JavaScript. No runtime SVG injection.For design systems that ship a complete icon set across multiple brandcolours or themes — this is the format.──────────────────────────REQUIREMENTS→ Icons must be Figma frames or components (not groups)→ Each icon = one frame = one glyph slot→ SVG paths preferred — expand strokes before exporting→ Hue Type account required to export (free to try, account needed to download)Browser support for COLRv1: Chrome 98+, Firefox 107+, Safari 15.4+ (~72% global)──────────────────────────BUILT BYSunny Padiyar — huetype.sunnyallan.designQuestions: reply in the Community thread or use the in-plugin support link.
Plugin Details
| Version | 2 |
|---|---|
| Created | May 28, 2026 |
| Last Updated | June 7, 2026 |
| Category | fonts-typography |
| Creator | Sunny |
| Stats | 1 installs, 0 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://*.supabase.co
- https://huetype-api.onrender.com
- https://huetype.sunnyallan.design
- https://wwowqtjyptrytqivmdji.supabase.co
More Like This
Discover other plugins in the fonts-typography category.