diff --git a/src/Chip/Chip.test.jsx b/src/Chip/Chip.test.jsx
index fd933621fbf..6a28153f822 100644
--- a/src/Chip/Chip.test.jsx
+++ b/src/Chip/Chip.test.jsx
@@ -77,5 +77,23 @@ describe('<Chip />', () => {
       await userEvent.type(iconAfter, '{enter}');
       expect(func).toHaveBeenCalled();
     });
+    it('onIconBeforeClick is triggered', async () => {
+      const func = jest.fn();
+      render(
+        <TestChip iconBefore={Close} onIconBeforeClick={func} />,
+      );
+      const iconBefore = screen.getByTestId('icon-before');
+      await userEvent.click(iconBefore);
+      expect(func).toHaveBeenCalled();
+    });
+    it('onIconBeforeKeyDown is triggered', async () => {
+      const func = jest.fn();
+      render(
+        <TestChip iconBefore={Close} onIconBeforeClick={func} />,
+      );
+      const iconBefore = screen.getByTestId('icon-before');
+      await userEvent.type(iconBefore, '{enter}');
+      expect(func).toHaveBeenCalled();
+    });
   });
 });
diff --git a/src/Chip/README.md b/src/Chip/README.md
index 6497f9e7d3e..0fbcbc28f58 100644
--- a/src/Chip/README.md
+++ b/src/Chip/README.md
@@ -16,34 +16,99 @@ notes: |
 ## Basic Usage
 
 ```jsx live
-<div>
-  <Chip>New</Chip>
-  <Chip disabled>New</Chip>
-  <Chip variant="dark">New</Chip>
-</div>
+<Stack
+    gap={2}
+    direction="horizontal"
+>
+    <Chip>New</Chip>
+    <Chip disabled>New</Chip>
+</Stack>
 ```
 
 ## With Icon Before and After
+### Basic Usage
 
 ```jsx live
-<div>
-  <Chip iconBefore={Person}>New</Chip>
-  <Chip
-    variant="dark"
-    iconBefore={Person}
-    iconAfter={Close}
-    onIconAfterClick={() => console.log('Remove Chip')}
-  >
-    New
-  </Chip>
-  <Chip
-    variant="dark"
-    iconBefore={Person}
-    iconAfter={Close}
-    onIconAfterClick={() => console.log('Remove Chip')}
-    disabled
-  >
-    New
-  </Chip>
-</div>
+<Stack
+    gap={2}
+    direction="horizontal"
+>
+    <Chip iconBefore={Person}>New</Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+    >
+        New 1
+    </Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => console.log('Remove Chip')}
+    >
+        New
+    </Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => console.log('onIconBeforeClick')}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+    >
+        New
+    </Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+        disabled
+    >
+        New
+    </Chip>
+</Stack>
+```
+
+### Inverse Pallete
+
+```jsx live
+<Stack
+    className="bg-dark-700 p-4"
+    gap={2}
+    direction="horizontal"
+>
+    <Chip variant="dark" iconBefore={Person}>New</Chip>
+    <Chip
+        variant="dark"
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+    >
+        New 1
+    </Chip>
+    <Chip
+        variant="dark"
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => console.log('Remove Chip')}
+    >
+        New
+    </Chip>
+    <Chip
+        variant="dark"
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => console.log('onIconBeforeClick')}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+    >
+        New
+    </Chip>
+    <Chip
+        variant="dark"
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+        disabled
+    >
+        New
+    </Chip>
+</Stack>
 ```
diff --git a/src/Chip/__snapshots__/Chip.test.jsx.snap b/src/Chip/__snapshots__/Chip.test.jsx.snap
index 4b706e50dbe..f1982430b7e 100644
--- a/src/Chip/__snapshots__/Chip.test.jsx.snap
+++ b/src/Chip/__snapshots__/Chip.test.jsx.snap
@@ -3,6 +3,10 @@
 exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__label p-after"
