diff --git a/packages/utils/package.json b/packages/utils/package.json
index 74a722f..881ee6e 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -2,7 +2,7 @@
 	"name": "@iconify/utils",
 	"description": "Common functions for working with Iconify icon sets used by various packages.",
 	"author": "Vjacheslav Trushkin",
-	"version": "1.0.21",
+	"version": "1.0.22",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",
diff --git a/packages/utils/spec/colors/colorsSpec.mjs b/packages/utils/spec/colors/colorsSpec.mjs
index 906f522..992069b 100644
--- a/packages/utils/spec/colors/colorsSpec.mjs
+++ b/packages/utils/spec/colors/colorsSpec.mjs
@@ -98,6 +98,15 @@ describe('Colors', () => {
 				alpha: 0,
 			})
 		).toBe('transparent');
+
+		// Function
+		expect(
+			colorToString({
+				type: 'function',
+				func: 'var',
+				value: '--foo',
+			})
+		).toBe('var(--foo)');
 	});
 
 	it('Hexadecimal', () => {
@@ -444,7 +453,7 @@ describe('Colors', () => {
 		expect(stringToColor('lch(10%, 20%, 30)')).toBeNull();
 		expect(stringToColor('lch(10, 20, 30)')).toBeNull();
 
-		// Simple llchb
+		// Simple lch
 		expect(stringToColor('lch(10%, 20, 30)')).toEqual({
 			type: 'lch',
 			l: 10,
@@ -488,7 +497,32 @@ describe('Colors', () => {
 		).toBe('lch(10.4% 20.7 30.1 / 0.845)');
 	});
 
+	it('Functions', () => {
+		// Missing ')'
+		expect(stringToColor('var(--foo')).toBeNull();
+
+		// Valid functions
+		expect(stringToColor('var(--foo)')).toEqual({
+			type: 'function',
+			func: 'var',
+			value: '--foo',
+		});
+		expect(stringToColor('url(#a)')).toEqual({
+			type: 'function',
+			func: 'url',
+			value: '#a',
+		});
+	});
+
 	it('Compare colors', () => {
+		// Identical items
+		expect(
+			compareColors(
+				stringToColor('var(--foo)'),
+				stringToColor('var(--foo)')
+			)
+		).toBe(true);
+
 		// Black colors
 		expect(
 			compareColors(
diff --git a/packages/utils/src/colors/index.ts b/packages/utils/src/colors/index.ts
index f0ae3f1..f2f4ed4 100644
--- a/packages/utils/src/colors/index.ts
+++ b/packages/utils/src/colors/index.ts
@@ -86,11 +86,24 @@ function fromFunction(value: string): Color | null {
 			break;
 		}
 
-		default: {
+		case 'rgb':
+		case 'rgba':
+		case 'hsl':
+		case 'hsla': {
 			values = content.trim().split(/[\s,]+/);
 			if (values.length === 4) {
 				alphaStr = (values.pop() as string).trim();
 			}
+			break;
+		}
+
+		default: {
+			// Unsupported function
+			return {
+				type: 'function',
+				func,
+				value: content,
+			};
 		}
 	}
 
@@ -446,5 +459,9 @@ export function colorToString(color: Color): string {
 			}
 			return 'lch(' + list.join(' ') + ')';
 		}
+
+		case 'function': {
+			return color.func + '(' + color.value + ')';
+		}
 	}
 }
diff --git a/packages/utils/src/colors/types.ts b/packages/utils/src/colors/types.ts
index 3403cd8..e1daf8c 100644
--- a/packages/utils/src/colors/types.ts
+++ b/packages/utils/src/colors/types.ts
@@ -30,6 +30,12 @@ export interface LCHColor {
 	alpha: number;
 }
 
+export interface FunctionColor {
+	type: 'function';
+	func: string;
+	value: string;
+}
+
 export interface TransparentColor {
 	type: 'transparent';
 }
@@ -47,6 +53,7 @@ export type Color =
 	| HSLColor
 	| LABColor
 	| LCHColor
+	| FunctionColor
 	| TransparentColor
 	| NoColor
 	| CurrentColor;
diff --git a/packages/utils/tests/colors-test.ts b/packages/utils/tests/colors-test.ts
index fba0d3d..205aa7f 100644
--- a/packages/utils/tests/colors-test.ts
+++ b/packages/utils/tests/colors-test.ts
@@ -95,6 +95,15 @@ describe('Colors', () => {
 				alpha: 0,
 			})
 		).toBe('transparent');
+
+		// Function
+		expect(
+			colorToString({
+				type: 'function',
+				func: 'var',
+				value: '--foo',
+			})
+		).toBe('var(--foo)');
 	});
 
 	test('Hexadecimal', () => {
@@ -450,7 +459,7 @@ describe('Colors', () => {
 		expect(stringToColor('lch(10%, 20%, 30)')).toBeNull();
 		expect(stringToColor('lch(10, 20, 30)')).toBeNull();
 
-		// Simple llchb
+		// Simple lch
 		expect(stringToColor('lch(10%, 20, 30)')).toEqual({
 			type: 'lch',
 			l: 10,
@@ -494,7 +503,32 @@ describe('Colors', () => {
 		).toBe('lch(10.4% 20.7 30.1 / 0.845)');
 	});
 
+	test('Functions', () => {
+		// Missing ')'
+		expect(stringToColor('var(--foo')).toBeNull();
+
+		// Valid functions
+		expect(stringToColor('var(--foo)')).toEqual({
+			type: 'function',
+			func: 'var',
+			value: '--foo',
+		});
+		expect(stringToColor('url(#a)')).toEqual({
+			type: 'function',
+			func: 'url',
+			value: '#a',
+		});
+	});
+
 	test('Compare colors', () => {
+		// Identical items
+		expect(
+			compareColors(
+				stringToColor('var(--foo)')!,
+				stringToColor('var(--foo)')!
+			)
+		).toBe(true);
+
 		// Black colors
 		expect(
 			compareColors(