Why Color Fonts Are Revolutionizing Web Icons and How to Use Them

For a long time, using colored vector icons on the web required SVG, limiting creativity. Today iconfont.cn becomes the first global platform to support color font icons, allowing millions of colored icons to switch to color‑font technology with new features.

What Is a Color Font

Color fonts (also called chromatic fonts) allow multiple colors to be used within each glyph. They can be applied to icons, emojis, and regular text fonts.

Color Font Formats

SVG (OpenType SVG) : Vector‑based, supports gradients, shadows, filters, and even animation. Supported on macOS 10.14+, iOS 12+, Windows 10 Anniversary Update.

COLR/CPAL (Microsoft) : Vector format with layer (COLR) and palette (CPAL) tables. Supported on macOS 10.13+, iOS 11+, Windows 8.1+.

SBIX (Apple) : Bitmap format that stores PNG/JPEG/TIFF images. Supported on macOS and iOS.

CBDT/CBLC (Google) : Bitmap format for colored bitmaps. Supported on Android.

COLRv1 (Google & Microsoft) : Extension of COLR/CPAL that adds gradients, affine transforms and multiple blend modes. Currently in OpenType 1.9 Alpha.

Color Font Icons in iconfont

iconfont now supports two formats for color icons: OT‑SVG and COLR. Comparison:

OT‑SVG

Advantages: supports gradients, shadows, filters, SVG animation, and mixing vector with bitmap.

Disadvantages: large file size, slower rendering, no variable‑font support; Safari imposes many restrictions and Chrome does not plan to support it.

COLR

Advantages: smaller file size, better performance, supports variable‑font technology.

Disadvantages: currently does not support gradients or bitmap (COLRv1 adds gradient support).

Note: When color and monochrome icons coexist, Chrome on macOS cannot change the color of monochrome icons due to a Chrome bug.

Overall, COLR is chosen for its smaller size, faster performance, and broader compatibility.

Advantages of Color Font Icons

Better Browser Compatibility

From IE9 to iOS 11, major browsers support COLR. See caniuse.com and real‑device screenshots for details.

Smaller Size

Using high‑compression WOFF2, COLR fonts reuse glyphs, making them much smaller than SVG icons. For example, a 64‑icon emoji set is significantly smaller in COLR format.

Faster Rendering Performance

SVG parsing and rasterisation are more complex than system‑level font rendering (DirectWrite, Core Text). Benchmarks show SVG glyphs render 20‑45% slower than COLRv1.

Better Cross‑Platform Support

Skia and FreeType provide solid COLR implementations, enabling use in Flutter 2’s CanvasKit, KaiOS, and other platforms.

Wider Application Scenarios

System‑level support allows color fonts in Keynote, Office, and Windows 8.1+, eliminating the need for SVG images in presentations. Developers can also use color fonts directly in editors and command‑line tools.

How to Use

Open a multicolor icon library and add desired icons to the cart.

Open the cart overlay.

Create a new project, name it, and confirm.

Open project settings.

Check the “Color” option in font format and save.

Click “Generate” (may take a while).

After generation, use the “Preview Font” menu to test the color font.

Future

When Chrome officially supports gradient‑enabled COLRv1, iconfont will quickly adopt it. Combined with variable‑font technology, features like icon weight adjustment and animation become possible.