diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 4af108d3a30d494bf7837a9e4329bce3e4c901b1..66408514bb607236610840c0cae3f593d24eaa1e 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -58,10 +58,10 @@
 
       <div class="my-12">
         <h2 class="heading-2">Icons</h2>
-        <div class="mb-6 flex">
+        <div class="mb-6 flex gap-1">
           <ods-icon name="account-circle" size="xxl" />
-          <ods-icon name="accessibility" size="extra-large" color="text" />
-          <ods-icon name="accessibility" size="large" color="error" />
+          <ods-icon name="accessibility" size="extra-large" fill="text" />
+          <ods-icon name="accessibility" size="large" fill="error" />
           <ods-icon name="accessibility" class="fill-red-500" />
           <ods-icon name="accessibility" size="small" />
           <ods-icon name="admin-logo" size="unset" />
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
index 6e32cb5a7abefd3638c1888e6d5872ca10d8df92..df7f281cd8dd9c20e96dc6e88c990aeb73e85beb 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
@@ -38,7 +38,7 @@ const iconVariants = cva('', {
       xxl: 'size-12',
       unset: '',
     },
-    color: {
+    fill: {
       primary: 'fill-primary',
       text: 'fill-text',
       whitetext: 'fill-whitetext',
@@ -56,14 +56,14 @@ type IconVariants = VariantProps<typeof iconVariants>;
   selector: 'ods-icon',
   standalone: true,
   imports: [CommonModule, SvgIconComponent],
-  template: `<svg-icon [src]="'assets/icons/' + name + '.svg'" [svgClass]="twMerge(iconVariants({ size, color }), class)" />`,
+  template: `<svg-icon [src]="'assets/icons/' + name + '.svg'" [svgClass]="twMerge(iconVariants({ size, fill }), class)" />`,
   styles: [':host {@apply block w-fit}'],
 })
 export class IconComponent {
   @Input({ required: true }) name!: string;
   @Input() class: string;
   @Input() size: IconVariants['size'] = 'medium';
-  @Input() color: IconVariants['color'] = 'primary';
+  @Input() fill: IconVariants['fill'] = 'primary';
 
   readonly iconVariants = iconVariants;
   readonly twMerge = twMerge;