diff --git a/lib/avatar/theme.module.scss b/lib/avatar/theme.module.scss
index f823363c..d19e1ffe 100644
--- a/lib/avatar/theme.module.scss
+++ b/lib/avatar/theme.module.scss
@@ -21,7 +21,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 24px;
+  font-size: 150%;
   font-weight: bold;
   color: $secondary-white;
   fill: $secondary-white; // if element provided is SVG
diff --git a/lib/chip/index.js b/lib/chip/index.js
index c461f5c4..cd5a24e3 100644
--- a/lib/chip/index.js
+++ b/lib/chip/index.js
@@ -46,10 +46,11 @@ const Chip = ({
       className: classnames(
         avatarElement.props.className,
         theme[`${size}Avatar`],
+        theme['chip-avatar'],
       ),
     });
   } else if (typeof avatarElement === 'string') {
-    avatar = <img src={avatarElement} alt="A" className={classnames(theme[`${size}Avatar`])} />;
+    avatar = <img src={avatarElement} alt="A" className={classnames(theme[`${size}Avatar`], theme['chip-avatar'])} />;
   }
 
   /* DeleteIcon related block */
@@ -65,7 +66,11 @@ const Chip = ({
 
   return (
     <Element href="#" className={classes} {...props} onClick={Element === 'a' ? handleChipClick : () => {}}>
-      { avatar }
+      { avatar !== null ? (
+        <div className={classnames(theme[`${size}Avatar`], theme['chip-avatar'])}>
+          { avatar }
+        </div>
+      ) : null }
       <span className={theme.label}>{ label }</span>
       { deleteIcon }
     </Element>
diff --git a/lib/chip/theme.module.scss b/lib/chip/theme.module.scss
index cbfee38c..221c1ef5 100644
--- a/lib/chip/theme.module.scss
+++ b/lib/chip/theme.module.scss
@@ -1,210 +1,227 @@
 @import '../globals/theme.scss';
-
 :local(.chip) {
-  display:  inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  height: auto;
-  border: 1px solid $secondary-white;
-  box-sizing: border-box;
-  &[disabled] {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-  &.avatarMarginLeft {
-    margin-left: 0.5%;
-  }
-  .icon-cross {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    height: auto;
+    border: 1px solid $secondary-white;
+    box-sizing: border-box;
+    overflow: none;
+    &[disabled] {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+    .icon-cross {
+        height: 100%;
+        width: 100%;
+    }
+}
+
+:local(.chip-avatar) {
     height: 100%;
-    width: 100%;
-  }
+    max-width: 2em;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    * {
+      height: 100%;
+    }
+    img {
+        height: 100%;
+        width: auto;
+    }
 }
 
 :local(.clickable) {
-  cursor: pointer;
-  text-decoration: none;
+    cursor: pointer;
+    text-decoration: none;
 }
+
 :local(.label) {
-  text-transform: capitalize;
-  padding: 6px 12px;
+    text-transform: capitalize;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    padding: 0.5em;
+    margin: auto;
 }
 
 :local(.smallAvatar) {
-  overflow: hidden;
-  border-radius: 50%;
-  max-height: 28px;
-  max-width: 28px;
-  object-fit: contain;
-  margin-left: -2%;
+    overflow: hidden;
+    border-radius: 50%;
+    max-width: 2.5em;
+    object-fit: contain;
 }
+
 :local(.mediumAvatar) {
-  overflow: hidden;
-  border-radius: 50%;
-  max-height: 36px;
-  max-width: 36px;
-  object-fit: contain;
-  margin-left: -2%;
+    overflow: hidden;
+    border-radius: 50%;
+    object-fit: contain;
 }
+
 :local(.largeAvatar) {
-  overflow: hidden;
-  border-radius: 50%;
-  max-height: 52px;
-  max-width: 52px;
-  object-fit: contain;
-  margin-left: -2%;
+    overflow: hidden;
+    border-radius: 50%;
+    object-fit: contain;
 }
 
 :local(.deleteIcon) {
-  font-weight: bold;
-  padding: 2px;
-  border-radius: 50%;
-  cursor: pointer;
-  outline: none;
-  border: none;
-  overflow: hidden;
+    font-weight: bold;
+    padding: 2px;
+    border-radius: 50%;
+    cursor: pointer;
+    outline: none;
+    border: none;
+    overflow: hidden;
 }
 
 :local(.smallDelete) {
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-  margin: 0 4px;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+    margin: 0 4px;
 }
+
 :local(.mediumDelete) {
-  width: 19px;
-  height: 19px;
-  font-size: 12px;
-  line-height: 16px;
-  margin: 0 6px;
+    width: 19px;
+    height: 19px;
+    font-size: 12px;
+    line-height: 16px;
+    margin: 0 6px;
 }
+
 :local(.largeDelete) {
-  width: 25px;
-  height: 25px;
-  font-size: 16px;
-  line-height: 20px;
-  margin: 0 8px;
+    width: 25px;
+    height: 25px;
+    font-size: 16px;
+    line-height: 20px;
+    margin: 0 8px;
 }
 
 :local(.small) {
-  font-size: 10px;
-  line-height: 11px;
-  border-radius: 34px;
-  padding: 0;
-  min-width: 55px;
-  height: 22px;
+    font-size: 10px;
+    line-height: 11px;
+    border-radius: 34px;
+    padding: 0;
+    min-width: 55px;
+    height: 1.8rem;
 }
 
 :local(.medium) {
-  font-size: 16px;
-  line-height: 19px;
-  border-radius: 34px;
-  padding: 0;
-  min-width: 90px;
-  height: 30px;
+    font-size: 16px;
+    line-height: 19px;
+    border-radius: 34px;
+    padding: 0;
+    min-width: 90px;
+    height: 2.2rem;
 }
 
 :local(.large) {
-  font-size: 18px;
-  line-height: 20px;
-  border-radius: 34px;
-  padding: 0;
-  min-width: 105px;
-  height: 45px;
+    font-size: 18px;
+    line-height: 20px;
+    border-radius: 34px;
+    padding: 0;
+    min-width: 105px;
+    height: 2.5rem;
 }
 
 :local(.primary) {
-  color: $original-white;
-  background-color: $secondary-violet;
-  border-color: $secondary-violet;
+    color: $original-white;
+    background-color: $secondary-violet;
+    border-color: $secondary-violet;
 }
 
 :local(.secondary) {
-  color: $original-white;
-  background-color: $secondary-grey;
-  border-color: $secondary-grey;
+    color: $original-white;
+    background-color: $secondary-grey;
+    border-color: $secondary-grey;
 }
 
 :local(.success) {
-  color: $original-white;
-  background-color: $secondary-green;
-  border-color: $secondary-green;
+    color: $original-white;
+    background-color: $secondary-green;
+    border-color: $secondary-green;
 }
 
 :local(.danger) {
-  color: $original-white;
-  background-color: $secondary-red;
-  border-color: $secondary-red;
+    color: $original-white;
+    background-color: $secondary-red;
+    border-color: $secondary-red;
 }
 
 :local(.warning) {
-  color: $secondary-black;
-  background-color: $secondary-yellow;
-  border-color: $secondary-yellow;
+    color: $secondary-black;
+    background-color: $secondary-yellow;
+    border-color: $secondary-yellow;
 }
 
 :local(.info) {
-  color: $original-white;
-  background-color: $secondary-blue;
-  border-color: $secondary-blue;
+    color: $original-white;
+    background-color: $secondary-blue;
+    border-color: $secondary-blue;
 }
 
 :local(.light) {
-  color: $secondary-black;
-  background-color: $secondary-white;
-  border-color: $secondary-white;
+    color: $secondary-black;
+    background-color: $secondary-white;
+    border-color: $secondary-white;
 }
 
 :local(.dark) {
-  color: $original-white;
-  background-color: $secondary-black;
-  border-color: $secondary-black;
+    color: $original-white;
+    background-color: $secondary-black;
+    border-color: $secondary-black;
 }
 
 /* Outlined */
+
 :local(.primaryOutlined) {
-  color: $secondary-violet;
-  background-color: $original-white;
-  border-color: $secondary-violet;
+    color: $secondary-violet;
+    background-color: $original-white;
+    border-color: $secondary-violet;
 }
 
 :local(.secondaryOutlined) {
-  color: $secondary-grey;
-  background-color: $original-white;
-  border-color: $secondary-grey;
+    color: $secondary-grey;
+    background-color: $original-white;
+    border-color: $secondary-grey;
 }
 
 :local(.successOutlined) {
-  color: $secondary-green;
-  background-color: $original-white;
-  border-color: $secondary-green;
+    color: $secondary-green;
+    background-color: $original-white;
+    border-color: $secondary-green;
 }
 
 :local(.dangerOutlined) {
-  color: $secondary-red;
-  background-color: $original-white;
-  border-color: $secondary-red;
+    color: $secondary-red;
+    background-color: $original-white;
+    border-color: $secondary-red;
 }
 
 :local(.warningOutlined) {
-  color: $secondary-yellow;
-  background-color: $secondary-black;
-  border-color: $secondary-yellow;
+    color: $secondary-yellow;
+    background-color: $secondary-black;
+    border-color: $secondary-yellow;
 }
 
 :local(.infoOutlined) {
-  color: $secondary-blue;
-  background-color: $original-white;
-  border-color: $secondary-blue;
+    color: $secondary-blue;
+    background-color: $original-white;
+    border-color: $secondary-blue;
 }
 
 :local(.lightOutlined) {
-  color: $secondary-white;
-  background-color: transparent;
-  border-color: $secondary-white;
+    color: $secondary-white;
+    background-color: transparent;
+    border-color: $secondary-white;
 }
 
 :local(.darkOutlined) {
-  color: $secondary-black;
-  background-color: $original-white;
-  border-color: $secondary-black;
-}
+    color: $secondary-black;
+    background-color: $original-white;
+    border-color: $secondary-black;
+}
\ No newline at end of file