diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34daab2b955..941bb0ce565 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 22.2.0
+
+### New Features
+
+- `IgxChipComponent`
+    - Added the `outlined` property to the component. When set to `true`, the Chip will have an outlined style.
+
+- **Theming**
+    - **Breaking Change** - The `chip-theme` properties - `$focus-outline-color` and `$focus-selected-outline-color` were replaced with `$focus-shadow-color` and `$focus-selected-shadow-color`.
+
 ## 22.1.0
 
 ### New Features
diff --git a/projects/igniteui-angular/chips/src/chips/chip.component.ts b/projects/igniteui-angular/chips/src/chips/chip.component.ts
index ed9436f330d..4b09b101957 100644
--- a/projects/igniteui-angular/chips/src/chips/chip.component.ts
+++ b/projects/igniteui-angular/chips/src/chips/chip.component.ts
@@ -227,6 +227,19 @@ export class IgxChipComponent implements OnInit, OnDestroy {
     @Input()
     public removeIcon: TemplateRef<any>;
 
+    /**
+     * Sets/gets whether the chip is outlined.
+     * Default value is `false`.
+     *
+     * @example
+     * ```html
+     * <igx-chip outlined></igx-chip>
+     * ```
+     */
+    @Input({ transform: booleanAttribute })
+    @HostBinding('class.igx-chip--outlined')
+    public outlined = false;
+
     /**
      * Defines if the chip can be selected on click or through navigation,
      * By default it is set to false.
diff --git a/projects/igniteui-angular/chips/src/chips/chip.spec.ts b/projects/igniteui-angular/chips/src/chips/chip.spec.ts
index 4a186b6ae47..e36cd3f98f3 100644
--- a/projects/igniteui-angular/chips/src/chips/chip.spec.ts
+++ b/projects/igniteui-angular/chips/src/chips/chip.spec.ts
@@ -153,6 +153,18 @@ describe('IgxChip', () => {
             expect(igxChip.nativeElement).toHaveClass('igx-chip--danger');
         });
 
+        it('should apply igx-chip--outlined class when outlined is set to true', () => {
+            const fixture = TestBed.createComponent(IgxChipComponent);
+            const igxChip = fixture.componentInstance;
+            igxChip.id = 'root-outlined';
+
+            igxChip.outlined = true;
+            fixture.detectChanges();
+
+            expect(igxChip.outlined).toBeTrue();
+            expect(igxChip.nativeElement).toHaveClass('igx-chip--outlined');
+        });
+
         it('should set text in chips correctly', () => {
             const chipElements = chipArea[0].queryAll(By.directive(IgxChipComponent));
             const firstChipTextElement = chipElements[0].queryAllNodes(By.css(`.${CHIP_TEXT_CLASS}`));
diff --git a/projects/igniteui-angular/chips/src/chips/themes/_base.scss b/projects/igniteui-angular/chips/src/chips/themes/_base.scss
index 28ec6c2180e..5d394290698 100644
--- a/projects/igniteui-angular/chips/src/chips/themes/_base.scss
+++ b/projects/igniteui-angular/chips/src/chips/themes/_base.scss
@@ -44,13 +44,11 @@ $_theme: digest-schema($material-chip);
                 outline-style: none;
                 color: var-get($_theme, 'focus-text-color');
                 background: var-get($_theme, 'focus-background');
-                border-color: var-get($_theme, 'focus-border-color');
             }
 
             @include e(item, $m: 'selected') {
                 color: var-get($_theme, 'focus-selected-text-color');
                 background: var-get($_theme, 'focus-selected-background');
-                border-color: var-get($_theme, 'focus-selected-border-color');
             }
         }
 
@@ -58,13 +56,11 @@ $_theme: digest-schema($material-chip);
             @include e(item) {
                 color: var-get($_theme, 'hover-text-color');
                 background: var-get($_theme, 'hover-background');
-                border-color: var-get($_theme, 'hover-border-color');
             }
 
             @include e(item, $m: 'selected') {
                 color: var-get($_theme, 'hover-selected-text-color');
                 background: var-get($_theme, 'hover-selected-background');
-                border-color: var-get($_theme, 'hover-selected-border-color');
             }
         }
 
@@ -81,7 +77,6 @@ $_theme: digest-schema($material-chip);
             padding-inline: pad-inline(rem(2px), rem(6px), rem(12px));
             color: var-get($_theme, 'text-color');
             background: var-get($_theme, 'background');
-            border: rem(1px) solid var-get($_theme, 'border-color');
             border-radius: var-get($_theme, 'border-radius');
             user-select: none;
             overflow: hidden;
@@ -171,21 +166,18 @@ $_theme: digest-schema($material-chip);
         @include e(item, $m: 'selected') {
             color: var-get($_theme, 'selected-text-color');
             background: var-get($_theme, 'selected-background');
-            border-color: var-get($_theme, 'selected-border-color');
         }
 
         @include m(primary) {
             @include e(item) {
                 color: contrast-color($color: 'primary', $variant: 500);
                 background: color($color: 'primary', $variant: 500);
-                border-color: color($color: 'primary', $variant: 500);
             }
 
             &:focus {
                 @include e(item) {
                     color: contrast-color($color: 'primary', $variant: 800);
                     background: color($color: 'primary', $variant: 800);
-                    border-color: color($color: 'primary', $variant: 800);
                 }
             }
 
@@ -193,7 +185,6 @@ $_theme: digest-schema($material-chip);
                 @include e(item) {
                     color: contrast-color($color: 'primary', $variant: 600);
                     background: color($color: 'primary', $variant: 600);
-                    border-color: color($color: 'primary', $variant: 600);
                 }
             }
         }
@@ -202,14 +193,12 @@ $_theme: digest-schema($material-chip);
             @include e(item) {
                 color: contrast-color($color: 'info', $variant: 500);
                 background: color($color: 'info', $variant: 500);
-                border-color: color($color: 'info', $variant: 500);
             }
 
             &:focus {
                 @include e(item) {
                     color: contrast-color($color: 'info', $variant: 800);
                     background: color($color: 'info', $variant: 800);
-                    border-color: color($color: 'info', $variant: 800);
                 }
             }
 
@@ -217,7 +206,6 @@ $_theme: digest-schema($material-chip);
                 @include e(item) {
                     color: contrast-color($color: 'info', $variant: 600);
                     background: color($color: 'info', $variant: 600);
-                    border-color: color($color: 'info', $variant: 600);
                 }
             }
         }
@@ -226,14 +214,12 @@ $_theme: digest-schema($material-chip);
             @include e(item) {
                 color: contrast-color($color: 'success', $variant: 500);
                 background: color($color: 'success', $variant: 500);
-                border-color: color($color: 'success', $variant: 500);
             }
 
             &:focus {
                 @include e(item) {
                     color: contrast-color($color: 'success', $variant: 800);
                     background: color($color: 'success', $variant: 800);
-                    border-color: color($color: 'success', $variant: 800);
                 }
             }
 
@@ -241,7 +227,6 @@ $_theme: digest-schema($material-chip);
                 @include e(item) {
                     color: contrast-color($color: 'success', $variant: 600);
                     background: color($color: 'success', $variant: 600);
-                    border-color: color($color: 'success', $variant: 600);
                 }
             }
         }
@@ -250,14 +235,12 @@ $_theme: digest-schema($material-chip);
             @include e(item) {
                 color: contrast-color($color: 'warn', $variant: 900);
                 background: color($color: 'warn', $variant: 500);
-                border-color: color($color: 'warn', $variant: 500);
             }
 
             &:focus {
                 @include e(item) {
                     color: contrast-color($color: 'warn', $variant: 800);
                     background: color($color: 'warn', $variant: 800);
-                    border-color: color($color: 'warn', $variant: 800);
                 }
             }
 
@@ -265,7 +248,6 @@ $_theme: digest-schema($material-chip);
                 @include e(item) {
                     color: contrast-color($color: 'warn', $variant: 600);
                     background: color($color: 'warn', $variant: 600);
-                    border-color: color($color: 'warn', $variant: 600);
                 }
             }
         }
@@ -274,14 +256,12 @@ $_theme: digest-schema($material-chip);
             @include e(item) {
                 color: contrast-color($color: 'error', $variant: 500);
                 background: color($color: 'error', $variant: 500);
-                border-color: color($color: 'error', $variant: 500);
             }
 
             &:focus {
                 @include e(item) {
                     color: contrast-color($color: 'error', $variant: 800);
                     background: color($color: 'error', $variant: 800);
-                    border-color: color($color: 'error', $variant: 800);
                 }
             }
 
@@ -289,7 +269,183 @@ $_theme: digest-schema($material-chip);
                 @include e(item) {
                     color: contrast-color($color: 'error', $variant: 600);
                     background: color($color: 'error', $variant: 600);
-                    border-color: color($color: 'error', $variant: 600);
+                }
+            }
+        }
+
+        @include mx(disabled, primary) {
+            @include e(item) {
+                color: color($color: 'gray', $variant: 500);
+                background: color($color: 'gray', $variant: 200);
+            }
+        }
+
+        @include mx(disabled, info) {
+            @include e(item) {
+                color: color($color: 'gray', $variant: 500);
+                background: color($color: 'gray', $variant: 200);
+            }
+        }
+
+        @include mx(disabled, success) {
+            @include e(item) {
+                color: color($color: 'gray', $variant: 500);
+                background: color($color: 'gray', $variant: 200);
+            }
+        }
+
+        @include mx(disabled, warning) {
+            @include e(item) {
+                color: color($color: 'gray', $variant: 500);
+                background: color($color: 'gray', $variant: 200);
+            }
+        }
+
+        @include mx(disabled, danger) {
+            @include e(item) {
+                color: color($color: 'gray', $variant: 500);
+                background: color($color: 'gray', $variant: 200);
+            }
+        }
+
+        @include m(outlined) {
+            @include e(item) {
+                background: var-get($_theme, 'outlined-background');
+                color: var-get($_theme, 'outlined-text-color');
+                border: rem(1px) solid var-get($_theme, 'border-color');
+            }
+
+            @include e(item, $m: 'selected') {
+                background: var-get($_theme, 'selected-outlined-background');
+                color: var-get($_theme, 'selected-outlined-text-color');
+                border: rem(1px) solid var-get($_theme, 'selected-border-color');
+            }
+
+            &:focus {
+                @include e(item) {
+                    color: var-get($_theme, 'focus-outlined-text-color');
+                    background: var-get($_theme, 'focus-outlined-background');
+                    border: rem(1px) solid var-get($_theme, 'focus-border-color');
+                }
+
+                @include e(item, $m: 'selected') {
+                    color: var-get($_theme, 'focus-selected-outlined-text-color');
+                    background: var-get($_theme, 'focus-selected-outlined-background');
+                    border: rem(1px) solid var-get($_theme, 'focus-selected-border-color');
+                }
+            }
+
+            &:hover {
+                @include e(item) {
+                    color: var-get($_theme, 'hover-outlined-text-color');
+                    background: var-get($_theme, 'hover-outlined-background');
+                    border: rem(1px) solid var-get($_theme, 'hover-border-color');
+                }
+
+                @include e(item, $m: 'selected') {
+                    color: var-get($_theme, 'hover-selected-outlined-text-color');
+                    background: var-get($_theme, 'hover-selected-outlined-background');
+                    border: rem(1px) solid var-get($_theme, 'hover-selected-border-color');
+                }
+            }
+        }
+
+        @include mx(primary, outlined) {
+            @include e(item) {
+                background: transparent;
+                color: contrast-color($color: 'primary', $variant: 100);
+                border-color: color($color: 'primary', $variant: 800);
+            }
+
+            &:focus {
+                @include e(item) {
+                    background: color($color: 'primary', $variant: 800, $opacity: .30);
+                }
+            }
+
+            &:hover {
+                @include e(item) {
+                    background: color($color: 'primary', $variant: 600, $opacity: .16);
+                }
+            }
+        }
+
+        @include mx(info, outlined) {
+            @include e(item) {
+                background: transparent;
+                color: contrast-color($color: 'info', $variant: 100);
+                border-color: color($color: 'info', $variant: 800);
+            }
+
+            &:focus {
+                @include e(item) {
+                    background: color($color: 'info', $variant: 800, $opacity: .30);
+                }
+            }
+
+            &:hover {
+                @include e(item) {
+                    background: color($color: 'info', $variant: 600, $opacity: .16);
+                }
+            }
+        }
+
+        @include mx(success, outlined) {
+            @include e(item) {
+                background: transparent;
+                color: contrast-color($color: 'success', $variant: 100);
+                border-color: color($color: 'success', $variant: 800);
+            }
+
+            &:focus {
+                @include e(item) {
+                    background: color($color: 'success', $variant: 800, $opacity: .30);
+                }
+            }
+
+            &:hover {
+                @include e(item) {
+                    background: color($color: 'success', $variant: 600, $opacity: .16);
+                }
+            }
+        }
+
+        @include mx(warning, outlined) {
+            @include e(item) {
+                background: transparent;
+                color: contrast-color($color: 'warn', $variant: 900);
+                border-color: color($color: 'warn', $variant: 800);
+            }
+
+            &:focus {
+                @include e(item) {
+                    background: color($color: 'warn', $variant: 800, $opacity: .30);
+                }
+            }
+
+            &:hover {
+                @include e(item) {
+                    background: color($color: 'warn', $variant: 600, $opacity: .16);
+                }
+            }
+        }
+
+        @include mx(danger, outlined) {
+            @include e(item) {
+                background: transparent;
+                color: contrast-color($color: 'error', $variant: 100);
+                border-color: color($color: 'error', $variant: 800);
+            }
+
+            &:focus {
+                @include e(item) {
+                    background: color($color: 'error', $variant: 800, $opacity: .30);
+                }
+            }
+
+            &:hover {
+                @include e(item) {
+                    background: color($color: 'error', $variant: 600, $opacity: .16);
                 }
             }
         }
@@ -370,7 +526,65 @@ $_theme: digest-schema($material-chip);
             @include e(item) {
                 color: var-get($_theme, 'disabled-text-color');
                 background: var-get($_theme, 'disabled-background');
-                border-color: var-get($_theme, 'disabled-border-color');
+            }
+
+            @include e(item, $m: 'selected') {
+                color: var-get($_theme, 'disabled-selected-text-color');
+                background: var-get($_theme, 'disabled-selected-background');
+            }
+        }
+
+        @include mx(disabled, outlined) {
+            @include e(item) {
+                background: var-get($_theme, 'disabled-outlined-background');
+                color: var-get($_theme, 'disabled-outlined-text-color');
+                border: rem(1px) solid var-get($_theme, 'disabled-border-color');
+            }
+
+            @include e(item, $m: 'selected') {
+                background: var-get($_theme, 'disabled-selected-outlined-background');
+                color: var-get($_theme, 'disabled-selected-outlined-text-color');
+                border: rem(1px) solid var-get($_theme, 'disabled-selected-border-color');
+            }
+        }
+
+        @include mx(disabled, outlined, primary) {
+            @include e(item) {
+                background: color($color: 'gray', $variant: 200, $opacity: .30);
+                color: color($color: 'gray', $variant: 500);
+                border-color: color($color: 'gray', $variant: 500, $opacity: .30);
+            }
+        }
+
+        @include mx(disabled, outlined, info) {
+            @include e(item) {
+                background: color($color: 'gray', $variant: 200, $opacity: .30);
+                color: color($color: 'gray', $variant: 500);
+                border-color: color($color: 'gray', $variant: 500, $opacity: .30);
+            }
+        }
+
+        @include mx(disabled, outlined, success) {
+            @include e(item) {
+                background: color($color: 'gray', $variant: 200, $opacity: .30);
+                color: color($color: 'gray', $variant: 500);
+                border-color: color($color: 'gray', $variant: 500, $opacity: .30);
+            }
+        }
+
+        @include mx(disabled, outlined, warning) {
+            @include e(item) {
+                background: color($color: 'gray', $variant: 200, $opacity: .30);
+                color: color($color: 'gray', $variant: 500);
+                border-color: color($color: 'gray', $variant: 500, $opacity: .30);
+            }
+        }
+
+        @include mx(disabled, outlined, danger) {
+            @include e(item) {
+                background: color($color: 'gray', $variant: 200, $opacity: .30);
+                color: color($color: 'gray', $variant: 500);
+                border-color: color($color: 'gray', $variant: 500, $opacity: .30);
             }
         }
     }
diff --git a/projects/igniteui-angular/chips/src/chips/themes/dark/_bootstrap.scss b/projects/igniteui-angular/chips/src/chips/themes/dark/_bootstrap.scss
new file mode 100644
index 00000000000..5959507de8b
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/chips/themes/dark/_bootstrap.scss
@@ -0,0 +1,40 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use '../../../../../core/src/core/styles/themes/scoping' as *;
+
+@include themed-block(igx-chip, bootstrap, dark) {
+    @include mx(primary, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'primary', $variant: 600);
+            border-color: color($color: 'primary', $variant: 300);
+        }
+    }
+
+    @include mx(info, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'gray', $variant: 100);
+            border-color: color($color: 'info', $variant: 600);
+        }
+    }
+
+    @include mx(success, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'success', $variant: 600);
+            border-color: color($color: 'success', $variant: 200);
+        }
+    }
+
+    @include mx(warning, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'gray', $variant: 100);
+            border-color: color($color: 'warn', $variant: 500);
+        }
+    }
+
+    @include mx(danger, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'error', $variant: 600);
+            border-color: color($color: 'error', $variant: 400);
+        }
+    }
+}
diff --git a/projects/igniteui-angular/chips/src/chips/themes/dark/_fluent.scss b/projects/igniteui-angular/chips/src/chips/themes/dark/_fluent.scss
new file mode 100644
index 00000000000..5c00c3302fc
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/chips/themes/dark/_fluent.scss
@@ -0,0 +1,110 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use '../../../../../core/src/core/styles/themes/scoping' as *;
+
+@include themed-block(igx-chip, fluent, dark) {
+    @include mx(primary, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'primary', $variant: 600);
+            border-color: color($color: 'primary', $variant: 200);
+        }
+    }
+
+    @include mx(primary, outlined) {
+        &:focus {
+            @include e(item) {
+                background: color($color: 'primary', $variant: 800, $opacity: .50);
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'primary', $variant: 600, $opacity: .20);
+            }
+        }
+    }
+
+    @include mx(info, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'info', $variant: 500);
+            border-color: color($color: 'info', $variant: 200);
+        }
+    }
+
+    @include mx(info, outlined) {
+        &:focus {
+            @include e(item) {
+                background: color($color: 'info', $variant: 800, $opacity: .50);
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'info', $variant: 600, $opacity: .20);
+            }
+        }
+    }
+
+    @include mx(success, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'success', $variant: 600);
+            border-color: color($color: 'success', $variant: 100);
+        }
+    }
+
+    @include mx(success, outlined) {
+        &:focus {
+            @include e(item) {
+                background: color($color: 'success', $variant: 800, $opacity: .50);
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'success', $variant: 600, $opacity: .20);
+            }
+        }
+    }
+
+    @include mx(warning, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'warn', $variant: 500);
+            border-color: color($color: 'warn', $variant: 200);
+        }
+    }
+
+    @include mx(warning, outlined) {
+        &:focus {
+            @include e(item) {
+                background: color($color: 'warn', $variant: 800, $opacity: .50);
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'warn', $variant: 600, $opacity: .20);
+            }
+        }
+    }
+
+    @include mx(danger, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'error', $variant: 600);
+            border-color: color($color: 'error', $variant: 50);
+        }
+    }
+
+    @include mx(danger, outlined) {
+        &:focus {
+            @include e(item) {
+                background: color($color: 'error', $variant: 800, $opacity: .50);
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'error', $variant: 600, $opacity: .20);
+            }
+        }
+    }
+}
diff --git a/projects/igniteui-angular/chips/src/chips/themes/dark/_index.scss b/projects/igniteui-angular/chips/src/chips/themes/dark/_index.scss
index 30aab6b03dd..e4749c703c4 100644
--- a/projects/igniteui-angular/chips/src/chips/themes/dark/_index.scss
+++ b/projects/igniteui-angular/chips/src/chips/themes/dark/_index.scss
@@ -1 +1,4 @@
+@use 'material';
+@use 'bootstrap';
+@use 'fluent';
 @use 'indigo';
diff --git a/projects/igniteui-angular/chips/src/chips/themes/dark/_indigo.scss b/projects/igniteui-angular/chips/src/chips/themes/dark/_indigo.scss
index 3db103ecc02..35adb7120d4 100644
--- a/projects/igniteui-angular/chips/src/chips/themes/dark/_indigo.scss
+++ b/projects/igniteui-angular/chips/src/chips/themes/dark/_indigo.scss
@@ -40,12 +40,6 @@
         }
     }
 
-    @include m(disabled) {
-        @include e(item, $m: 'selected') {
-            color: contrast-color($color: 'primary', $variant: 900, $opacity: .2);
-        }
-    }
-
     @include mx(disabled, primary) {
         @include e(item) {
             color: contrast-color($color: 'primary', $variant: 900, $opacity: .2);
@@ -57,4 +51,72 @@
             color: color($color: 'gray', $variant: 50);
         }
     }
+
+    @include mx(primary, outlined) {
+        @include e(item) {
+            color: contrast-color($color: 'primary', $variant: 900);
+        }
+    }
+
+    @include mx(info, outlined) {
+        @include e(item) {
+            color: contrast-color($color: 'info', $variant: 900);
+            border-color: color($color: 'info', $variant: 300);
+        }
+    }
+
+    @include mx(success, outlined) {
+        @include e(item) {
+            color: contrast-color($color: 'success', $variant: 900);
+            border-color: color($color: 'success', $variant: 500);
+        }
+    }
+
+    @include mx(warning, outlined) {
+        @include e(item) {
+            color: contrast-color($color: 'warn', $variant: 900);
+            border-color: color($color: 'warn', $variant: 300);
+        }
+    }
+
+    @include mx(danger, outlined) {
+        @include e(item) {
+            color: contrast-color($color: 'error', $variant: 900);
+            border-color: color($color: 'error', $variant: 400);
+        }
+    }
+
+    @include mx(disabled, outlined, primary) {
+        @include e(item) {
+            color: contrast-color($color: 'gray', $variant: 100);
+        }
+    }
+
+    @include mx(disabled, outlined, info) {
+        @include e(item) {
+            border-color: color($color: 'info', $variant: 300);
+            color: contrast-color($color: 'gray', $variant: 100);
+        }
+    }
+
+    @include mx(disabled, outlined, success) {
+        @include e(item) {
+            border-color: color($color: 'success', $variant: 500);
+            color: contrast-color($color: 'gray', $variant: 100);
+        }
+    }
+
+    @include mx(disabled, outlined, warning) {
+        @include e(item) {
+            border-color: color($color: 'warn', $variant: 300);
+            color: contrast-color($color: 'gray', $variant: 100);
+        }
+    }
+
+    @include mx(disabled, outlined, danger) {
+        @include e(item) {
+            border-color: color($color: 'error', $variant: 400);
+            color: contrast-color($color: 'gray', $variant: 100);
+        }
+    }
 }
diff --git a/projects/igniteui-angular/chips/src/chips/themes/dark/_material.scss b/projects/igniteui-angular/chips/src/chips/themes/dark/_material.scss
new file mode 100644
index 00000000000..e351ec3bd08
--- /dev/null
+++ b/projects/igniteui-angular/chips/src/chips/themes/dark/_material.scss
@@ -0,0 +1,40 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use '../../../../../core/src/core/styles/themes/scoping' as *;
+
+@include themed-block(igx-chip, material, dark) {
+    @include mx(primary, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'primary', $variant: 900);
+            border-color: color($color: 'primary', $variant: 200);
+        }
+    }
+
+    @include mx(info, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'info', $variant: 500);
+            border-color: color($color: 'info', $variant: 200);
+        }
+    }
+
+    @include mx(success, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'success', $variant: 900);
+            border-color: color($color: 'success', $variant: 300);
+        }
+    }
+
+    @include mx(warning, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'gray', $variant: 100);
+            border-color: color($color: 'warn', $variant: 300);
+        }
+    }
+
+    @include mx(danger, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            color: contrast-color($color: 'error', $variant: 900);
+            border-color: color($color: 'error', $variant: 300);
+        }
+    }
+}
diff --git a/projects/igniteui-angular/chips/src/chips/themes/shared/_bootstrap.scss b/projects/igniteui-angular/chips/src/chips/themes/shared/_bootstrap.scss
index 23af67f1f60..9319d8ba83f 100644
--- a/projects/igniteui-angular/chips/src/chips/themes/shared/_bootstrap.scss
+++ b/projects/igniteui-angular/chips/src/chips/themes/shared/_bootstrap.scss
@@ -9,24 +9,19 @@ $_theme: digest-schema($bootstrap-chip);
 @include themed-block(igx-chip, bootstrap) {
     &:focus {
         @include e(item) {
-            box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-outline-color');
+            box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-shadow-color');
         }
 
         @include e(item, $m: 'selected') {
-            box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-selected-outline-color');
+            box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-selected-shadow-color');
         }
     }
 
     @include m(primary) {
-        @include e(item) {
-            color: contrast-color($color: 'primary', $variant: 600);
-        }
-
         &:focus {
             @include e(item) {
                 color: contrast-color($color: 'primary', $variant: 500);
                 background: color($color: 'primary', $variant: 500);
-                border-color: color($color: 'primary', $variant: 500);
                 box-shadow: 0 0 0 rem(4px) color($color: 'primary', $variant: 500, $opacity: .38);
             }
         }
@@ -37,22 +32,16 @@ $_theme: digest-schema($bootstrap-chip);
             @include e(item) {
                 color: contrast-color($color: 'info', $variant: 500);
                 background: color($color: 'info', $variant: 500);
-                border-color: color($color: 'info', $variant: 500);
                 box-shadow: 0 0 0 rem(4px) color($color: 'info', $variant: 500, $opacity: .38);
             }
         }
     }
 
     @include m(success) {
-        @include e(item) {
-            color: contrast-color($color: 'success', $variant: 600);
-        }
-
         &:focus {
             @include e(item) {
                 color: contrast-color($color: 'success', $variant: 600);
                 background: color($color: 'success', $variant: 500);
-                border-color: color($color: 'success', $variant: 500);
                 box-shadow: 0 0 0 rem(4px) color($color: 'success', $variant: 500, $opacity: .38);
             }
         }
@@ -63,30 +52,122 @@ $_theme: digest-schema($bootstrap-chip);
             @include e(item) {
                 color: contrast-color($color: 'warn', $variant: 900);
                 background: color($color: 'warn', $variant: 500);
-                border-color: color($color: 'warn', $variant: 500);
                 box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: .38);
             }
         }
     }
 
     @include m(danger) {
-        @include e(item) {
-            color: contrast-color($color: 'error', $variant: 600);
-        }
-
         &:focus {
             @include e(item) {
                 background: color($color: 'error', $variant: 500);
-                border-color: color($color: 'error', $variant: 500);
                 color: contrast-color($color: 'error', $variant: 600);
                 box-shadow: 0 0 0 rem(4px) color($color: 'error', $variant: 500, $opacity: .38);
             }
         }
     }
 
-    @include m(disabled) {
+    @include mx(primary, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            border-color: color($color: 'primary', $variant: 600);
+            color: contrast-color($color: 'primary', $variant: 100);
+        }
+    }
+
+    @include mx(primary, outlined) {
+        &:focus {
+            @include e(item) {
+                background: transparent;
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'primary', $variant: 600, $opacity: .30);
+            }
+        }
+    }
+
+    @include mx(info, outlined, ('not': ('disabled'))) {
         @include e(item) {
-            color: var-get($_theme, 'disabled-text-color');
+            border-color: color($color: 'info', $variant: 900);
+            color: contrast-color($color: 'info', $variant: 900);
+        }
+    }
+
+    @include mx(info, outlined) {
+        &:focus {
+            @include e(item) {
+                background: transparent;
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'info', $variant: 600, $opacity: .30);
+            }
+        }
+    }
+
+    @include mx(success, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            border-color: color($color: 'success', $variant: 600);
+            color: contrast-color($color: 'success', $variant: 100);
+        }
+    }
+
+    @include mx(success, outlined) {
+        &:focus {
+            @include e(item) {
+                background: transparent;
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'success', $variant: 600, $opacity: .30);
+            }
+        }
+    }
+
+    @include mx(warning, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            border-color: color($color: 'warn', $variant: 900);
+        }
+    }
+
+    @include mx(warning, outlined) {
+        &:focus {
+            @include e(item) {
+                background: transparent;
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'warn', $variant: 600, $opacity: .30);
+            }
+        }
+    }
+
+    @include mx(danger, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            border-color: color($color: 'error', $variant: 600);
+            color: contrast-color($color: 'error', $variant: 100);
+        }
+    }
+
+    @include mx(danger, outlined) {
+        &:focus {
+            @include e(item) {
+                background: transparent;
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'error', $variant: 600, $opacity: .30);
+            }
         }
     }
 }
diff --git a/projects/igniteui-angular/chips/src/chips/themes/shared/_fluent.scss b/projects/igniteui-angular/chips/src/chips/themes/shared/_fluent.scss
index 38b152533f9..9b33db4ee14 100644
--- a/projects/igniteui-angular/chips/src/chips/themes/shared/_fluent.scss
+++ b/projects/igniteui-angular/chips/src/chips/themes/shared/_fluent.scss
@@ -1,9 +1,112 @@
 @use 'igniteui-theming/sass/bem' as *;
 @use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
 @use '../../../../../core/src/core/styles/themes/scoping' as *;
 
 @include themed-block(igx-chip, fluent) {
     @include e(item) {
         @include type-style(subtitle-2);
     }
+
+    @include mx(primary, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            border-color: color($color: 'primary', $variant: 600);
+        }
+    }
+
+    @include mx(primary, outlined) {
+        &:focus {
+            @include e(item) {
+                background: color($color: 'primary', $variant: 800, $opacity: .30);
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'primary', $variant: 600, $opacity: .16);
+            }
+        }
+    }
+
+    @include mx(info, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            border-color: color($color: 'info', $variant: 600);
+            color: contrast-color($color: 'info', $variant: 100);
+        }
+    }
+
+    @include mx(info, outlined) {
+        &:focus {
+            @include e(item) {
+                background: color($color: 'info', $variant: 800, $opacity: .30);
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'info', $variant: 600, $opacity: .16);
+            }
+        }
+    }
+
+    @include mx(success, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            border-color: color($color: 'success', $variant: 600);
+        }
+    }
+
+    @include mx(success, outlined) {
+        &:focus {
+            @include e(item) {
+                background: color($color: 'success', $variant: 800, $opacity: .30);
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'success', $variant: 600, $opacity: .16);
+            }
+        }
+    }
+
+    @include mx(warning, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            border-color: color($color: 'warn', $variant: 600);
+            color: contrast-color($color: 'warn', $variant: 100);
+        }
+    }
+
+    @include mx(warning, outlined) {
+        &:focus {
+            @include e(item) {
+                background: color($color: 'warn', $variant: 800, $opacity: .30);
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'warn', $variant: 600, $opacity: .16);
+            }
+        }
+    }
+
+    @include mx(danger, outlined, ('not': ('disabled'))) {
+        @include e(item) {
+            border-color: color($color: 'error', $variant: 600);
+        }
+    }
+
+    @include mx(danger, outlined) {
+        &:focus {
+            @include e(item) {
+                background: color($color: 'error', $variant: 800, $opacity: .30);
+            }
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'error', $variant: 600, $opacity: .16);
+            }
+        }
+    }
 }
diff --git a/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss b/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss
index eb294227895..fac2450da9e 100644
--- a/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss
+++ b/projects/igniteui-angular/chips/src/chips/themes/shared/_indigo.scss
@@ -16,11 +16,11 @@ $_theme: digest-schema($indigo-chip);
 
     &:focus {
         @include e(item) {
-            box-shadow: 0 0 0 rem(3px) var-get($_theme, 'focus-outline-color');
+            box-shadow: 0 0 0 rem(3px) var-get($_theme, 'focus-shadow-color');
         }
 
         @include e(item, $m: 'selected') {
-            box-shadow: 0 0 0 rem(3px) var-get($_theme, 'focus-selected-outline-color');
+            box-shadow: 0 0 0 rem(3px) var-get($_theme, 'focus-selected-shadow-color');
         }
     }
 
@@ -29,7 +29,6 @@ $_theme: digest-schema($indigo-chip);
             @include e(item) {
                 color: contrast-color($color: 'primary', $variant: 900);
                 background: color($color: 'primary', $variant: 500);
-                border-color: color($color: 'primary', $variant: 500);
                 box-shadow: 0 0 0 rem(3px) color($color: 'primary', $variant: 400, $opacity: .5);
             }
         }
@@ -38,7 +37,6 @@ $_theme: digest-schema($indigo-chip);
             @include e(item) {
                 color: contrast-color($color: 'primary', $variant: 900);
                 background: color($color: 'primary', $variant: 400);
-                border-color: color($color: 'primary', $variant: 400);
             }
         }
     }
@@ -48,7 +46,6 @@ $_theme: digest-schema($indigo-chip);
             @include e(item) {
                 color: contrast-color($color: 'info', $variant: 500);
                 background: color($color: 'info', $variant: 500);
-                border-color: color($color: 'info', $variant: 500);
                 box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: 100);
             }
         }
@@ -57,7 +54,6 @@ $_theme: digest-schema($indigo-chip);
             @include e(item) {
                 color: contrast-color($color: 'info', $variant: 400);
                 background: color($color: 'info', $variant: 400);
-                border-color: color($color: 'info', $variant: 400);
             }
         }
     }
@@ -66,7 +62,6 @@ $_theme: digest-schema($indigo-chip);
         @include e(item) {
             color: contrast-color($color: 'success', $variant: 900);
             background: color($color: 'success', $variant: 800);
-            border-color: color($color: 'success', $variant: 800);
         }
 
         &:focus {
@@ -78,7 +73,6 @@ $_theme: digest-schema($indigo-chip);
         &:hover {
             @include e(item) {
                 background: color($color: 'success', $variant: 700);
-                border-color: color($color: 'success', $variant: 700);
             }
         }
     }
@@ -91,7 +85,6 @@ $_theme: digest-schema($indigo-chip);
         &:focus {
             @include e(item) {
                 background: color($color: 'warn', $variant: 500);
-                border-color: color($color: 'warn', $variant: 500);
                 box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: 100);
             }
         }
@@ -99,7 +92,6 @@ $_theme: digest-schema($indigo-chip);
         &:hover {
             @include e(item) {
                 background: color($color: 'warn', $variant: 400);
-                border-color: color($color: 'warn', $variant: 400);
             }
         }
     }
@@ -108,7 +100,6 @@ $_theme: digest-schema($indigo-chip);
         @include e(item) {
             color: contrast-color($color: 'error', $variant: 900);
             background: color($color: 'error', $variant: 600);
-            border-color: color($color: 'error', $variant: 600);
         }
 
         &:focus {
@@ -121,24 +112,14 @@ $_theme: digest-schema($indigo-chip);
         &:hover {
             @include e(item) {
                 background: color($color: 'error', $variant: 500);
-                border-color: color($color: 'error', $variant: 500);
             }
         }
     }
 
-    @include m(disabled) {
-        @include e(item, $m: 'selected') {
-            background: color($color: 'primary', $variant: 400, $opacity: .5);
-            color: contrast-color($color: 'primary', $variant: 900, $opacity: .4);
-            border-color: transparent;
-        }
-    }
-
     @include mx(disabled, primary) {
         @include e(item) {
             background: color($color: 'primary', $variant: 400, $opacity: .5);
             color: contrast-color($color: 'primary', $variant: 900, $opacity: .4);
-            border-color: transparent;
         }
     }
 
@@ -146,7 +127,6 @@ $_theme: digest-schema($indigo-chip);
         @include e(item) {
             color: contrast-color($color: 'info', $variant: 900);
             background: color($color: 'info', $variant: 500);
-            border-color: color($color: 'info', $variant: 500);
             opacity: .4;
         }
     }
@@ -161,7 +141,6 @@ $_theme: digest-schema($indigo-chip);
         @include e(item) {
             color: color($color: 'gray', $variant: 900);
             background: color($color: 'warn', $variant: 500);
-            border-color: color($color: 'warn', $variant: 500);
             opacity: .4;
         }
     }
@@ -170,7 +149,112 @@ $_theme: digest-schema($indigo-chip);
         @include e(item) {
             color: contrast-color($color: 'error', $variant: 900);
             background: color($color: 'error', $variant: 600);
-            border-color: color($color: 'error', $variant: 600);
+            opacity: .4;
+        }
+    }
+
+    @include mx(primary, outlined) {
+        @include e(item) {
+            background: transparent;
+            color: color($color: 'gray', $variant: 900);
+            border-color: color($color: 'primary', $variant: 400);
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'primary', $variant: 400, $opacity: .30);
+            }
+        }
+    }
+
+    @include mx(info, outlined) {
+        @include e(item) {
+            background: transparent;
+            color: color($color: 'gray', $variant: 900);
+            border-color: color($color: 'info', $variant: 500);
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'info', $variant: 400, $opacity: .30);
+            }
+        }
+    }
+
+    @include mx(success, outlined) {
+        @include e(item) {
+            background: transparent;
+            color: color($color: 'gray', $variant: 900);
+            border-color: color($color: 'success', $variant: 700);
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'success', $variant: 700, $opacity: .30);
+            }
+        }
+    }
+
+    @include mx(warning, outlined) {
+        @include e(item) {
+            background: transparent;
+            color: color($color: 'gray', $variant: 900);
+            border-color: color($color: 'warn', $variant: 600);
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'warn', $variant: 400, $opacity: .30);
+            }
+        }
+    }
+
+    @include mx(danger, outlined) {
+        @include e(item) {
+            background: transparent;
+            color: color($color: 'gray', $variant: 900);
+            border-color: color($color: 'error', $variant: 500);
+        }
+
+        &:hover {
+            @include e(item) {
+                background: color($color: 'error', $variant: 500, $opacity: .30);
+            }
+        }
+    }
+
+     @include mx(disabled, outlined) {
+        @include e(item, $m: 'selected') {
+            opacity: .4;
+        }
+    }
+
+    @include mx(disabled, outlined, primary) {
+        @include e(item) {
+            opacity: .4;
+        }
+    }
+
+    @include mx(disabled, outlined, info) {
+        @include e(item) {
+            opacity: .4;
+        }
+    }
+
+    @include mx(disabled, outlined, success) {
+        @include e(item) {
+            opacity: .4;
+        }
+    }
+
+    @include mx(disabled, outlined, warning) {
+        @include e(item) {
+            opacity: .4;
+        }
+    }
+
+    @include mx(disabled, outlined, danger) {
+        @include e(item) {
             opacity: .4;
         }
     }
diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json
index d31b3dfdaca..79317e036d7 100644
--- a/projects/igniteui-angular/migrations/migration-collection.json
+++ b/projects/igniteui-angular/migrations/migration-collection.json
@@ -299,6 +299,11 @@
             "version": "22.1.0",
             "description": "Updates Ignite UI for Angular from v22.0.x to v22.1.0",
             "factory": "./update-22_1_0"
+        },
+        "migration-59": {
+            "version": "22.2.0",
+            "description": "Updates Ignite UI for Angular from v22.1.x to v22.2.0",
+            "factory": "./update-22_2_0"
         }
     }
 }
diff --git a/projects/igniteui-angular/migrations/update-22_2_0/changes/theme-changes.json b/projects/igniteui-angular/migrations/update-22_2_0/changes/theme-changes.json
new file mode 100644
index 00000000000..aeb661e7a4d
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-22_2_0/changes/theme-changes.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$focus-outline-color",
+      "replaceWith": "$focus-shadow-color",
+      "owner": "chip-theme",
+      "type": "property"
+    },
+    {
+      "name": "$focus-selected-outline-color",
+      "replaceWith": "$focus-selected-shadow-color",
+      "owner": "chip-theme",
+      "type": "property"
+    }
+  ]
+}
diff --git a/projects/igniteui-angular/migrations/update-22_2_0/index.spec.ts b/projects/igniteui-angular/migrations/update-22_2_0/index.spec.ts
new file mode 100644
index 00000000000..5aa8274f004
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-22_2_0/index.spec.ts
@@ -0,0 +1,38 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing/index.js';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '22.2.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-59';
+
+    it('should rename focus-outline-color and focus-selected-outline-color in chip-theme', async () => {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+
+        appTree.create(
+            testFilePath,
+            `$my-chip-theme: chip-theme(
+                $focus-outline-color: red,
+                $focus-selected-outline-color: blue
+            );`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `$my-chip-theme: chip-theme(
+                $focus-shadow-color: red,
+                $focus-selected-shadow-color: blue
+            );`
+        );
+    });
+});
diff --git a/projects/igniteui-angular/migrations/update-22_2_0/index.ts b/projects/igniteui-angular/migrations/update-22_2_0/index.ts
new file mode 100644
index 00000000000..2154fdd72d7
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-22_2_0/index.ts
@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '22.2.0';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};
diff --git a/src/app/chips/chips.sample.html b/src/app/chips/chips.sample.html
index a2b9ec5c92e..691bcf84e60 100644
--- a/src/app/chips/chips.sample.html
+++ b/src/app/chips/chips.sample.html
@@ -30,6 +30,38 @@
         ></igx-circular-bar>
         } Chip component
     </igx-chip>
+<igx-chip
+        #outlinedChip
+        [variant]="properties.variant"
+        [disabled]="properties.disabled"
+        [selectable]="properties.selectable"
+        [removable]="properties.removable"
+        [selected]="properties.selected"
+        [draggable]="properties.draggable"
+        [removeIcon]="customIcons ? myRemoveIcon : null"
+        [selectIcon]="customIcons ? mySelectIcon : null"
+        (remove)="removeChip(outlinedChip)"
+        outlined
+    >
+        @if (hasAvatar) {
+        <igx-avatar
+            igxPrefix
+            class="chip-area-avatar"
+            [shape]="'circle'"
+            initials="MP"
+        ></igx-avatar>
+        } @if (hasPrefix) {
+        <igx-icon igxPrefix>face</igx-icon>
+        } @if (hasSuffix) {
+        <igx-icon igxSuffix>face</igx-icon>
+        } @if (hasProgressbar) {
+        <igx-circular-bar
+            igxSuffix
+            class="circular-sample"
+            [indeterminate]="true"
+        ></igx-circular-bar>
+        } Chip component
+    </igx-chip>
 <strong class="framework-tittle framework-tittle--wc">Web component</strong>
 <igc-chip
         #wc
@@ -64,6 +96,40 @@
         ></igc-circular-progress>
         } Chip component
     </igc-chip>
+<igc-chip
+        #wcOutlinedChip
+        [variant]="properties.variant"
+        [disabled]="properties.disabled"
+        [selectable]="properties.selectable"
+        [removable]="properties.removable"
+        [selected]="properties.selected"
+        [draggable]="properties.draggable"
+        outlined
+    >
+        @if (hasAvatar) {
+        <igc-avatar
+            class="chip-area-avatar"
+            slot="prefix"
+            initials="MP"
+            shape="circle"
+        ></igc-avatar>
+        } @if (hasPrefix) {
+        <igc-icon slot="prefix" name="face"></igc-icon>
+        } @if (customIcons) {
+        <span slot="select"
+            ><igc-icon name="check_circle"></igc-icon
+        ></span>
+        <span slot="remove"><igc-icon name="delete"></igc-icon></span>
+        } @if (hasSuffix) {
+        <igc-icon slot="suffix" name="face"></igc-icon>
+        } @if (hasProgressbar) {
+        <igc-circular-progress
+            class="circular-sample"
+            slot="suffix"
+            [indeterminate]="true"
+        ></igc-circular-progress>
+        } Chip component
+    </igc-chip>
 
 <ng-template #mySelectIcon>
     <igx-icon>check_circle</igx-icon>
diff --git a/src/app/chips/chips.sample.scss b/src/app/chips/chips.sample.scss
index 28a23da036f..04561d2fed1 100644
--- a/src/app/chips/chips.sample.scss
+++ b/src/app/chips/chips.sample.scss
@@ -15,3 +15,15 @@
         grid-column: 2;
     }
 }
+
+igx-chip[outlined] {
+    grid-column: 1;
+}
+
+igc-chip:not([outlined]) {
+    grid-area: 2 / 2;
+}
+
+igc-chip[outlined] {
+    grid-area: 3 / 2;
+}
\ No newline at end of file