What Is a COLR Font?

What Is a COLR/CPAL Font?

A COLR font is a real OpenType font file that stores coloured vector glyphs — not bitmaps, not ligature tricks, not SVG-in-font hacks. Each glyph is defined as a set of vector paths with colour layer data attached.

The "CPAL" part stands for Colour Palette. It's a lookup table embedded in the font that maps colour slots (index 0, index 1, index 2…) to actual colour values. The browser renders each glyph's paths using whichever palette is currently active.

This means the file is compact (vector, not raster), scales to any size without loss, and can be recoloured without shipping a second file.

COLRv0 vs COLRv1 — Why the Version Matters

The COLR format has two versions, and they're meaningfully different.

COLRv0 (2013) supports simple layered paths with flat palette colours. You can swap the whole palette — that's how you get "dark mode icons" — but you can't control individual palette entries from CSS. You change the palette at the font level, not the component level.

COLRv1 (2021, OpenType 1.9) adds gradients, compositing, and — most importantly — first-class CSS integration via the font-palette property. This is the version that makes COLR fonts genuinely interesting for design systems.

The difference in practice:

	COLRv0	COLRv1
Coloured vector glyphs	✓	✓
Palette swapping	✓	✓
CSS `font-palette` control	✗	✓
Gradients & compositing	✗	✓
Named palette overrides per component	✗	✓

IcoMoon exports COLRv0. Hue Type exports COLRv1.

The `font-palette` CSS Property

This is where COLRv1 becomes genuinely useful at the design system level.

font-palette is a CSS Fonts Level 4 property that lets you define named palette overrides and apply them to elements just like any other CSS rule:

@font-palette-values --brand {
  font-family: MyIcons;
  override-colors: 0 #0066FF;
}

@font-palette-values --danger {
  font-family: MyIcons;
  override-colors: 0 #E53E3E;
}

.icon { font-family: MyIcons; }
.icon--brand { font-palette: --brand; }
.icon--danger { font-palette: --danger; }

One CSS rule. Every icon that uses palette slot 0 updates instantly — no JavaScript, no SVG manipulation, no extra HTTP requests. The font handles the rendering; CSS controls the colour.

Compare that to the old approach:

.icon-home { background-image: url('/icons/home.svg'); }
.icon-home--dark { background-image: url('/icons/home-dark.svg'); }
.icon-home--brand { background-image: url('/icons/home-brand.svg'); }
/* × 200 icons × 3 themes = 600 CSS rules and 600 HTTP requests */

The bundle-size case is also significant. A typical SVG sprite for a 200-icon set runs 400–500KB. The same icons as a WOFF2 colour font: 10–15KB. Roughly 30–40× smaller, served in a single cached file.

Browser Support

COLRv1 landed in all major browsers at the same time:

Chrome 98+ (February 2022)
Firefox 107+ (November 2022)
Safari 15.4+ (March 2022)

Global coverage is approximately 72% as of mid-2026. If your audience skews toward modern desktop browsers or Chromium-based environments, the coverage is higher. The main gap is older Android WebView and some regional markets with older browser distributions.

COLRv0 has the same browser support matrix — so if v0 works for your users, v1 does too.

How to Make One

Historically, the tooling for COLRv1 has been sparse. Google's nanoemoji is the reference implementation but requires a Python environment and font toolchain knowledge. There are no polished GUI tools in the space — yet.

Hue Type is a browser-based builder that takes your SVG icon set and exports a COLRv1 font (WOFF2 + TTF) with a CSS snippet included. Free, no account required. Drop your SVGs in, set a family name, export.

If you have an icon set in Figma, export each icon as an individual SVG (select all → Export as SVG with "Flatten" checked), then drag the folder into the Hue Type builder. The process takes about 10 minutes for a clean icon set.