Hue Type — Colour Icon Fonts
by Sunny
Turn your Figma icon set into a colour font. One click. CSS palette included.
Installs
3
Likes
0
Users
35
Views
19
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.