diff --git a/demo/src/screens/componentScreens/ChipScreen.tsx b/demo/src/screens/componentScreens/ChipScreen.tsx
index 8fad886506..dab40a8377 100644
--- a/demo/src/screens/componentScreens/ChipScreen.tsx
+++ b/demo/src/screens/componentScreens/ChipScreen.tsx
@@ -1,17 +1,16 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {Chip, Colors, Spacings, Text, Typography, View, Dialog, WheelPickerDialog} from 'react-native-ui-lib';
+import {Chip, Colors, Spacings, Text, Typography, View, Dialog, WheelPickerDialog, Image} from 'react-native-ui-lib';
 
 const avatarImage = {
   uri: 'https://randomuser.me/api/portraits/women/24.jpg'
 };
 const checkmark = require('../../assets/icons/check-small.png');
 const chevron = require('../../assets/icons/chevronDown.png');
-
+const bell = require('../../assets/icons/bell.png');
 
 export default class ChipScreen extends Component {
-
   colors = [
     {value: Colors.red10, label: 'Red'},
     {value: Colors.blue10, label: 'Blue'},
@@ -31,7 +30,7 @@ export default class ChipScreen extends Component {
 
   openDialog = () => {
     this.toggleDialog(true);
-  }
+  };
 
   closeDialog = () => {
     this.toggleDialog(false);
@@ -73,13 +72,7 @@ export default class ChipScreen extends Component {
     const {showDialog} = this.state;
 
     return (
-      <Dialog
-        migrate
-        visible={showDialog}
-        useSafeArea
-        bottom
-        onDismiss={this.closeDialog}
-      >
+      <Dialog migrate visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
         {this.renderContent()}
       </Dialog>
     );
@@ -104,59 +97,34 @@ export default class ChipScreen extends Component {
         <Text marginB-10 text70BO>
           Default
         </Text>
-        {this.renderExample(
-          'Label',
-          <Chip label={'Chip'}/>
-        )}
-        {this.renderExample(
-          'Label + onPress',
-          <Chip label={'Chip'} onPress={() => Alert.alert('onPress')}/>
-        )}
-        {this.renderExample(
-          'Label + onDismiss',
+        {this.renderExample('Label', <Chip label={'Chip'}/>)}
+        {this.renderExample('Label + onPress', <Chip label={'Chip'} onPress={() => Alert.alert('onPress')}/>)}
+        {this.renderExample('Label + onDismiss',
           <Chip
             label={'Chip'}
             iconColor={Colors.black}
             onDismiss={() => Alert.alert('onDismiss')}
             onPress={() => Alert.alert('onPress')}
             dismissIconStyle={{width: 10, height: 10}}
-          />
-        )}
-        {this.renderExample(
-          'Icon',
-          <Chip
-            iconSource={checkmark}
-            iconStyle={{width: 24, height: 24}}
-            iconProps={{tintColor: Colors.black}}
-          />
-        )}
-        {this.renderExample(
-          'Left icon',
+          />)}
+        {this.renderExample('Icon',
+          <Chip iconSource={checkmark} iconStyle={{width: 24, height: 24}} iconProps={{tintColor: Colors.black}}/>)}
+        {this.renderExample('Left icon',
           <Chip
             label={'Chip'}
             iconSource={checkmark}
             iconStyle={{width: 24, height: 24}}
             iconProps={{tintColor: Colors.black}}
-          />
-        )}
-        {this.renderExample(
-          'Right icon + onPress + dynamic label',
+          />)}
+        {this.renderExample('Right icon + onPress + dynamic label',
           <Chip
             label={this.state.selectedValue}
             rightIconSource={chevron}
             iconStyle={{margin: 8}}
             onPress={this.openDialog}
-          />
-        )}
-        {this.renderExample(
-          'Label + Avatar',
-          <Chip
-            label={'Chip'}
-            avatarProps={{source: avatarImage, size: 20}}
-          />
-        )}
-        {this.renderExample(
-          'Label + Counter',
+          />)}
+        {this.renderExample('Label + Avatar', <Chip label={'Chip'} avatarProps={{source: avatarImage, size: 20}}/>)}
+        {this.renderExample('Label + Counter',
           <Chip
             label={'Chip'}
             labelStyle={{
@@ -170,18 +138,15 @@ export default class ChipScreen extends Component {
                 color: Colors.grey20
               }
             }}
-          />
-        )}
-        {this.renderExample(
-          'Label + Badge',
+          />)}
+        {this.renderExample('Label + Badge',
           <Chip
             label={'Chip'}
             badgeProps={{
               label: '4',
               backgroundColor: 'red'
             }}
-          />
-        )}
+          />)}
 
         <Text marginT-20 marginB-10 text70BO>
           Custom
@@ -234,6 +199,36 @@ export default class ChipScreen extends Component {
             }}
           />
         </View>
+        <View center row marginT-10>
+          <Chip
+            rightElement={<Image tintColor={Colors.yellow30} source={bell} width={24} height={24}/>}
+            label={'Chip'}
+          />
+          <Chip
+            marginL-s3
+            rightElement={<Image tintColor={Colors.green20} source={bell} width={20} height={20}/>}
+            leftElement={<Image tintColor={Colors.green20} source={bell} width={20} height={20}/>}
+            label={'Chip'}
+          />
+          <Chip
+            marginL-s3
+            leftElement={
+              <View center row marginL-s1>
+                <Image tintColor={Colors.blue30} source={bell}/>
+                <Image tintColor={Colors.blue30} source={bell} width={20} height={20}/>
+                <Image tintColor={Colors.blue30} source={bell} width={24} height={24}/>
+              </View>
+            }
+            label={'Chip'}
+          />
+          <Chip
+            marginL-s3
+            paddingR-s2
+            rightIconSource={chevron}
+            rightElement={<Image tintColor={Colors.red30} source={bell} width={20} height={20}/>}
+            label={'Chip'}
+          />
+        </View>
       </View>
     );
   }
diff --git a/generatedTypes/components/chip/index.d.ts b/generatedTypes/components/chip/index.d.ts
index cf7362aaaf..d96632c93c 100644
--- a/generatedTypes/components/chip/index.d.ts
+++ b/generatedTypes/components/chip/index.d.ts
@@ -76,6 +76,14 @@ export declare type ChipProps = ViewProps & TouchableOpacityProps & {
      * Right icon's source
      */
     rightIconSource?: ImageSourcePropType;
+    /**
+     * Left custom element
+     */
+    leftElement?: JSX.Element;
+    /**
+     * Right custom element
+     */
+    rightElement?: JSX.Element;
     /**
      * Adds a dismiss button and serves as its callback
      */
@@ -170,6 +178,14 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
      * Right icon's source
      */
     rightIconSource?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
+    /**
+     * Left custom element
+     */
+    leftElement?: JSX.Element | undefined;
+    /**
+     * Right custom element
+     */
+    rightElement?: JSX.Element | undefined;
     /**
      * Adds a dismiss button and serves as its callback
      */
diff --git a/src/components/chip/index.tsx b/src/components/chip/index.tsx
index f9f6935078..4cb56d6496 100644
--- a/src/components/chip/index.tsx
+++ b/src/components/chip/index.tsx
@@ -3,7 +3,7 @@ import React, {useCallback} from 'react';
 import {StyleSheet, StyleProp, ViewStyle, ViewProps, ImageStyle, TextStyle, ImageSourcePropType} from 'react-native';
 import Assets from '../../assets';
 import {asBaseComponent} from '../../commons/new';
-import {BorderRadiuses, Spacings} from '../../style';
+import {BorderRadiuses, Spacings} from 'style';
 import Avatar, {AvatarProps} from '../avatar';
 import Badge, {BadgeProps, BADGE_SIZES} from '../badge';
 import Image, {ImageProps} from '../image';
@@ -94,6 +94,18 @@ export type ChipProps = ViewProps & TouchableOpacityProps & {
    */
   rightIconSource?: ImageSourcePropType;
 
+  //LEFT ELEMENT
+  /**
+   * Left custom element
+   */
+  leftElement?: JSX.Element;
+
+  //RIGHT ELEMENT
+   /**
+    * Right custom element
+    */
+  rightElement?: JSX.Element;
+ 
   //DISMISS ('x' button)
   /**
    * Adds a dismiss button and serves as its callback
@@ -142,6 +154,8 @@ const Chip = ({
   iconSource,
   iconStyle,
   rightIconSource,
+  leftElement,
+  rightElement,
   label,
   labelStyle,
   onPress,
@@ -241,13 +255,18 @@ const Chip = ({
               marginRight: Spacings.s1
             };
           }
-          if (iconSource) {
+          if (rightElement && leftElement) {
+            return {
+              marginHorizontally: 2
+            };
+          }
+          if (iconSource || leftElement) {
             return {
               marginLeft: 2,
               marginRight: Spacings.s3
             };
           }
-          if (rightIconSource) {
+          if (rightIconSource || rightElement) {
             return {
               marginLeft: Spacings.s3,
               marginRight: 2
@@ -304,7 +323,9 @@ const Chip = ({
     >
       {avatarProps && renderAvatar()}
       {iconSource && renderIcon('left')}
+      {leftElement}
       {label && renderLabel()}
+      {rightElement}
       {rightIconSource && renderIcon('right')}
       {badgeProps && renderBadge()}
       {onDismiss && renderOnDismiss()}