Back to Plugins
Hue Type — Colour Icon Fonts

Hue Type — Colour Icon Fonts

Turn your Figma icon set into a colour font. One click. CSS palette included.

Plugin Preview

Hue Type — Colour Icon Fonts 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

Version2
CreatedMay 28, 2026
Last UpdatedJune 7, 2026
Categoryfonts-typography
CreatorSunny
Stats1 installs, 0 likes
PricingFree

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