@@ -11,9 +15,6 @@ exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
   </div>
   <div
     className="pgn__chip__icon-after"
-    data-testid="icon-after"
-    role="button"
-    tabIndex={0}
   >
     <span
       className="pgn__icon"
@@ -41,6 +42,10 @@ exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
 exports[`<Chip /> snapshots renders with props iconBefore 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__icon-before"
@@ -76,6 +81,10 @@ exports[`<Chip /> snapshots renders with props iconBefore 1`] = `
 exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__icon-before"
@@ -107,9 +116,6 @@ exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
   </div>
   <div
     className="pgn__chip__icon-after"
-    data-testid="icon-after"
-    role="button"
-    tabIndex={0}
   >
     <span
       className="pgn__icon"
@@ -137,6 +143,10 @@ exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
 exports[`<Chip /> snapshots renders without props 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__label"
diff --git a/src/Chip/_variables.scss b/src/Chip/_variables.scss
index 90c2878e076..30fb1e76451 100644
--- a/src/Chip/_variables.scss
+++ b/src/Chip/_variables.scss
@@ -1,19 +1,29 @@
-$chip-padding-x:                    .5rem !default;
-$chip-padding-y:                    .125rem !default;
-$chip-padding-to-icon:              3px !default;
-$chip-icon-padding:                 .25rem !default;
-$chip-margin:                       .125rem !default;
-$chip-border-radius:                .25rem !default;
-$chip-disable-opacity:              .3 !default;
-$chip-icon-size:                    1.25rem !default;
-
-$chip-theme-variants: (
-  "light": (
-    "background": $light-500,
-    "color": $black,
-  ),
-  "dark": (
-    "background": $dark-200,
-    "color": $white,
-  )
-) !default;
+$chip-padding-x:                            .5rem !default;
+$chip-padding-y:                            1px !default;
+$chip-icon-margin:                          .25rem !default;
+$chip-margin:                               .125rem !default;
+$chip-border-radius:                        .375rem !default;
+$chip-disable-opacity:                      .3 !default;
+$chip-icon-size:                            1.5rem !default;
+$chip-label-color:                          $primary-700 !default;
+$chip-border-color:                         $light-800 !default;
+$chip-light-bg-color:                       $white !default;
+$chip-light-outline-color:                  $chip-label-color !default;
+$chip-light-selected-outline-distance:      3px !default;
+$chip-light-selected-focus-border-color:    $dark-500 !default;
+$chip-light-hover-bg:                       $dark-500 !default;
+$chip-light-hover-border-color:             $chip-light-hover-bg !default;
+$chip-light-hover-label-color:              $chip-light-bg-color !default;
+$chip-light-hover-icon-color:               $chip-light-hover-label-color !default;
+$chip-light-focus-outline-distance:         .313rem !default;
+$chip-dark-bg:                              $primary-300 !default;
+$chip-dark-outline-color:                   $white !default;
+$chip-dark-selected-outline-distance:       3px !default;
+$chip-dark-selected-focus-border-color:     $chip-dark-outline-color !default;
+$chip-dark-label-color:                     $chip-dark-outline-color !default;
+$chip-dark-hover-bg:                        $white !default;
+$chip-dark-hover-border-color:              $chip-dark-hover-bg !default;
+$chip-dark-hover-label-color:               $primary-500 !default;
+$chip-dark-hover-icon-color:                $chip-dark-hover-label-color !default;
+$chip-dark-focus-outline-distance:          .313rem !default;
+$chip-dark-icon-border-color:               transparent !default;
diff --git a/src/Chip/index.scss b/src/Chip/index.scss
index d809b022fe9..8b572d2c8d5 100644
--- a/src/Chip/index.scss
+++ b/src/Chip/index.scss
@@ -1,37 +1,44 @@
 @import "variables";
+@import "mixins";
 
 .pgn__chip {
-  background: $light-500;
   border-radius: $chip-border-radius;
   display: inline-flex;
   margin: $chip-margin;
-  box-sizing: border-box;
+  border: 1px solid $chip-border-color;
+  padding: $chip-padding-y $chip-padding-x;
+  cursor: pointer;
+  position: relative;
+  outline: none;
+  transition: all .3s;
 
   .pgn__chip__label {
-    font-size: $font-size-sm;
-    padding: $chip-padding-y $chip-padding-x;
+    font-size: $font-size-xs;
+    line-height: 1.5rem;
+    font-weight: $font-weight-bold;
+    color: $chip-label-color;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    box-sizing: border-box;
-    cursor: default;
 
-    &.p-before {
-      padding-left: $chip-padding-to-icon;
+    [dir="rtl"] & {
+      margin-left: $chip-icon-margin;
+    }
+  }
 
-      [dir="rtl"] & {
-        padding-left: $chip-padding-x;
-        padding-right: $chip-padding-to-icon;
-      }
+  .pgn__chip__icon-before {
+    margin-right: $chip-icon-margin;
+
+    [dir="rtl"] & {
+      margin-right: 0;
     }
+  }
 
-    &.p-after {
-      padding-right: $chip-padding-to-icon;
+  .pgn__chip__icon-after {
+    margin-left: $chip-icon-margin;
 
-      [dir="rtl"] & {
-        padding-right: $chip-padding-x;
-        padding-left: $chip-padding-to-icon;
-      }
+    [dir="rtl"] & {
+      margin-left: 0;
     }
   }
 
@@ -39,53 +46,161 @@
   .pgn__chip__icon-after {
     align-items: center;
     display: flex;
-    padding-left: $chip-icon-padding;
-    padding-right: $chip-icon-padding;
-    box-sizing: border-box;
-    cursor: default;
+    outline: none;
 
-    .pgn__icon {
+    .btn-icon {
       width: $chip-icon-size;
       height: $chip-icon-size;
     }
 
-    &.active:hover,
-    &.active:focus {
-      cursor: pointer;
-      background: $black;
+    &.active {
+      border-radius: 50%;
+    }
+  }
+
+  &.pgn__chip-light {
+    background-color: $chip-light-bg-color;
+
+    &.selected {
+      @include chip-outline(
+        $chip-light-outline-color,
+        calc($chip-light-selected-outline-distance * -1),
+        calc($chip-border-radius + .188rem),
+        $chip-light-selected-outline-distance
+      );
 
-      * {
-        color: $white;
-        fill: $white;
+      &:focus {
+        border: 1px solid $chip-light-selected-focus-border-color;
       }
     }
-  }
 
-  .pgn__chip__icon-before {
-    border-radius: $chip-border-radius 0 0 $chip-border-radius;
+    &:hover {
+      background-color: $chip-light-hover-bg;
+      border-color: $chip-light-hover-border-color;
 
-    [dir="rtl"] & {
-      border-radius: 0 $chip-border-radius $chip-border-radius 0;
+      .pgn__chip__label {
+        color: $chip-light-hover-label-color;
+      }
+
+      .pgn__chip__icon-before,
+      .pgn__chip__icon-after {
+        .pgn__icon {
+          color: $chip-light-hover-icon-color;
+        }
+
+        &.active {
+          &:hover .btn-icon .pgn__icon {
+            color: $chip-light-hover-bg;
+          }
+
+          .btn-icon:focus {
+            .pgn__icon {
+              border-color: $chip-light-hover-icon-color;
+            }
+
+            &:hover .pgn__icon {
+              border-color: $chip-light-hover-icon-color;
+              background-color: $chip-light-hover-icon-color;
+              color: $chip-light-hover-bg;
+            }
+          }
+        }
+      }
     }
-  }
 
-  .pgn__chip__icon-after {
-    border-radius: 0 $chip-border-radius $chip-border-radius 0;
+    .pgn__chip__icon-before,
+    .pgn__chip__icon-after {
+      .pgn__icon {
+        color: $chip-label-color;
+        border: 2px solid $chip-dark-icon-border-color;
+      }
 
-    [dir="rtl"] & {
-      border-radius: $chip-border-radius 0 0 $chip-border-radius;
+      &.active .btn-icon:focus .pgn__icon {
+        border: 2px solid $chip-light-selected-focus-border-color;
+        border-radius: 50%;
+      }
+    }
+
+    &:focus {
+      @include chip-outline(
+        $chip-light-selected-focus-border-color,
+        calc($chip-light-focus-outline-distance * -1),
+        calc($chip-border-radius + .188rem)
+      );
     }
   }
 
-  @each $color, $styles in $chip-theme-variants {
-    &.pgn__chip-#{$color} {
-      background: map-get($styles, "background");
+  &.pgn__chip-dark {
+    background-color: $chip-dark-bg;
+
+    &.selected {
+      @include chip-outline($chip-dark-outline-color,
+      calc($chip-dark-selected-outline-distance * -1),
+      calc($chip-border-radius + .188rem),
+      $chip-dark-selected-outline-distance
+    );
 
-      * {
-        color: map-get($styles, "color");
-        fill: map-get($styles, "color");
+      &:focus {
+        border: 1px solid $chip-dark-selected-focus-border-color;
       }
     }
+
+    .pgn__chip__label {
+      color: $chip-dark-label-color;
+    }
+
+    &:hover {
+      background-color: $chip-dark-hover-bg;
+      border-color: $chip-dark-hover-border-color;
+
+      .pgn__chip__label {
+        color: $chip-dark-hover-label-color;
+      }
+
+      .pgn__chip__icon-before,
+      .pgn__chip__icon-after {
+        .pgn__icon {
+          color: $chip-dark-hover-icon-color;
+          border-radius: 50%;
+        }
+
+        &.active {
+          &:hover .btn-icon .pgn__icon {
+            background-color: $chip-dark-hover-icon-color;
+            color: $chip-dark-hover-bg;
+          }
+
+          .btn-icon:focus .pgn__icon {
+            border: 2px solid $chip-dark-hover-icon-color;
+
+            &:hover {
+              background-color: $chip-dark-hover-icon-color;
+              color: $chip-dark-hover-bg;
+            }
+          }
+        }
+      }
+    }
+
+    .pgn__chip__icon-before,
+    .pgn__chip__icon-after {
+      .pgn__icon {
+        color: $chip-dark-outline-color;
+        border: 2px solid $chip-dark-icon-border-color;
+      }
+
+      &.active .btn-icon:focus .pgn__icon {
+        border: 2px solid $chip-dark-icon-border-color;
+      }
+    }
+
+    &:focus {
+      @include chip-outline(
+        $chip-dark-outline-color,
+        calc($chip-dark-focus-outline-distance * -1),
+        calc($chip-border-radius + .188rem)
+      );
+    }
   }
 
   &.disabled,
diff --git a/src/Chip/index.tsx b/src/Chip/index.tsx
index 2966e0c7387..e61b5ba7a1b 100644
--- a/src/Chip/index.tsx
+++ b/src/Chip/index.tsx
@@ -1,8 +1,12 @@
-import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';
+import React, {
+  ForwardedRef, KeyboardEventHandler, MouseEventHandler, useState,
+} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 // @ts-ignore
 import Icon from '../Icon';
+// @ts-ignore
+import IconButton from '../IconButton';
 
 const STYLE_VARIANTS = [
   'light',
@@ -32,46 +36,73 @@ const Chip = React.forwardRef(({
   onIconAfterClick,
   disabled,
   ...props
-}: IChip, ref: ForwardedRef<HTMLDivElement>) => (
-  <div
-    className={classNames(
-      CHIP_PGN_CLASS,
-      `pgn__chip-${variant}`,
-      className,
-      { disabled },
-    )}
-    ref={ref}
-    {...props}
-  >
-    {iconBefore && (
-      <div
-        className={classNames('pgn__chip__icon-before')}
-      >
-        <Icon src={iconBefore} />
-      </div>
-    )}
+}: IChip, ref: ForwardedRef<HTMLDivElement>) => {
+  const [isSelected, setIsSelected] = useState(false);
+
+  const handleClick = () => {
+    setIsSelected(!isSelected);
+  };
+
+  return (
     <div
-      className={classNames('pgn__chip__label', {
-        'p-before': iconBefore,
-        'p-after': iconAfter,
-      })}
+      tabIndex={0}
+      role="button"
+      onClick={handleClick}
+      onKeyPress={handleClick}
+      className={classNames(
+        CHIP_PGN_CLASS,
+        `pgn__chip-${variant}`,
+        className,
+        { disabled, selected: isSelected },
+      )}
+      ref={ref}
+      {...props}
     >
-      {children}
-    </div>
-    {iconAfter && (
+      {iconBefore && (
+        <div className={classNames('pgn__chip__icon-before', { active: onIconBeforeClick })}>
+          {onIconBeforeClick ? (
+            <IconButton
+              src={iconBefore}
+              onClick={onIconBeforeClick}
+              onKeyPress={onIconBeforeClick}
+              iconAs={Icon}
+              alt="Chip icon before"
+              invertColors
+              data-testid="icon-before"
+            />
+          ) : (
+            <Icon src={iconBefore} />
+          )}
+        </div>
+      )}
       <div
-        className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}
-        role="button"
-        onClick={onIconAfterClick}
-        onKeyPress={onIconAfterClick}
-        tabIndex={disabled ? -1 : 0}
-        data-testid="icon-after"
+        className={classNames('pgn__chip__label', {
+          'p-before': iconBefore,
+          'p-after': iconAfter,
+        })}
       >
-        <Icon src={iconAfter} />
+        {children}
       </div>
-    )}
-  </div>
-));
+      {iconAfter && (
+        <div className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}>
+          {onIconAfterClick ? (
+            <IconButton
+              onClick={onIconAfterClick}
+              onKeyPress={onIconAfterClick}
+              src={iconAfter}
+              iconAs={Icon}
+              alt="Chip icon after"
+              invertColors
+              data-testid="icon-after"
+            />
+          ) : (
+            <Icon src={iconAfter} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
 
 Chip.propTypes = {
   /** Specifies the content of the `Chip`. */
diff --git a/src/Chip/mixins.scss b/src/Chip/mixins.scss
new file mode 100644
index 00000000000..5611132d101
--- /dev/null
+++ b/src/Chip/mixins.scss
@@ -0,0 +1,12 @@
+@mixin chip-outline($ring-color: $white, $distance-to-border: 0, $border-radius: 50%, $border-width: .125rem) {
+  &::before {
+    content: "";
+    position: absolute;
+    top: $distance-to-border;
+    right: $distance-to-border;
+    bottom: $distance-to-border;
+    left: $distance-to-border;
+    border: solid $border-width $ring-color;
+    border-radius: $border-radius;
+  }
+}
diff --git a/src/SelectableBox/tests/SelectableBoxSet.test.jsx b/src/SelectableBox/tests/SelectableBoxSet.test.jsx
index 934220403b3..e010d69d69b 100644
--- a/src/SelectableBox/tests/SelectableBoxSet.test.jsx
+++ b/src/SelectableBox/tests/SelectableBoxSet.test.jsx
@@ -68,10 +68,13 @@ describe('<SelectableBox.Set />', () => {
       expect(screen.getByTestId('checkbox-set')).toBeInTheDocument();
     });
     it('renders with radio type if neither checkbox nor radio is passed', () => {
+      // eslint-disable-next-line no-console
       const originalError = console.error;
+      // eslint-disable-next-line no-console
       console.error = jest.fn();
       render(<SelectableCheckboxSet type="text" data-testid="radio-set" />);
       expect(screen.getByTestId('radio-set')).toBeInTheDocument();
+      // eslint-disable-next-line no-console
       console.error = originalError;
     });
     it('renders with radio type', () => {