diff --git a/src/Chip/Chip.test.jsx b/src/Chip/Chip.test.jsx
index aabc0ec3604..4aa3ecf4697 100644
--- a/src/Chip/Chip.test.jsx
+++ b/src/Chip/Chip.test.jsx
@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Close } from '../../icons';
+import { STYLE_VARIANTS } from './constants';
 import Chip from '.';
 
 function TestChip(props) {
@@ -44,7 +45,7 @@ describe('<Chip />', () => {
 
   describe('correct rendering', () => {
     it('renders with correct class when variant is added', () => {
-      render(<TestChip variant="dark" />);
+      render(<TestChip variant={STYLE_VARIANTS[1]} />);
       const chip = screen.getByRole('button');
       expect(chip).toHaveClass('pgn__chip pgn__chip-dark');
     });
diff --git a/src/Chip/ChipIcon.tsx b/src/Chip/ChipIcon.tsx
index 3085b56cb97..5756e2e6367 100644
--- a/src/Chip/ChipIcon.tsx
+++ b/src/Chip/ChipIcon.tsx
@@ -26,7 +26,7 @@ function ChipIcon({
         onKeyPress={onClick}
         iconAs={Icon}
         alt={alt}
-        invertColors={variant === STYLE_VARIANTS[2]}
+        invertColors={variant === STYLE_VARIANTS[1]}
       />
     );
   }
@@ -36,7 +36,7 @@ function ChipIcon({
 
 ChipIcon.propTypes = {
   className: PropTypes.string.isRequired,
-  src: PropTypes.node.isRequired,
+  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
   onClick: PropTypes.func,
   alt: PropTypes.string.isRequired,
   variant: PropTypes.string,
@@ -44,7 +44,7 @@ ChipIcon.propTypes = {
 
 ChipIcon.defaultProps = {
   onClick: undefined,
-  variant: STYLE_VARIANTS[1],
+  variant: STYLE_VARIANTS[0],
 };
 
 export default ChipIcon;
diff --git a/src/Chip/README.md b/src/Chip/README.md
index 15baa8f925b..bb439d6c15a 100644
--- a/src/Chip/README.md
+++ b/src/Chip/README.md
@@ -37,6 +37,7 @@ notes: |
     isSelected
     iconAfter={Close}
     onIconAfterClick={() => console.log('onIconAfterClick')}
+    iconAfterAlt="icon-after"
   >
     New
   </Chip>
@@ -51,10 +52,11 @@ notes: |
   gap={2}
   direction="horizontal"
 >
-  <Chip iconBefore={Person}>New</Chip>
+  <Chip iconBefore={Person} iconBeforeAlt="icon-before">New</Chip>
   <Chip
     iconAfter={Close}
     onIconAfterClick={() => console.log('onIconAfterClick')}
+    iconAfterAlt="icon-after"
   >
     New 1
   </Chip>
@@ -62,6 +64,8 @@ notes: |
     iconBefore={Person}
     iconAfter={Close}
     onIconAfterClick={() => console.log('onIconAfterClick')}
+    iconAfterAlt="icon-after"
+    iconBeforeAlt="icon-before"
     disabled
   >
     New
@@ -77,11 +81,12 @@ notes: |
   gap={2}
   direction="horizontal"
 >
-  <Chip variant="dark" iconBefore={Person}>New</Chip>
+  <Chip variant="dark" iconBefore={Person} iconBeforeAlt="icon-before">New</Chip>
   <Chip
     variant="dark"
     iconAfter={Close}
     onIconAfterClick={() => console.log('onIconAfterClick')}
+    iconAfterAlt="icon-after"
   >
     New 1
   </Chip>
@@ -89,6 +94,7 @@ notes: |
     variant="dark"
     iconAfter={Close}
     onIconAfterClick={() => console.log('onIconAfterClick')}
+    iconAfterAlt="icon-after"
     disabled
   >
     New
diff --git a/src/Chip/constants.js b/src/Chip/constants.js
index c6f9baeb67c..9119ee5d00d 100644
--- a/src/Chip/constants.js
+++ b/src/Chip/constants.js
@@ -1,3 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
 export const STYLE_VARIANTS = ['light', 'dark'];
-
-export const CHIP_PGN_CLASS = 'pgn__chip';
diff --git a/src/Chip/index.tsx b/src/Chip/index.tsx
index ec212fad02d..9ca28cd52b3 100644
--- a/src/Chip/index.tsx
+++ b/src/Chip/index.tsx
@@ -4,10 +4,12 @@ import classNames from 'classnames';
 // @ts-ignore
 import { requiredWhen } from '../utils/propTypes';
 // @ts-ignore
-import { CHIP_PGN_CLASS, STYLE_VARIANTS } from './constants';
+import { STYLE_VARIANTS } from './constants';
 // @ts-ignore
 import ChipIcon from './ChipIcon';
 
+export const CHIP_PGN_CLASS = 'pgn__chip';
+
 export interface IChip {
   children: React.ReactNode,
   className?: string,