Widely available Supported across all major browsers. Safe to use in production.

COLRv0

COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
OpenType COLRv0
53
79
31
11.1
53
11.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
@font-face {
  font-family: 'ColorIcons';
  src: url('icons-colrv0.woff2') format('woff2');
}
.icon {
  font-family: 'ColorIcons';
}

Live demo

col-fontconcept

CSS col-fontconcept demo.

PreviewFullscreen

Layer structure

CSS reiya-structure demo.

PreviewFullscreen

emoji. Example

CSS emoji. Example demo.

PreviewFullscreen

Use cases

  • Using COLRv0

    COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links