diff --git a/.gitignore b/.gitignore
index f20d5e27..b08ead5e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@ yalc.lock
 /storybook-static
 
 # misc
+/.idea
 .DS_Store
 .env.local
 .env.development.local
diff --git a/src/dataDisplay/Icon/icon.stories.tsx b/src/dataDisplay/Icon/icon.stories.tsx
index 0755dda9..442c5907 100644
--- a/src/dataDisplay/Icon/icon.stories.tsx
+++ b/src/dataDisplay/Icon/icon.stories.tsx
@@ -63,6 +63,7 @@ export const Icons = (): React.ReactElement => {
     'eyeOff',
     'filledCross',
     'fingerPrint',
+    'fuelIndicator',
     'getInTouch',
     'home',
     'info',
diff --git a/src/dataDisplay/Icon/images/fuelIndicator.tsx b/src/dataDisplay/Icon/images/fuelIndicator.tsx
new file mode 100644
index 00000000..9b033291
--- /dev/null
+++ b/src/dataDisplay/Icon/images/fuelIndicator.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+export default {
+  sm: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16">
+      <g fill="none" fillRule="evenodd">
+        <path d="M0 0H16V16H0z" />
+        <g fill="#B2B5B2">
+          <path
+            d="M9.358 4.231L8.245 7.368c-.054.127-.118.244-.192.347-.871 1.245-2.834.06-2.141-1.292.04-.077.085-.152.137-.225l.08-.106.01-.012 2.176-2.36c.416-.507 1.199-.068 1.043.511z"
+            transform="translate(1 2)"
+          />
+          <path
+            fillRule="nonzero"
+            d="M7.004 0C3.128 0 0 3.247 0 7.23c0 1.121.253 2.208.73 3.203.165.347.516.568.901.568h10.746c.385 0 .736-.221.902-.568.477-.996.73-2.083.73-3.202 0-3.985-3.128-7.23-7.005-7.23zm0 2c2.756 0 5.005 2.334 5.005 5.23L12 7.537c-.023.405-.091.802-.202 1.188l-.09.276H2.299l-.088-.276C2.071 8.243 2 7.742 2 7.23 2 4.335 4.25 2 7.004 2z"
+            transform="translate(1 2)"
+          />
+        </g>
+      </g>
+    </svg>
+  ),
+  md: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24">
+      <g fill="none" fillRule="evenodd">
+        <path d="M0 0H24V24H0z" />
+        <path
+          fill="#B2B5B2"
+          d="M11.182 12.552c-.128.117-.242.247-.342.387-1.046 1.478 1.086 3.218 2.325 1.898.118-.125.222-.264.311-.412l2.245-4.28c.306-.512-.353-1.05-.795-.648l-3.744 3.055"
+        />
+        <path
+          fill="#B2B5B2"
+          fillRule="nonzero"
+          d="M12 4C6.476 4 2 8.477 2 14c0 1.555.364 3.064 1.051 4.445.17.34.516.554.895.554h16.107c.38 0 .726-.214.896-.554.686-1.378 1.05-2.888 1.05-4.445 0-5.523-4.476-10-10-10zm0 2c4.418 0 8 3.581 8 8l-.008.338c-.038.9-.228 1.775-.56 2.603l-.025.058H4.592l-.025-.059C4.194 16.007 4 15.015 4 14c0-4.418 3.582-8 8-8z"
+        />
+      </g>
+    </svg>
+  ),
+};
diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx
index b4fddea0..ff7483ab 100644
--- a/src/dataDisplay/Icon/index.tsx
+++ b/src/dataDisplay/Icon/index.tsx
@@ -33,6 +33,7 @@ import eye from './images/eye';
 import eyeOff from './images/eyeOff';
 import filledCross from './images/filledCross';
 import fingerPrint from './images/fingerPrint';
+import fuelIndicator from './images/fuelIndicator';
 import getInTouch from './images/getInTouch';
 import home from './images/home';
 import info from './images/info';
@@ -72,7 +73,7 @@ import userEdit from './images/userEdit';
 import wallet from './images/wallet';
 import { rgba } from 'polished';
 
-import theme, { Theme, ThemeColors, ThemeIconSize } from '../../theme';
+import theme, { ThemeColors, ThemeIconSize } from '../../theme';
 
 const StyledIcon = styled.span<{ color?: ThemeColors }>`
   .icon-color {
@@ -121,6 +122,7 @@ const icons = {
   eyeOff,
   filledCross,
   fingerPrint,
+  fuelIndicator,
   getInTouch,
   home,
   info,