diff --git a/CHANGELOG.md b/CHANGELOG.md
index de1a0196cf6..b1d3ecd58cd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiToken` component ([#1270](https://github.com/elastic/eui/pull/1270)) 
 - Added `beaker` icon to `EuiIcon` and updated the `EuiBetaBadge` styling ([#1291](https://github.com/elastic/eui/pull/1291/))
 - Removed calls to deprecated `findDOMNode` ([#1285](https://github.com/elastic/eui/pull/1285))
 
@@ -10,6 +11,7 @@
 - `popover_positioning` service's methods no longer accept React node values ([#1285](https://github.com/elastic/eui/pull/1285))
 
 **Bug fixes**
+
 - Added TypeScript definitions for tab components ([#1288](https://github.com/elastic/eui/pull/1288))
 
 ## [`4.8.0`](https://github.com/elastic/eui/tree/v4.8.0)
@@ -36,6 +38,7 @@
 - Added [Framer X](http://www.framer.com) component source files under the `src-framer` directory ([#1263](https://github.com/elastic/eui/pull/1263))
 - Added `compressed` prop to `EuiComboBox` ([#1258](https://github.com/elastic/eui/pull/1258))
 - Added guidelines for Sass usage. ([#1257](https://github.com/elastic/eui/pull/1257))
+- Adding a `branch` icon to `EuiIcon` ([#1249](https://github.com/elastic/eui/pull/1249/))
 
 **Bug fixes**
 
diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js
index 02c6444f401..7b035eace14 100644
--- a/src-docs/src/views/icon/icon_example.js
+++ b/src-docs/src/views/icon/icon_example.js
@@ -9,6 +9,7 @@ import {
 import {
   EuiCode,
   EuiIcon,
+  EuiToken,
 } from '../../../../src/components';
 
 const iconHtmlWarning = () => (
@@ -24,6 +25,9 @@ const iconsHtml = renderToHtml(iconHtmlWarning);
 import Icons from './icons';
 const iconsSource = require('!!raw-loader!./icons');
 
+import Tokens from './tokens';
+const tokensSource = require('!!raw-loader!./tokens');
+
 import Apps from './apps';
 const appsSource = require('!!raw-loader!./apps');
 
@@ -95,6 +99,37 @@ export const IconExample = {
       </p>
     ),
     demo: <Apps />,
+  }, {
+    title: 'Tokens',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: tokensSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: iconsHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Tokens are most commonly used in search to help visually classify results.
+          The tokens included in EUI can be used to identify a number of code-based
+          search results.
+        </p>
+
+        <p>
+          An <EuiCode>EuiToken</EuiCode> accepts any valid <EuiCode>EuiIcon</EuiCode> as its
+          <EuiCode>iconType</EuiCode> property. However, icons designed specifically for
+          use in the <EuiCode>EuiToken</EuiCode> are prefixed with &quot;token&quot; in their name.
+        </p>
+
+        <p>
+          Multiple variants are available including: <EuiCode>shape</EuiCode>, <EuiCode>size</EuiCode>,
+          <EuiCode>color</EuiCode>, <EuiCode>hideBorder</EuiCode>, and <EuiCode>fill</EuiCode>.
+        </p>
+      </div>
+    ),
+    props: { EuiToken },
+    demo: <Tokens />,
   }, {
     title: 'Machine learning icons',
     source: [{
diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
index f4c20e2ac79..5695fb7aff0 100644
--- a/src-docs/src/views/icon/icons.js
+++ b/src-docs/src/views/icon/icons.js
@@ -153,7 +153,7 @@ const iconTypes = [
   'visText',
   'visTimelion',
   'visVega',
-  'visVisualBuilder',
+  'visVisualBuilder'
 ];
 
 export default () => (
diff --git a/src-docs/src/views/icon/tokens.js b/src-docs/src/views/icon/tokens.js
new file mode 100644
index 00000000000..3eb56d5683a
--- /dev/null
+++ b/src-docs/src/views/icon/tokens.js
@@ -0,0 +1,128 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiPanel,
+  EuiText,
+  EuiToken,
+  EuiSpacer,
+} from '../../../../src/components';
+
+const tokens = [
+  'tokenAnnotation',
+  'tokenArray',
+  'tokenBoolean',
+  'tokenClass',
+  'tokenConstant',
+  'tokenElement',
+  'tokenEnum',
+  'tokenEnumMember',
+  'tokenEvent',
+  'tokenException',
+  'tokenField',
+  'tokenFunction',
+  'tokenInterface',
+  'tokenKey',
+  'tokenMethod',
+  'tokenNull',
+  'tokenNumber',
+  'tokenObject',
+  'tokenOperator',
+  'tokenPackage',
+  'tokenParameter',
+  'tokenProperty',
+  'tokenString',
+  'tokenStruct',
+  'tokenVariable',
+  'tokenFile',
+  'tokenSymbol',
+  'tokenRepo'
+];
+
+export default () => (
+  <Fragment>
+    <EuiFlexGrid columns={4}>
+      {
+        tokens.map(token => (
+          <EuiFlexItem
+            className="guideDemo__icon"
+            key={token}
+          >
+            <EuiPanel>
+              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
+                <EuiToken iconType={token}/>
+              </div>
+              <EuiText size="s">
+                <p>{token}</p>
+              </EuiText>
+            </EuiPanel>
+          </EuiFlexItem>
+        ))
+      }
+    </EuiFlexGrid>
+
+    <EuiSpacer />
+
+    <EuiFlexGrid columns={4}>
+      <EuiFlexItem
+        className="guideDemo__icon"
+      >
+        <EuiPanel>
+          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
+            <EuiToken
+              iconType="tokenEvent"
+              size="m"
+              displayOptions={{
+                color: 'tokenTint10',
+                shape: 'square',
+                fill: true,
+              }}
+            />
+          </div>
+          <EuiText size="s">
+            <p>A custom token</p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+      <EuiFlexItem
+        className="guideDemo__icon"
+      >
+        <EuiPanel>
+          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
+            <EuiToken
+              iconType="visMapCoordinate"
+              displayOptions={{
+                color: 'tokenTint05',
+                shape: 'circle',
+              }}
+            />
+          </div>
+          <EuiText size="s">
+            <p>A custom token</p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+      <EuiFlexItem
+        className="guideDemo__icon"
+      >
+        <EuiPanel>
+          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
+            <EuiToken
+              iconType="tokenElement"
+              size="l"
+              displayOptions={{
+                color: 'tokenTint07',
+                shape: 'rectangle',
+                hideBorder: true
+              }}
+            />
+          </div>
+          <EuiText size="s">
+            <p>A custom token</p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGrid>
+  </Fragment>
+);
diff --git a/src/components/icon/__snapshots__/icon.test.js.snap b/src/components/icon/__snapshots__/icon.test.js.snap
index 02e261a65d0..c0d38192b67 100644
--- a/src/components/icon/__snapshots__/icon.test.js.snap
+++ b/src/components/icon/__snapshots__/icon.test.js.snap
@@ -5067,6 +5067,447 @@ exports[`EuiIcon props type timelionApp is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type tokenAnnotation is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8.15 3.392c2.797 0 4.524 1.644 4.517 4.289.007 1.816-.708 2.893-2.21 3.004-.908.076-1.081-.287-1.157-.725h-.041c-.163.42-.964.732-1.744.683-1.053-.065-2.082-.842-2.09-2.572.008-1.72 1.071-2.441 1.959-2.586.804-.135 1.598.158 1.723.462h.051v-.386h1.195v3.452c.007.3.128.425.304.425.4 0 .677-.583.673-1.861.004-2.376-1.705-2.914-3.187-2.914-2.34 0-3.415 1.522-3.422 3.387.007 2.127 1.22 3.277 3.433 3.277.808 0 1.598-.176 2.006-.349l.393 1.122c-.435.27-1.419.508-2.493.508-2.98 0-4.723-1.66-4.727-4.496.004-2.804 1.748-4.72 4.817-4.72zM7.964 6.79c-.76 0-1.185.459-1.188 1.24.003.683.3 1.332 1.202 1.332.821 0 1.094-.473 1.077-1.343-.004-.718-.204-1.23-1.091-1.23z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenArray is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4.392 12V4h2.713v1.14h-1.21v5.72h1.21V12H4.392zm7.692-8v8H9.37v-1.14h1.209V5.14H9.37V4h2.714z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenBoolean is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4.936 11.064l6.128-6.128a4.333 4.333 0 1 0-6.128 6.128zM8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenClass is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M11.333 7.027H9.375c-.056-.708-.48-1.187-1.222-1.187-.972 0-1.5.806-1.5 2.16 0 1.43.545 2.16 1.486 2.16.708 0 1.139-.415 1.236-1.08l1.958.015C11.236 10.418 10.181 12 8.097 12c-1.958 0-3.43-1.41-3.43-4 0-2.6 1.514-4 3.43-4 1.792 0 3.084 1.095 3.236 3.027z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenConstant is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M9.414 3.757l2.829 2.829a2 2 0 0 1 0 2.828l-2.829 2.829a2 2 0 0 1-2.828 0L3.757 9.414a2 2 0 0 1 0-2.828l2.829-2.829a2 2 0 0 1 2.828 0zm-1.747 2.91a1 1 0 0 0-1 1v.666a1 1 0 0 0 1 1h.666a1 1 0 0 0 1-1v-.666a1 1 0 0 0-1-1h-.666z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenElement is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7.39 9.736l-1.041.94L3.258 8l3.09-2.677 1.041.94-2.032 1.722v.03l2.032 1.721zm2.777.94l-1.04-.94 2.032-1.721v-.03L9.126 6.264l1.04-.94L13.259 8l-3.091 2.677z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenEnum is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M5.211 12V4h5.578v1.57H7.145v1.641h3.359v1.574H7.145v1.645h3.644V12z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenEnumMember is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7.682 12V9.247l1.023-.861a.5.5 0 0 0-.003-.768l-1.02-.844V4h5.578v1.57H9.615v1.64h3.36v1.575h-3.36v1.645h3.645V12H7.682zm.743-4.103a.138.138 0 0 1 0 .206L6.158 9.97a.133.133 0 0 1-.218-.103v-.934H2.873A.133.133 0 0 1 2.74 8.8V7.2c0-.074.06-.133.133-.133H5.94v-.934a.133.133 0 0 1 .218-.103l2.267 1.867z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenEvent is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M11.225 5.656c0 .423-.106.79-.318 1.102-.211.311-.51.57-.898.775a5.435 5.435 0 0 1-1.392.485c-.54.117-1.14.193-1.798.229a6.047 6.047 0 0 0-.035.67c0 .258.02.51.062.757.04.247.114.464.22.652s.25.34.432.458.414.176.696.176c.211 0 .467-.044.766-.132.3-.088.62-.244.96-.467.106-.07.192-.129.256-.176a.365.365 0 0 1 .22-.07c.118 0 .197.061.238.185a.99.99 0 0 1 .062.255 7.1 7.1 0 0 1-.573.467 4.93 4.93 0 0 1-.775.467c-.288.141-.6.261-.934.361-.335.1-.678.15-1.03.15-.541 0-.982-.088-1.322-.264a2.072 2.072 0 0 1-.793-.688 2.626 2.626 0 0 1-.388-.933 4.949 4.949 0 0 1-.106-1.005c0-.634.103-1.257.309-1.868.205-.61.499-1.157.88-1.638.383-.482.838-.87 1.366-1.163A3.567 3.567 0 0 1 9.093 4c.599 0 1.104.126 1.515.379.411.252.617.678.617 1.277zm-2.467-.951c-.223 0-.435.08-.635.238-.2.158-.381.373-.546.643-.164.27-.305.578-.423.925a6.42 6.42 0 0 0-.264 1.101c.47-.047.863-.135 1.18-.264.318-.13.57-.285.758-.467.188-.182.323-.388.405-.617.083-.229.124-.467.124-.713 0-.27-.056-.479-.168-.626a.519.519 0 0 0-.431-.22z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenException is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7.461 7.31h3.055a.74.74 0 0 1 .66 1.074l-2.141 4.211a.74.74 0 1 1-1.319-.67L9.31 8.79H6.256a.74.74 0 0 1-.66-1.075l2.19-4.31a.74.74 0 0 1 1.319.67L7.461 7.31z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenField is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M5.27 12V4h5.46v1.57H7.203v1.641h3.18v1.574h-3.18V12z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenFile is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M9.867 2.667H4a.667.667 0 0 0-.667.666v9.334c0 .368.299.666.667.666h8a.667.667 0 0 0 .667-.666V5.619a.669.669 0 0 0-.183-.459l-2.133-2.285a.668.668 0 0 0-.484-.208m1.466 4V12H4.667V4h4v2.333c0 .184.149.334.333.334h2.333z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenFunction is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M11.266 4.15V5.63a2.41 2.41 0 0 0-.859-.145c-.692 0-1.065.346-1.177 1.043l-.11.625h1.828v1.44H8.921l-.204 1.115C8.455 11.325 7.517 12 5.9 12c-.469 0-.882-.061-1.166-.167v-1.495c.273.117.591.178.903.178.659 0 1.01-.29 1.127-1.015l.157-.91H5.247V7.152h1.837l.188-.842C7.534 4.714 8.432 4 10.19 4c.39 0 .853.067 1.076.15z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenInterface is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8.967 10.653h1.727V12H5.306v-1.347h1.727V5.347H5.306V4h5.388v1.347H8.967v5.306z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenKey is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12.667 6.542A3.208 3.208 0 0 1 8.86 9.694l-.438.492a.437.437 0 0 1-.327.147h-.678v.73a.437.437 0 0 1-.438.437H6.25v.73a.437.437 0 0 1-.438.437H3.772a.437.437 0 0 1-.438-.438v-1.423c0-.116.046-.227.128-.31l2.95-2.949a3.208 3.208 0 0 1 3.047-4.214 3.202 3.202 0 0 1 3.209 3.209zm-3.209-.875a.875.875 0 1 0 1.75 0 .875.875 0 0 0-1.75 0z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenMethod is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M3.333 11.027V5.05h2.059v1.136h.063c.25-.747.891-1.214 1.728-1.214.848 0 1.524.483 1.65 1.214h.063c.204-.731.927-1.214 1.822-1.214 1.155 0 1.949.798 1.949 2.023v4.03h-2.169V7.542c0-.521-.29-.84-.738-.84s-.723.319-.723.84v3.486H6.963V7.54c0-.521-.29-.84-.739-.84-.447 0-.722.319-.722.84v3.486H3.333z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenNull is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M5.002 12.412l-.962.962a1 1 0 0 1-1.414-1.414l.962-.962a5.333 5.333 0 0 1 7.41-7.41l.962-.962a1 1 0 1 1 1.414 1.414l-.962.962a5.333 5.333 0 0 1-7.41 7.41zm.966-.966a4 4 0 0 0 5.478-5.478l-5.478 5.478zm-1.414-1.414l5.478-5.478a4 4 0 0 0-5.478 5.478z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenNumber is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7.8 9.812h-.842l-.78 2.335H5.031l.78-2.335H4.6l.182-1.043h1.373l.507-1.504H5.454l.188-1.042h1.367l.792-2.37H8.94l-.792 2.37h.849l.792-2.37h1.145l-.792 2.37H11.4l-.182 1.042H9.8L9.293 8.77h1.248l-.183 1.043H8.946l-.775 2.335H7.026L7.8 9.812zm-.5-1.043h.842l.513-1.504h-.849L7.3 8.77z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenObject is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M6.63 12c-1.294 0-2.383-.105-2.383-1.802V9.6c0-.638-.247-.914-.98-.914v-1.37c.733 0 .98-.28.98-.915v-.6C4.247 4.105 5.336 4 6.631 4v1.14c-.759 0-.886.272-.886.843v.813c0 .479-.225.936-1.212 1.133v.142c.987.197 1.212.654 1.212 1.133v.813c0 .57.127.844.886.844V12zm2.266-8c1.295 0 2.384.105 2.384 1.802V6.4c0 .638.247.914.98.914v1.37c-.733 0-.98.28-.98.915v.6C11.28 11.895 10.19 12 8.896 12v-1.14c.759 0 .886-.272.886-.843v-.813c0-.479.225-.936 1.212-1.133V7.93c-.987-.197-1.212-.654-1.212-1.133v-.813c0-.57-.127-.844-.886-.844V4z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenOperator is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M2.667 8.002c0-1.5.394-2.743 1.248-3.822h1.437c-.652.8-1.14 2.388-1.14 3.822 0 1.43.488 3.018 1.14 3.818H3.915c-.854-1.08-1.248-2.322-1.248-3.818zM6.77 9.998l-.818-.803 1.23-1.197-1.23-1.203.83-.793 1.221 1.193L9.23 6.002l.818.793-1.227 1.2 1.227 1.2-.818.803L8 8.795 6.77 9.998zm6.563-2c0 1.5-.394 2.743-1.248 3.822h-1.437c.652-.8 1.14-2.388 1.14-3.822 0-1.43-.488-3.018-1.14-3.818h1.437c.854 1.08 1.248 2.322 1.248 3.818z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenPackage is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8.049 3.785l3.852 1.006-4.049 1.103L4 4.791l3.951-1.006a.19.19 0 0 1 .098 0zm.073 2.654l4.545-1.306v5.45l-.131.184-4.414 1.455V6.439zm-4.789 4.145V5.188L7.498 6.41v5.81l-4.034-1.453-.13-.183z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenParameter is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4.889 12V4h3.304c1.797 0 2.922 1.117 2.918 2.77.004 1.652-1.144 2.746-2.976 2.746H6.822V12H4.89zm1.933-4.008h.953c.868 0 1.336-.472 1.332-1.222.004-.73-.464-1.211-1.332-1.211h-.953v2.433z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenProperty is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4.889 12V4h3.304c1.797 0 2.922 1.117 2.918 2.77.004 1.652-1.144 2.746-2.976 2.746H6.822V12H4.89zm1.933-4.008h.953c.868 0 1.336-.472 1.332-1.222.004-.73-.464-1.211-1.332-1.211h-.953v2.433z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenRepo is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8.533 9.067c-1.792 0-2.378.72-2.57 1.194a1.601 1.601 0 1 1-1.163-.037V5.776a1.595 1.595 0 0 1-1.067-1.51c0-.885.715-1.6 1.6-1.6.886 0 1.6.715 1.6 1.6 0 .7-.442 1.291-1.066 1.51v2.821C6.336 8.251 7.019 8 8 8c1.424 0 1.899-.715 2.053-1.19a1.603 1.603 0 0 1-.986-1.477c0-.885.714-1.6 1.6-1.6.885 0 1.6.715 1.6 1.6a1.59 1.59 0 0 1-1.115 1.526c-.139.762-.656 2.208-2.619 2.208zm-3.2 2.133a.535.535 0 0 0-.533.533c0 .294.24.534.533.534a.535.535 0 0 0 0-1.067zm0-7.467a.535.535 0 0 0-.533.534c0 .293.24.533.533.533.294 0 .534-.24.534-.533a.535.535 0 0 0-.534-.534zM10.667 4.8a.535.535 0 0 0-.534.533.535.535 0 0 0 1.067 0 .535.535 0 0 0-.533-.533z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenString is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M9.147 4.297l-.255 1.455h.936l-.222 1.266h-.935l-.455 2.688c-.025.184-.013.323.036.417.048.093.17.144.365.151.075.004.23-.005.465-.027l-.13 1.32c-.3.097-.618.142-.957.135-.552-.007-.965-.17-1.239-.487-.274-.317-.386-.748-.335-1.293l.476-2.904h-.725l.216-1.266h.725l.254-1.455h1.78z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenStruct is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4.336 4.667h2.667v2.666H4.336V4.667zm0 4h2.667v2.666H4.336V8.667zm4-4h2.667v2.666H8.336V4.667zm0 4h2.667v2.666H8.336V8.667zM3.003 3.333v9.334h9.333V3.333H3.003zm0-1.333h9.333c.737 0 1.334.597 1.334 1.333v9.334c0 .736-.597 1.333-1.334 1.333H3.003a1.333 1.333 0 0 1-1.333-1.333V3.333C1.67 2.597 2.267 2 3.003 2z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenSymbol is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8.316 14a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-1.333a4.667 4.667 0 1 0 0-9.334 4.667 4.667 0 0 0 0 9.334zm2.19-5.72h1.143c.019 1.448-.793 2.338-1.922 2.338-.632 0-1.194-.267-1.706-.811-.36-.397-.636-.576-1-.576-.517 0-.849.355-.885 1.083H4.983c.014-1.47.858-2.314 1.95-2.314.595 0 1.125.249 1.678.802.392.382.641.595 1.038.595.484 0 .857-.323.857-1.116z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenVariable is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+  focusable="false"
+  height="16"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M6.649 4.667l1.326 4.7h.05l1.326-4.7h1.982l-2.134 6.666H6.801L4.667 4.667z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type trash is rendered 1`] = `
 <svg
   class="euiIcon euiIcon--medium"
diff --git a/src/components/icon/assets/tokens/tokenAnnotation.svg b/src/components/icon/assets/tokens/tokenAnnotation.svg
new file mode 100644
index 00000000000..41fd12a8206
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenAnnotation.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8.1501779,3.39205801 C10.9470554,3.39205801 12.673523,5.03565515 12.6666171,7.6806035 C12.673523,9.4968474 11.9587654,10.5741632 10.4567386,10.6846571 C9.54861665,10.7606217 9.37596989,10.3980635 9.30000531,9.95954071 L9.25857009,9.95954071 C9.09628214,10.3807988 8.29520118,10.691563 7.51483783,10.6432219 C6.4616926,10.5776161 5.43271792,9.80070569 5.42581205,8.07078517 C5.43271792,6.35122345 6.49622195,5.62956 7.38362629,5.48453673 C8.18816019,5.34987225 8.98233528,5.64337174 9.10664095,5.94723004 L9.15843497,5.94723004 L9.15843497,5.5605013 L10.3531505,5.5605013 L10.3531505,9.01343647 C10.3600564,9.31384183 10.4809091,9.4381475 10.6570088,9.4381475 C11.0575493,9.4381475 11.3337841,8.85460146 11.3303312,7.57701544 C11.3337841,5.20139604 9.62458122,4.66273815 8.14327203,4.66273815 C5.80218198,4.66273815 4.72831914,6.18548257 4.72141327,8.05006756 C4.72831914,10.1770756 5.94029939,11.326903 8.15363084,11.326903 C8.96161767,11.326903 9.75233982,11.1508033 10.1597862,10.9781566 L10.5534208,12.1003605 C10.118351,12.3696895 9.13426443,12.607942 8.06040159,12.607942 C5.08051853,12.607942 3.33678627,10.9470802 3.33333333,8.11222039 C3.33678627,5.30843703 5.08051853,3.39205801 8.1501779,3.39205801 Z M7.9637194,6.78974622 C7.20407366,6.78974622 6.77936264,7.2489866 6.7759097,8.02934995 C6.77936264,8.71303111 7.07631506,9.36218293 7.97753114,9.36218293 C8.79932971,9.36218293 9.07211159,8.88913081 9.05484692,8.01899114 C9.05139398,7.30078063 8.85112374,6.78974622 7.9637194,6.78974622 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenArray.svg b/src/components/icon/assets/tokens/tokenArray.svg
new file mode 100644
index 00000000000..9ec65f32a39
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenArray.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.39165876,12 L4.39165876,4 L7.1048678,4 L7.1048678,5.13923046 L5.89582377,5.13923046 L5.89582377,10.8607695 L7.1048678,10.8607695 L7.1048678,12 L4.39165876,12 Z M12.0838499,4 L12.0838499,12 L9.37064081,12 L9.37064081,10.8607695 L10.5796848,10.8607695 L10.5796848,5.13923046 L9.37064081,5.13923046 L9.37064081,4 L12.0838499,4 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenBoolean.svg b/src/components/icon/assets/tokens/tokenBoolean.svg
new file mode 100644
index 00000000000..538209f0346
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenBoolean.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M4.93587061,11.0641294 L11.0641294,4.93587061 C10.2799503,4.15169152 9.19661696,3.66666667 8,3.66666667 C5.60676608,3.66666667 3.66666667,5.60676608 3.66666667,8 C3.66666667,9.19661696 4.15169152,10.2799503 4.93587061,11.0641294 Z M8,13 C5.23857625,13 3,10.7614237 3,8 C3,5.23857625 5.23857625,3 8,3 C10.7614237,3 13,5.23857625 13,8 C13,10.7614237 10.7614237,13 8,13 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenClass.svg b/src/components/icon/assets/tokens/tokenClass.svg
new file mode 100644
index 00000000000..a488b9c362b
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenClass.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M11.3333333,7.02661597 L9.375,7.02661597 C9.31944444,6.31939163 8.89583333,5.84030418 8.15277778,5.84030418 C7.18055556,5.84030418 6.65277778,6.64638783 6.65277778,8 C6.65277778,9.42965779 7.19791667,10.1596958 8.13888889,10.1596958 C8.84722222,10.1596958 9.27777778,9.74524715 9.375,9.07984791 L11.3333333,9.09505703 C11.2361111,10.418251 10.1805556,12 8.09722222,12 C6.13888889,12 4.66666667,10.5893536 4.66666667,8 C4.66666667,5.39923954 6.18055556,4 8.09722222,4 C9.88888889,4 11.1805556,5.09505703 11.3333333,7.02661597 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenConstant.svg b/src/components/icon/assets/tokens/tokenConstant.svg
new file mode 100644
index 00000000000..382a2722dd1
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenConstant.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M9.41421356,3.75735931 L12.2426407,6.58578644 C13.0236893,7.36683502 13.0236893,8.63316498 12.2426407,9.41421356 L9.41421356,12.2426407 C8.63316498,13.0236893 7.36683502,13.0236893 6.58578644,12.2426407 L3.75735931,9.41421356 C2.97631073,8.63316498 2.97631073,7.36683502 3.75735931,6.58578644 L6.58578644,3.75735931 C7.36683502,2.97631073 8.63316498,2.97631073 9.41421356,3.75735931 Z M7.66666667,6.66666667 C7.11438192,6.66666667 6.66666667,7.11438192 6.66666667,7.66666667 L6.66666667,8.33333333 C6.66666667,8.88561808 7.11438192,9.33333333 7.66666667,9.33333333 L8.33333333,9.33333333 C8.88561808,9.33333333 9.33333333,8.88561808 9.33333333,8.33333333 L9.33333333,7.66666667 C9.33333333,7.11438192 8.88561808,6.66666667 8.33333333,6.66666667 L7.66666667,6.66666667 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenElement.svg b/src/components/icon/assets/tokens/tokenElement.svg
new file mode 100644
index 00000000000..c3ee750e392
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenElement.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M7.38915229,9.73621027 L6.3489069,10.6765033 L3.25778627,8 L6.3489069,5.32349675 L7.38915229,6.26378973 L5.35678675,7.98519224 L5.35678675,8.01480776 L7.38915229,9.73621027 Z M10.1666656,10.6765033 L9.12642026,9.73621027 L11.1587858,8.01480776 L11.1587858,7.98519224 L9.12642026,6.26378973 L10.1666656,5.32349675 L13.2577863,8 L10.1666656,10.6765033 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenEnum.svg b/src/components/icon/assets/tokens/tokenEnum.svg
new file mode 100644
index 00000000000..a7fc4f33ddf
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenEnum.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <polygon fill-rule="evenodd" points="5.211 12 5.211 4 10.789 4 10.789 5.57 7.145 5.57 7.145 7.211 10.504 7.211 10.504 8.785 7.145 8.785 7.145 10.43 10.789 10.43 10.789 12"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenEnumMember.svg b/src/components/icon/assets/tokens/tokenEnumMember.svg
new file mode 100644
index 00000000000..97e8942ab4e
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenEnumMember.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M7.68176234,12 L7.68176234,9.24747942 L8.70508373,8.38573045 C8.91630765,8.20785672 8.94334332,7.89243074 8.76546958,7.68120682 C8.7461966,7.65832027 8.72490818,7.63720989 8.70186059,7.61812978 L7.68176234,6.77363431 L7.68176234,4 L13.2598873,4 L13.2598873,5.5703125 L9.61535609,5.5703125 L9.61535609,7.2109375 L12.9747311,7.2109375 L12.9747311,8.78515625 L9.61535609,8.78515625 L9.61535609,10.4296875 L13.2598873,10.4296875 L13.2598873,12 L7.68176234,12 Z M8.42482555,7.89706037 C8.48615794,7.9474596 8.48615794,8.05225799 8.42482555,8.10292388 L6.15819361,9.96982861 C6.11846089,10.0023614 6.06326173,10.0092947 6.01659578,9.98716167 C5.96966317,9.96502868 5.94006362,9.91809607 5.94006362,9.86663019 L5.94006362,8.93331116 L2.87344395,8.93331116 C2.79984508,8.93331116 2.74011266,8.87357874 2.74011266,8.79997987 L2.74011266,7.20000438 C2.74011266,7.12640551 2.79984508,7.06667309 2.87344395,7.06667309 L5.94006362,7.06667309 L5.94006362,6.13335406 C5.94006362,6.08188819 5.96966317,6.03495557 6.01659578,6.01282258 C6.06326173,5.99068958 6.11846089,5.99762281 6.15819361,6.03042231 L8.42482555,7.89706037 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenEvent.svg b/src/components/icon/assets/tokens/tokenEvent.svg
new file mode 100644
index 00000000000..cced9f3e640
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenEvent.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M11.2246696,5.65638767 C11.2246696,6.07929727 11.1189438,6.44640079 10.907489,6.75770925 C10.6960342,7.06901771 10.3964777,7.32745859 10.0088106,7.53303965 C9.62114344,7.7386207 9.15712458,7.90014626 8.61674009,8.01762115 C8.07635559,8.13509604 7.47724264,8.21145357 6.81938326,8.24669604 C6.80763577,8.36417093 6.79882529,8.4757704 6.79295154,8.5814978 C6.7870778,8.6872252 6.78414097,8.79882467 6.78414097,8.91629956 C6.78414097,9.17474432 6.80469877,9.42731154 6.84581498,9.67400881 C6.88693119,9.92070608 6.96035189,10.1380314 7.0660793,10.3259912 C7.1718067,10.513951 7.31571128,10.6666661 7.49779736,10.784141 C7.67988344,10.9016159 7.91189286,10.9603524 8.1938326,10.9603524 C8.4052874,10.9603524 8.66079145,10.9163 8.96035242,10.8281938 C9.25991339,10.7400877 9.58002767,10.5844358 9.92070485,10.3612335 C10.0264322,10.2907485 10.1116003,10.232012 10.1762115,10.185022 C10.2408226,10.1380321 10.3142433,10.1145374 10.3964758,10.1145374 C10.5139507,10.1145374 10.593245,10.1762108 10.6343612,10.2995595 C10.6754774,10.4229081 10.6960352,10.5080761 10.6960352,10.5550661 C10.5433179,10.6960359 10.3524241,10.8516878 10.123348,11.0220264 C9.89427198,11.192365 9.6358311,11.3480169 9.34801762,11.4889868 C9.06020414,11.6299567 8.74890035,11.7503666 8.41409692,11.8502203 C8.07929348,11.9500739 7.73568458,12 7.38325991,12 C6.84287542,12 6.40235119,11.9118952 6.06167401,11.7356828 C5.72099683,11.5594705 5.45668229,11.3303979 5.26872247,11.0484581 C5.08076264,10.7665184 4.9515422,10.4552146 4.88105727,10.1145374 C4.81057233,9.77386026 4.7753304,9.43906185 4.7753304,9.11013216 C4.7753304,8.47576775 4.87811938,7.85316018 5.08370044,7.24229075 C5.2892815,6.63142132 5.58296432,6.08517128 5.96475771,5.60352423 C6.3465511,5.12187718 6.80175947,4.73421586 7.33039648,4.44052863 C7.85903348,4.14684141 8.44639912,4 9.09251101,4 C9.69163295,4 10.1967674,4.12628361 10.6079295,4.37885463 C11.0190916,4.63142564 11.2246696,5.05726573 11.2246696,5.65638767 Z M8.75770925,4.70484581 C8.53450696,4.70484581 8.32305533,4.78414018 8.12334802,4.94273128 C7.9236407,5.10132238 7.74155736,5.31571084 7.57709251,5.58590308 C7.41262767,5.85609533 7.27165991,6.16446229 7.15418502,6.51101322 C7.03671013,6.85756414 6.94860529,7.22466767 6.88986784,7.6123348 C7.3597674,7.56534485 7.75330238,7.47724 8.07048458,7.34801762 C8.38766678,7.21879524 8.64023401,7.06314335 8.82819383,6.88105727 C9.01615366,6.69897119 9.15124775,6.49339322 9.23348018,6.26431718 C9.3157126,6.03524115 9.35682819,5.79735806 9.35682819,5.55066079 C9.35682819,5.28046855 9.30102846,5.07195374 9.18942731,4.92511013 C9.07782617,4.77826652 8.93392159,4.70484581 8.75770925,4.70484581 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenException.svg b/src/components/icon/assets/tokens/tokenException.svg
new file mode 100644
index 00000000000..9f9c76907a6
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenException.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M7.46114178,7.30932709 L10.5159169,7.30932709 C11.0678757,7.30932709 11.4253673,7.89202095 11.1752942,8.38407985 L9.03499176,12.5954682 C8.84991711,12.9596323 8.40467116,13.1048129 8.0405071,12.9197383 C7.67634304,12.7346636 7.53116238,12.2894177 7.71623704,11.9252536 L9.31033103,8.78861801 L6.25555595,8.78861801 C5.70359716,8.78861801 5.3461055,8.20592415 5.59617859,7.71386525 L7.78625849,3.40453179 C7.97133315,3.04036773 8.4165791,2.89518708 8.78074316,3.08026173 C9.14490722,3.26533638 9.29008787,3.71058233 9.10501322,4.07474639 L7.46114178,7.30932709 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenField.svg b/src/components/icon/assets/tokens/tokenField.svg
new file mode 100644
index 00000000000..0ed4b5ae1c6
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenField.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <polygon fill-rule="evenodd" points="5.27 12 5.27 4 10.73 4 10.73 5.57 7.203 5.57 7.203 7.211 10.383 7.211 10.383 8.785 7.203 8.785 7.203 12"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenFile.svg b/src/components/icon/assets/tokens/tokenFile.svg
new file mode 100644
index 00000000000..5d47c04a206
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenFile.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M9.86666667,2.66666667 L4,2.66666667 C3.632,2.66666667 3.33333333,2.96533333 3.33333333,3.33333333 L3.33333333,12.6666667 C3.33333333,13.0346667 3.632,13.3333333 4,13.3333333 L12,13.3333333 C12.368,13.3333333 12.6666667,13.0346667 12.6666667,12.6666667 L12.6666667,5.61933333 C12.6666667,5.44866667 12.6013333,5.284 12.484,5.16 L10.3506667,2.87466667 C10.2246667,2.742 10.0493333,2.66666667 9.86666667,2.66666667 M11.3333333,6.66666667 L11.3333333,12 L4.66666667,12 L4.66666667,4 L8.66666667,4 L8.66666667,6.33333333 C8.66666667,6.51733333 8.816,6.66666667 9,6.66666667 L11.3333333,6.66666667 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenFunction.svg b/src/components/icon/assets/tokens/tokenFunction.svg
new file mode 100644
index 00000000000..0d6fff2ec43
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenFunction.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M11.2663877,4.15062762 L11.2663877,5.62900976 C11.0320781,5.53417015 10.7140865,5.48396095 10.4072524,5.48396095 C9.71548117,5.48396095 9.34170153,5.82984658 9.23012552,6.52719665 L9.12053158,7.15231298 L10.9483961,7.15231298 L10.9483961,8.59113381 L8.92132866,8.59113381 L8.71687587,9.70711297 C8.45467225,11.3249651 7.51743375,12 5.89958159,12 C5.43096234,12 5.0181311,11.9386332 4.73361227,11.832636 L4.73361227,10.3375174 C5.0069735,10.4546722 5.32496513,10.5160391 5.63737796,10.5160391 C6.29567643,10.5160391 6.64714086,10.2259414 6.76429568,9.50069735 L6.92134332,8.59113381 L5.24686192,8.59113381 L5.24686192,7.15231298 L7.08384534,7.15231298 L7.27196653,6.30962343 C7.53417015,4.71408647 8.43235704,4 10.1896792,4 C10.5801953,4 11.0432357,4.06694561 11.2663877,4.15062762 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenInterface.svg b/src/components/icon/assets/tokens/tokenInterface.svg
new file mode 100644
index 00000000000..63c6fd04a3b
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenInterface.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8.96679687,10.6530599 L10.6938801,10.6530599 L10.6938801,12 L5.30611988,12 L5.30611988,10.6530599 L7.03320312,10.6530599 L7.03320312,5.34694006 L5.30611988,5.34694006 L5.30611988,4 L10.6938801,4 L10.6938801,5.34694006 L8.96679687,5.34694006 L8.96679687,10.6530599 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenKey.svg b/src/components/icon/assets/tokens/tokenKey.svg
new file mode 100644
index 00000000000..5350085bf1e
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenKey.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M12.6666667,6.5416849 C12.6666667,8.31359635 11.2302448,9.75 9.45833333,9.75 C9.25380208,9.75 9.05382812,9.73064062 8.85992448,9.69405469 L8.42220573,10.1864974 C8.33918226,10.2798995 8.22017834,10.3333378 8.09521094,10.3333333 L7.41666667,10.3333333 L7.41666667,11.0625 C7.41666667,11.3041276 7.22079427,11.5 6.97916667,11.5 L6.25,11.5 L6.25,12.2291667 C6.25,12.4707943 6.0541276,12.6666667 5.8125,12.6666667 L3.77083333,12.6666667 C3.52920573,12.6666667 3.33333333,12.4707943 3.33333333,12.2291667 L3.33333333,10.8062161 C3.33333333,10.6901875 3.3794349,10.5788984 3.46146615,10.496849 L6.41098177,7.54733333 C6.30665625,7.23098437 6.25,6.89296094 6.25,6.54166667 C6.25,4.76975521 7.68640365,3.33335156 9.4583151,3.33333333 C11.2354583,3.3333151 12.6666667,4.76452344 12.6666667,6.5416849 Z M9.45833333,5.66666667 C9.45833333,6.14992187 9.85007812,6.54166667 10.3333333,6.54166667 C10.8165885,6.54166667 11.2083333,6.14992187 11.2083333,5.66666667 C11.2083333,5.18341146 10.8165885,4.79166667 10.3333333,4.79166667 C9.85007812,4.79166667 9.45833333,5.18341146 9.45833333,5.66666667 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenMethod.svg b/src/components/icon/assets/tokens/tokenMethod.svg
new file mode 100644
index 00000000000..b5b725d0d64
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenMethod.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M3.33333333,11.0269204 L3.33333333,5.05089245 L5.39169473,5.05089245 L5.39169473,6.18696027 L5.45454545,6.18696027 C5.70594837,5.43995677 6.34624018,4.97307959 7.18294052,4.97307959 C8.03142536,4.97307959 8.70707071,5.45551935 8.83277217,6.18696027 L8.8956229,6.18696027 C9.09988777,5.45551935 9.82267116,4.97307959 10.7182941,4.97307959 C11.8731762,4.97307959 12.6666667,5.77066145 12.6666667,6.99621405 L12.6666667,11.0269204 L10.4983165,11.0269204 L10.4983165,7.5409041 C10.4983165,7.01955791 10.2076319,6.70052517 9.75982043,6.70052517 C9.31200898,6.70052517 9.03703704,7.01955791 9.03703704,7.5409041 L9.03703704,11.0269204 L6.96296296,11.0269204 L6.96296296,7.5409041 C6.96296296,7.01955791 6.67227834,6.70052517 6.22446689,6.70052517 C5.77665544,6.70052517 5.5016835,7.01955791 5.5016835,7.5409041 L5.5016835,11.0269204 L3.33333333,11.0269204 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenNull.svg b/src/components/icon/assets/tokens/tokenNull.svg
new file mode 100644
index 00000000000..eb226b2cdf1
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenNull.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M5.00237936,12.4118342 L4.04044011,13.3737734 C3.64991582,13.7642977 3.01675084,13.7642977 2.62622655,13.3737734 C2.23570226,12.9832492 2.23570226,12.3500842 2.62622655,11.9595599 L3.5881658,10.9976206 C3.00660086,10.1433453 2.66666667,9.11137058 2.66666667,8 C2.66666667,5.05448133 5.05448133,2.66666667 8,2.66666667 C9.11137058,2.66666667 10.1433453,3.00660086 10.9976206,3.5881658 L11.9595599,2.62622655 C12.3500842,2.23570226 12.9832492,2.23570226 13.3737734,2.62622655 C13.7642977,3.01675084 13.7642977,3.64991582 13.3737734,4.04044011 L12.4118342,5.00237936 C12.9933991,5.85665473 13.3333333,6.88862942 13.3333333,8 C13.3333333,10.9455187 10.9455187,13.3333333 8,13.3333333 C6.88862942,13.3333333 5.85665473,12.9933991 5.00237936,12.4118342 Z M5.96803265,11.4461809 C6.56354591,11.7980706 7.25819138,12 8,12 C10.209139,12 12,10.209139 12,8 C12,7.25819138 11.7980706,6.56354591 11.4461809,5.96803265 L5.96803265,11.4461809 Z M4.55381909,10.0319673 L10.0319673,4.55381909 C9.43645409,4.20192939 8.74180862,4 8,4 C5.790861,4 4,5.790861 4,8 C4,8.74180862 4.20192939,9.43645409 4.55381909,10.0319673 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenNumber.svg b/src/components/icon/assets/tokens/tokenNumber.svg
new file mode 100644
index 00000000000..8390c89062f
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenNumber.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M7.80061849,9.81152344 L6.95751953,9.81152344 L6.17708333,12.1471354 L5.0320638,12.1471354 L5.8125,9.81152344 L4.59912109,9.81152344 L4.78141276,8.76904297 L6.15429688,8.76904297 L6.66129557,7.26513672 L5.45361328,7.26513672 L5.64160156,6.22265625 L7.00878906,6.22265625 L7.80061849,3.85286458 L8.93994141,3.85286458 L8.14811198,6.22265625 L8.99690755,6.22265625 L9.78873698,3.85286458 L10.9337565,3.85286458 L10.1419271,6.22265625 L11.4008789,6.22265625 L11.2185872,7.26513672 L9.80013021,7.26513672 L9.29313151,8.76904297 L10.5406901,8.76904297 L10.3583984,9.81152344 L8.94563802,9.81152344 L8.17089844,12.1471354 L7.02587891,12.1471354 L7.80061849,9.81152344 Z M7.29931641,8.76904297 L8.14241536,8.76904297 L8.65511068,7.26513672 L7.8063151,7.26513672 L7.29931641,8.76904297 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenObject.svg b/src/components/icon/assets/tokens/tokenObject.svg
new file mode 100644
index 00000000000..6bb97bdab86
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenObject.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6.63056057,12 C5.33583626,12 4.2473793,11.8952797 4.2473793,10.1975407 L4.2473793,9.600952 C4.2473793,8.96310988 3.99985847,8.68702896 3.26681603,8.68702896 L3.26681603,7.31614439 C3.99985847,7.31614439 4.2473793,7.03689012 4.2473793,6.40222134 L4.2473793,5.80245934 C4.2473793,4.10472035 5.33583626,4 6.63056057,4 L6.63056057,5.13923046 C5.87213138,5.13923046 5.74519762,5.41213804 5.74519762,5.98333994 L5.74519762,6.79571599 C5.74519762,7.27489092 5.5198902,7.73185244 4.53298025,7.92859976 L4.53298025,8.07140024 C5.5198902,8.26814756 5.74519762,8.72510908 5.74519762,9.20428401 L5.74519762,10.0166601 C5.74519762,10.587862 5.87213138,10.8607695 6.63056057,10.8607695 L6.63056057,12 Z M8.89633358,4 C10.1910579,4 11.2795149,4.10472035 11.2795149,5.80245934 L11.2795149,6.399048 C11.2795149,7.03689012 11.5270357,7.31297104 12.2600781,7.31297104 L12.2600781,8.68385561 C11.5270357,8.68385561 11.2795149,8.96310988 11.2795149,9.59777866 L11.2795149,10.1975407 C11.2795149,11.8952797 10.1910579,12 8.89633358,12 L8.89633358,10.8607695 C9.65476277,10.8607695 9.78169653,10.587862 9.78169653,10.0166601 L9.78169653,9.20428401 C9.78169653,8.72510908 10.0070039,8.26814756 10.9939139,8.07140024 L10.9939139,7.92859976 C10.0070039,7.73185244 9.78169653,7.27489092 9.78169653,6.79571599 L9.78169653,5.98333994 C9.78169653,5.41213804 9.65476277,5.13923046 8.89633358,5.13923046 L8.89633358,4 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenOperator.svg b/src/components/icon/assets/tokens/tokenOperator.svg
new file mode 100644
index 00000000000..bf735fbd9e0
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenOperator.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2.66666667,8.00151515 C2.66666667,6.5015163 3.06060576,5.25909301 3.91515056,4.18030596 L5.35151309,4.18030596 C4.69999844,4.98030534 4.21212003,6.56818292 4.21212003,8.00151515 C4.21212003,9.43181708 4.69999844,11.0196947 5.35151309,11.819694 L3.91515056,11.819694 C3.06060576,10.740907 2.66666667,9.4984837 2.66666667,8.00151515 Z M6.76969728,9.99848332 L5.95151609,9.19545363 L7.18181818,7.99848485 L5.95151609,6.79545547 L6.78181849,6.00151668 L8.00302967,7.19545516 L9.23030146,6.00151668 L10.0484826,6.79545547 L8.82121086,7.99545455 L10.0484826,9.19545363 L9.23030146,9.99848332 L7.99999937,8.79545394 L6.76969728,9.99848332 Z M13.3333333,7.99848485 C13.3333333,9.4984837 12.9393942,10.740907 12.0848494,11.819694 L10.6484869,11.819694 C11.3000016,11.0196947 11.78788,9.43181708 11.78788,7.99848485 C11.78788,6.56818292 11.3000016,4.98030534 10.6484869,4.18030596 L12.0848494,4.18030596 C12.9393942,5.25909301 13.3333333,6.5015163 13.3333333,7.99848485 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenPackage.svg b/src/components/icon/assets/tokens/tokenPackage.svg
new file mode 100644
index 00000000000..ba5fbe90b10
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenPackage.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8.049,3.78459082 L11.9014677,4.79136297 L7.8522598,5.89438837 L4,4.79136297 L7.951,3.78459082 C7.98288889,3.77603527 8.01672222,3.77603527 8.049,3.78459082 Z M8.12166595,6.43935385 L12.6666667,5.13325749 L12.6666667,10.5839242 L12.536,10.7674797 L8.12166595,12.2218258 L8.12166595,6.43935385 Z M3.33333333,10.5839242 L3.33333333,5.18770194 L7.49752755,6.40986103 L7.49752755,12.2192797 L3.464,10.7674797 L3.33333333,10.5839242 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenParameter.svg b/src/components/icon/assets/tokens/tokenParameter.svg
new file mode 100644
index 00000000000..899cb8f819f
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenParameter.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.88866681,12 L4.88866681,4 L8.19335431,4 C9.99022931,4 11.1152293,5.1171875 11.1113231,6.76953125 C11.1152293,8.421875 9.96679181,9.515625 8.13476056,9.515625 L6.82226056,9.515625 L6.82226056,12 L4.88866681,12 Z M6.82226056,7.9921875 L7.77538556,7.9921875 C8.64257306,7.9921875 9.11132306,7.51953125 9.10741681,6.76953125 C9.11132306,6.0390625 8.64257306,5.55859375 7.77538556,5.55859375 L6.82226056,5.55859375 L6.82226056,7.9921875 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenProperty.svg b/src/components/icon/assets/tokens/tokenProperty.svg
new file mode 100644
index 00000000000..899cb8f819f
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenProperty.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.88866681,12 L4.88866681,4 L8.19335431,4 C9.99022931,4 11.1152293,5.1171875 11.1113231,6.76953125 C11.1152293,8.421875 9.96679181,9.515625 8.13476056,9.515625 L6.82226056,9.515625 L6.82226056,12 L4.88866681,12 Z M6.82226056,7.9921875 L7.77538556,7.9921875 C8.64257306,7.9921875 9.11132306,7.51953125 9.10741681,6.76953125 C9.11132306,6.0390625 8.64257306,5.55859375 7.77538556,5.55859375 L6.82226056,5.55859375 L6.82226056,7.9921875 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenRepo.svg b/src/components/icon/assets/tokens/tokenRepo.svg
new file mode 100644
index 00000000000..1c099a26f73
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenRepo.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8.53333333,9.06666667 C6.74133333,9.06666667 6.15466667,9.78666667 5.96266667,10.2613333 C6.53333333,10.5066667 6.93333333,11.072 6.93333333,11.7333333 C6.93333333,12.6186667 6.21866667,13.3333333 5.33333333,13.3333333 C4.448,13.3333333 3.73333333,12.6186667 3.73333333,11.7333333 C3.73333333,11.0346667 4.176,10.4426667 4.8,10.224 L4.8,5.776 C4.176,5.55733333 3.73333333,4.96533333 3.73333333,4.26666667 C3.73333333,3.38133333 4.448,2.66666667 5.33333333,2.66666667 C6.21866667,2.66666667 6.93333333,3.38133333 6.93333333,4.26666667 C6.93333333,4.96533333 6.49066667,5.55733333 5.86666667,5.776 L5.86666667,8.59733333 C6.336,8.25066667 7.01866667,8 8,8 C9.424,8 9.89866667,7.28533333 10.0533333,6.81066667 C9.47733333,6.57066667 9.06666667,6 9.06666667,5.33333333 C9.06666667,4.448 9.78133333,3.73333333 10.6666667,3.73333333 C11.552,3.73333333 12.2666667,4.448 12.2666667,5.33333333 C12.2666667,6.048 11.7973333,6.66666667 11.152,6.85866667 C11.0133333,7.62133333 10.496,9.06666667 8.53333333,9.06666667 Z M5.33333333,11.2 C5.04,11.2 4.8,11.44 4.8,11.7333333 C4.8,12.0266667 5.04,12.2666667 5.33333333,12.2666667 C5.62666667,12.2666667 5.86666667,12.0266667 5.86666667,11.7333333 C5.86666667,11.44 5.62666667,11.2 5.33333333,11.2 Z M5.33333333,3.73333333 C5.04,3.73333333 4.8,3.97333333 4.8,4.26666667 C4.8,4.56 5.04,4.8 5.33333333,4.8 C5.62666667,4.8 5.86666667,4.56 5.86666667,4.26666667 C5.86666667,3.97333333 5.62666667,3.73333333 5.33333333,3.73333333 Z M10.6666667,4.8 C10.3733333,4.8 10.1333333,5.04 10.1333333,5.33333333 C10.1333333,5.62666667 10.3733333,5.86666667 10.6666667,5.86666667 C10.96,5.86666667 11.2,5.62666667 11.2,5.33333333 C11.2,5.04 10.96,4.8 10.6666667,4.8 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenString.svg b/src/components/icon/assets/tokens/tokenString.svg
new file mode 100644
index 00000000000..f475016c112
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenString.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M9.14663462,4.29740343 L8.89242788,5.75233131 L9.828125,5.75233131 L9.60637019,7.01795631 L8.67067308,7.01795631 L8.21634615,9.70605727 C8.19110564,9.88995242 8.20282428,10.0287731 8.2515024,10.1225236 C8.30018053,10.2162741 8.42187403,10.2667544 8.61658654,10.2739659 C8.69230807,10.2775717 8.8473546,10.2685574 9.08173077,10.2469227 L8.95192308,11.5666342 C8.65264273,11.6639905 8.33353535,11.7090621 7.99459135,11.7018505 C7.4429059,11.694639 7.03004945,11.532381 6.75600962,11.2150717 C6.48196978,10.8977624 6.37019206,10.4668773 6.42067308,9.92240343 L6.89663462,7.01795631 L6.171875,7.01795631 L6.38822115,5.75233131 L7.11298077,5.75233131 L7.3671875,4.29740343 L9.14663462,4.29740343 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenStruct.svg b/src/components/icon/assets/tokens/tokenStruct.svg
new file mode 100644
index 00000000000..3eae7a65f6f
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenStruct.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.336332,4.66666667 L7.00299867,4.66666667 L7.00299867,7.33333333 L4.336332,7.33333333 L4.336332,4.66666667 Z M4.336332,8.66666667 L7.00299867,8.66666667 L7.00299867,11.3333333 L4.336332,11.3333333 L4.336332,8.66666667 Z M8.336332,4.66666667 L11.0029987,4.66666667 L11.0029987,7.33333333 L8.336332,7.33333333 L8.336332,4.66666667 Z M8.336332,8.66666667 L11.0029987,8.66666667 L11.0029987,11.3333333 L8.336332,11.3333333 L8.336332,8.66666667 Z M3.00299867,3.33333333 L3.00299867,12.6666667 L12.336332,12.6666667 L12.336332,3.33333333 L3.00299867,3.33333333 Z M3.00299867,2 L12.336332,2 C13.0727117,2 13.6696653,2.59695367 13.6696653,3.33333333 L13.6696653,12.6666667 C13.6696653,13.4030463 13.0727117,14 12.336332,14 L3.00299867,14 C2.266619,14 1.66966534,13.4030463 1.66966534,12.6666667 L1.66966534,3.33333333 C1.66966534,2.59695367 2.266619,2 3.00299867,2 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenSymbol.svg b/src/components/icon/assets/tokens/tokenSymbol.svg
new file mode 100644
index 00000000000..a0f959a5d5a
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenSymbol.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M8.31637016,14 C5.00266166,14 2.31637016,11.3137085 2.31637016,8 C2.31637016,4.6862915 5.00266166,2 8.31637016,2 C11.6300787,2 14.3163702,4.6862915 14.3163702,8 C14.3163702,11.3137085 11.6300787,14 8.31637016,14 Z M8.31637016,12.6666667 C10.893699,12.6666667 12.9830368,10.5773288 12.9830368,8 C12.9830368,5.42267117 10.893699,3.33333333 8.31637016,3.33333333 C5.73904133,3.33333333 3.64970349,5.42267117 3.64970349,8 C3.64970349,10.5773288 5.73904133,12.6666667 8.31637016,12.6666667 Z M10.5060642,6.94788926 L11.6493954,6.94788926 C11.6678363,8.39549411 10.8564399,9.28526396 9.72693933,9.28526396 C9.09534103,9.28526396 8.53289584,9.01787199 8.02116292,8.47386762 C7.66156681,8.07738986 7.38495442,7.8975918 7.0207481,7.8975918 C6.50440497,7.8975918 6.17247011,8.25257771 6.13558845,8.98099033 L4.98303683,8.98099033 C4.99686745,7.51033446 5.84053524,6.66666667 6.93315418,6.66666667 C7.52787082,6.66666667 8.05804457,6.91561782 8.61126935,7.4688426 C9.0031369,7.85148974 9.25208806,8.06355924 9.64856581,8.06355924 C10.1326375,8.06355924 10.5060642,7.74084478 10.5060642,6.94788926 Z"/>
+</svg>
diff --git a/src/components/icon/assets/tokens/tokenVariable.svg b/src/components/icon/assets/tokens/tokenVariable.svg
new file mode 100644
index 00000000000..9e9a0c62b5d
--- /dev/null
+++ b/src/components/icon/assets/tokens/tokenVariable.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <polygon fill-rule="evenodd" points="6.649 4.667 7.975 9.367 8.025 9.367 9.351 4.667 11.333 4.667 9.199 11.333 6.801 11.333 4.667 4.667"/>
+</svg>
diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js
index a2e3295ef2d..13cd01addf1 100644
--- a/src/components/icon/icon.js
+++ b/src/components/icon/icon.js
@@ -239,6 +239,36 @@ import visualizeApp from './assets/app_visualize.svg';
 import watchesApp from './assets/app_watches.svg';
 import wrench from './assets/wrench.svg';
 
+// Token Icon Imports
+import tokenClass from './assets/tokens/tokenClass.svg';
+import tokenProperty from './assets/tokens/tokenProperty.svg';
+import tokenEnum from './assets/tokens/tokenEnum.svg';
+import tokenVariable from './assets/tokens/tokenVariable.svg';
+import tokenMethod from './assets/tokens/tokenMethod.svg';
+import tokenAnnotation from './assets/tokens/tokenAnnotation.svg';
+import tokenException from './assets/tokens/tokenException.svg';
+import tokenInterface from './assets/tokens/tokenInterface.svg';
+import tokenParameter from './assets/tokens/tokenParameter.svg';
+import tokenField from './assets/tokens/tokenField.svg';
+import tokenElement from './assets/tokens/tokenElement.svg';
+import tokenFunction from './assets/tokens/tokenFunction.svg';
+import tokenBoolean from './assets/tokens/tokenBoolean.svg';
+import tokenString from './assets/tokens/tokenString.svg';
+import tokenArray from './assets/tokens/tokenArray.svg';
+import tokenNumber from './assets/tokens/tokenNumber.svg';
+import tokenConstant from './assets/tokens/tokenConstant.svg';
+import tokenObject from './assets/tokens/tokenObject.svg';
+import tokenEvent from './assets/tokens/tokenEvent.svg';
+import tokenKey from './assets/tokens/tokenKey.svg';
+import tokenNull from './assets/tokens/tokenNull.svg';
+import tokenStruct from './assets/tokens/tokenStruct.svg';
+import tokenPackage from './assets/tokens/tokenPackage.svg';
+import tokenOperator from './assets/tokens/tokenOperator.svg';
+import tokenEnumMember from './assets/tokens/tokenEnumMember.svg';
+import tokenRepo from './assets/tokens/tokenRepo.svg';
+import tokenSymbol from './assets/tokens/tokenSymbol.svg';
+import tokenFile from './assets/tokens/tokenFile.svg';
+
 const typeToIconMap = {
   addDataApp,
   advancedSettingsApp,
@@ -476,6 +506,34 @@ const typeToIconMap = {
   packetbeatApp,
   securityAnalyticsApp,
   sqlApp,
+  tokenClass,
+  tokenProperty,
+  tokenEnum,
+  tokenVariable,
+  tokenMethod,
+  tokenAnnotation,
+  tokenException,
+  tokenInterface,
+  tokenParameter,
+  tokenField,
+  tokenElement,
+  tokenFunction,
+  tokenBoolean,
+  tokenString,
+  tokenArray,
+  tokenNumber,
+  tokenConstant,
+  tokenObject,
+  tokenEvent,
+  tokenKey,
+  tokenNull,
+  tokenStruct,
+  tokenPackage,
+  tokenOperator,
+  tokenEnumMember,
+  tokenRepo,
+  tokenSymbol,
+  tokenFile
 };
 
 export const TYPES = Object.keys(typeToIconMap);
diff --git a/src/components/icon/index.d.ts b/src/components/icon/index.d.ts
index 9079af0f79f..20f0f830324 100644
--- a/src/components/icon/index.d.ts
+++ b/src/components/icon/index.d.ts
@@ -242,6 +242,34 @@ declare module '@elastic/eui' {
     | 'packetbeatApp'
     | 'securityAnalyticsApp'
     | 'sqlApp'
+    | 'tokenClass'
+    | 'tokenProperty'
+    | 'tokenEnum'
+    | 'tokenVariable'
+    | 'tokenMethod'
+    | 'tokenAnnotation'
+    | 'tokenException'
+    | 'tokenInterface'
+    | 'tokenParameter'
+    | 'tokenField'
+    | 'tokenElement'
+    | 'tokenFunction'
+    | 'tokenBoolean'
+    | 'tokenString'
+    | 'tokenArray'
+    | 'tokenNumber'
+    | 'tokenConstant'
+    | 'tokenObject'
+    | 'tokenEvent'
+    | 'tokenKey'
+    | 'tokenNull'
+    | 'tokenStruct'
+    | 'tokenPackage'
+    | 'tokenOperator'
+    | 'tokenEnumMember'
+    | 'tokenTypeRepo'
+    | 'tokenTypeSymbol'
+    | 'tokenTypeFile'
 
   export type IconSize = 'original' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 
diff --git a/src/components/index.js b/src/components/index.js
index 221a8d87b6c..c09b340e33d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -295,6 +295,10 @@ export {
   EuiTableSortMobileItem,
 } from './table';
 
+export {
+  EuiToken
+} from './token';
+
 export {
   EuiBasicTable,
   EuiInMemoryTable
diff --git a/src/components/index.scss b/src/components/index.scss
index cae8f53eb33..e58c30baf51 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -51,6 +51,7 @@
 @import 'tabs/index';
 @import 'title/index';
 @import 'toast/index';
+@import 'token/index';
 @import 'toggle/index';
 @import 'tool_tip/index';
 @import 'text/index';
diff --git a/src/components/token/__snapshots__/token.test.js.snap b/src/components/token/__snapshots__/token.test.js.snap
new file mode 100644
index 00000000000..b055af8f74e
--- /dev/null
+++ b/src/components/token/__snapshots__/token.test.js.snap
@@ -0,0 +1,477 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiToken is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint01 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props color tokenTint01 is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint01 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props color tokenTint02 is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint02 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props color tokenTint03 is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint03 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props color tokenTint04 is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint04 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props color tokenTint05 is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint05 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props color tokenTint06 is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint06 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props color tokenTint07 is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint07 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props color tokenTint08 is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint08 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props color tokenTint09 is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint09 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props color tokenTint10 is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint10 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props shape circle is rendered 1`] = `
+<div
+  class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props shape rectangle is rendered 1`] = `
+<div
+  class="euiToken euiToken--rectangle euiToken--tokenTint01 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props shape square is rendered 1`] = `
+<div
+  class="euiToken euiToken--square euiToken--tokenTint01 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props size l is rendered 1`] = `
+<div
+  class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--large"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props size m is rendered 1`] = `
+<div
+  class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--medium"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
+
+exports[`EuiToken props size s is rendered 1`] = `
+<div
+  class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--small"
+>
+  <svg
+    class="euiIcon euiIcon--medium"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <circle
+        cx="8"
+        cy="8"
+        id="dot-a"
+        r="4"
+      />
+    </defs>
+    <use
+      href="#dot-a"
+    />
+  </svg>
+</div>
+`;
diff --git a/src/components/token/_index.scss b/src/components/token/_index.scss
new file mode 100644
index 00000000000..486546cf04e
--- /dev/null
+++ b/src/components/token/_index.scss
@@ -0,0 +1 @@
+@import 'token';
diff --git a/src/components/token/_token.scss b/src/components/token/_token.scss
new file mode 100644
index 00000000000..c8ebacb4fbc
--- /dev/null
+++ b/src/components/token/_token.scss
@@ -0,0 +1,88 @@
+.euiToken {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    width: 100%;
+    height: 100%;
+    margin: auto;
+  }
+}
+
+.euiToken--circle {
+  border-radius: 50%;
+}
+
+.euiToken--square {
+  // These are pretty small elements, the standard size
+  // is just slightly too large.
+  border-radius: $euiBorderRadius - 1px;
+}
+
+.euiToken--small {
+  width: $euiSize;
+  height: $euiSize;
+  &.euiToken--rectangle {
+    padding: 0 $euiSizeXS;
+  }
+}
+
+.euiToken--medium {
+  width: $euiSizeL;
+  height: $euiSizeL;
+  &.euiToken--rectangle {
+    padding: 0 $euiSizeS;
+  }
+}
+
+.euiToken--large {
+  width: $euiSizeXL;
+  height: $euiSizeXL;
+
+  &.euiToken--rectangle {
+    padding: 0 ($euiSize * .5);
+  }
+}
+
+.euiToken--rectangle {
+  box-sizing: content-box;
+}
+
+$tokenTypes: (
+  tokenTint01: $euiColorPrimary,
+  tokenTint02: $euiColorAccent,
+  tokenTint03: $euiColorVis3,
+  tokenTint04: $euiColorVis7,
+  tokenTint05: $euiColorVis1,
+  tokenTint06: $euiColorVis5,
+  tokenTint07: $euiColorVis0,
+  tokenTint08: $euiColorVis9,
+  tokenTint09: #FF00FF,
+  tokenTint10: #26AB00,
+  tokenTint11: #4C1604,
+  tokenTint12: #666666
+);
+
+@each $tintName, $tintValue in $tokenTypes {
+  .euiToken--#{$tintName} {
+    box-shadow: 0 0 0 1px $tintValue;
+
+    $backgroundColor: tintOrShade($tintValue, 70%, 70%);
+    background-color: $backgroundColor;
+
+    &.euiToken--no-border {
+      box-shadow: none;
+    }
+    
+    &.euiToken--fill {
+      background-color: $tintValue;
+      svg {
+        fill: $euiColorGhost;
+      }
+    }
+    
+    svg {
+      fill: makeHighContrastColor($tintValue, $backgroundColor);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/token/index.d.ts b/src/components/token/index.d.ts
new file mode 100644
index 00000000000..dbfdc7ad0c9
--- /dev/null
+++ b/src/components/token/index.d.ts
@@ -0,0 +1,47 @@
+/// <reference path="../common.d.ts" />
+/// <reference path="../icon/index.d.ts" />
+
+import { SFC, HTMLAttributes } from 'react';
+
+declare module '@elastic/eui' {
+
+  /**
+   * token type defs
+   * 
+   * @see './token.js'
+  */
+  
+  export type TokenSize = 's' | 'm' | 'l';
+
+  export type TokenColor = 
+    | 'tokenTint01'
+    | 'tokenTint02'
+    | 'tokenTint03'
+    | 'tokenTint04'
+    | 'tokenTint05'
+    | 'tokenTint06'
+    | 'tokenTint07'
+    | 'tokenTint08'
+    | 'tokenTint09'
+    | 'tokenTint10'
+    | 'tokenTint11'
+    | 'tokenTint12'
+
+  export type TokenShape =
+    | 'circle'
+    | 'square'
+    | 'rectangle'
+
+  export interface EuiTokenProps {
+    iconType: IconType;
+    size?: TokenSize;
+    displayOptions?: {
+      color?: TokenColor;
+      shape?: TokenShape;
+      fill?: boolean;
+      hasBorder?: boolean;
+    };
+  }
+
+  export const EuiToken: SFC<CommonProps & EuiTokenProps & HTMLAttributes<HTMLDivElement>>;
+}
diff --git a/src/components/token/index.js b/src/components/token/index.js
new file mode 100644
index 00000000000..ff55a40cc19
--- /dev/null
+++ b/src/components/token/index.js
@@ -0,0 +1,5 @@
+export {
+  EuiToken,
+  SIZES as TOKEN_SIZES,
+  SHAPES as TOKEN_SHAPES,
+} from './token';
diff --git a/src/components/token/token.js b/src/components/token/token.js
new file mode 100644
index 00000000000..b0fa4701b65
--- /dev/null
+++ b/src/components/token/token.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { ICON_TYPES, EuiIcon } from '../icon';
+import { TOKEN_MAP } from './token_map';
+
+const sizeToClassMap = {
+  s: 'euiToken--small',
+  m: 'euiToken--medium',
+  l: 'euiToken--large',
+};
+
+export const SIZES = Object.keys(sizeToClassMap);
+
+const shapeToClassMap = {
+  circle: 'euiToken--circle',
+  square: 'euiToken--square',
+  rectangle: 'euiToken--rectangle',
+};
+
+export const SHAPES = Object.keys(shapeToClassMap);
+
+export const EuiToken = ({
+  iconType,
+  displayOptions,
+  size,
+  className,
+  ...rest,
+}) => {
+
+  // Check if display options is empty
+  const displayOptionsIsEmpty = Object.keys(displayOptions).length === 0 && displayOptions.constructor === Object;
+
+  let tokenShape;
+  let tokenColor;
+  let fill;
+  let tokenHidesBorder;
+
+  // Check if this has a mapping, and doesn't have custom displayOptions
+  if ((iconType in TOKEN_MAP) && (displayOptionsIsEmpty)) {
+    tokenShape = TOKEN_MAP[iconType].shape;
+    tokenColor = TOKEN_MAP[iconType].color;
+    fill = (TOKEN_MAP[iconType].fill ? true : false);
+    tokenHidesBorder = (TOKEN_MAP[iconType].hideBorder ? true : false);
+  } else {
+    // Use the displayOptions passed or use some defaults
+    tokenShape = displayOptions.shape ? displayOptions.shape : 'square';
+    tokenColor = displayOptions.color ? displayOptions.color : 'tokenTint01';
+    fill = displayOptions.fill ? true : false;
+    tokenHidesBorder = displayOptions.hideBorder ? true : false;
+  }
+
+  const classes = classNames(
+    'euiToken',
+    `euiToken--${tokenShape}`,
+    `euiToken--${tokenColor}`,
+    sizeToClassMap[size],
+    {
+      'euiToken--fill': fill,
+      'euiToken--no-border': tokenHidesBorder
+    },
+    className
+  );
+
+  return (
+    <div
+      className={classes}
+      {...rest}
+    >
+      <EuiIcon type={iconType} />
+    </div>
+  );
+};
+
+EuiToken.propTypes = {
+  /**
+   * An EUI icon type
+   */
+  iconType: PropTypes.oneOf(ICON_TYPES).isRequired,
+  /**
+   * Size of the token
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * By default EUI will auto color tokens. You can can however control it
+   * - `color`: can be `tokenTint01` thru `tokenTint10`
+   * - `shape`: square, circle, rectangle as options
+   * - `fill`: makes it a solid color
+   * - `hideBorder`: disables the outer border
+   */
+  displayOptions: PropTypes.shape({
+    color: PropTypes.string,
+    shape: PropTypes.string,
+    fill: PropTypes.boolean,
+    hideBorder: PropTypes.boolean,
+  }),
+};
+
+EuiToken.defaultProps = {
+  size: 's',
+  displayOptions: {},
+};
diff --git a/src/components/token/token.test.js b/src/components/token/token.test.js
new file mode 100644
index 00000000000..7869d1c6a33
--- /dev/null
+++ b/src/components/token/token.test.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import { render } from 'enzyme';
+
+import {
+  EuiToken,
+  SHAPES,
+  SIZES
+} from './token';
+
+const tokenColors = [
+  'tokenTint01',
+  'tokenTint02',
+  'tokenTint03',
+  'tokenTint04',
+  'tokenTint05',
+  'tokenTint06',
+  'tokenTint07',
+  'tokenTint08',
+  'tokenTint09',
+  'tokenTint10'
+];
+
+describe('EuiToken', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiToken iconType="dot" size="s" />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    describe('shape', () => {
+      SHAPES.forEach(shape => {
+        test(`${shape} is rendered`, () => {
+          const component = render (
+            <EuiToken
+              iconType="dot"
+              size="s"
+              displayOptions={{
+                shape: shape,
+                color: 'tokenTint01'
+              }}
+            />
+          );
+
+          expect(component)
+            .toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('color', () => {
+      tokenColors.forEach(color => {
+        test(`${color} is rendered`, () => {
+          const component = render (
+            <EuiToken
+              iconType="dot"
+              size="s"
+              displayOptions={{
+                color: color,
+                shape: 'square'
+              }}
+            />
+          );
+
+          expect(component)
+            .toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('size', () => {
+      SIZES.forEach(tokenSize => {
+        test(`${tokenSize} is rendered`, () => {
+          const component = render (
+            <EuiToken
+              iconType="dot"
+              size={tokenSize}
+              displayOptions={{
+                color: 'tokenTint01',
+                shape: 'circle'
+              }}
+            />
+          );
+
+          expect(component)
+            .toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/components/token/token_map.js b/src/components/token/token_map.js
new file mode 100644
index 00000000000..578f9aeb9d7
--- /dev/null
+++ b/src/components/token/token_map.js
@@ -0,0 +1,124 @@
+// Sets default displayOptions for EuiTokens based on iconType
+// tokenClass: {
+//   'shape': 'square',
+//   'color': 'tokenTint01',
+//   'fill': false,
+// },
+
+export const TOKEN_MAP = {
+  tokenClass: {
+    'shape': 'circle',
+    'color': 'tokenTint01',
+  },
+  tokenProperty: {
+    'shape': 'circle',
+    'color': 'tokenTint02',
+  },
+  tokenEnum: {
+    'shape': 'circle',
+    'color': 'tokenTint03',
+  },
+  tokenVariable: {
+    'shape': 'circle',
+    'color': 'tokenTint04',
+  },
+  tokenMethod: {
+    'shape': 'square',
+    'color': 'tokenTint02',
+  },
+  tokenAnnotation: {
+    'shape': 'square',
+    'color': 'tokenTint06',
+  },
+  tokenException: {
+    'shape': 'circle',
+    'color': 'tokenTint07',
+  },
+  tokenInterface: {
+    'shape': 'circle',
+    'color': 'tokenTint08',
+  },
+  tokenParameter: {
+    'shape': 'square',
+    'color': 'tokenTint09',
+  },
+  tokenField: {
+    'shape': 'circle',
+    'color': 'tokenTint10',
+  },
+  tokenElement: {
+    'shape': 'square',
+    'color': 'tokenTint03',
+  },
+  tokenFunction: {
+    'shape': 'circle',
+    'color': 'tokenTint02',
+  },
+  tokenBoolean: {
+    'shape': 'square',
+    'color': 'tokenTint05',
+  },
+  tokenString: {
+    'shape': 'square',
+    'color': 'tokenTint07',
+  },
+  tokenArray: {
+    'shape': 'square',
+    'color': 'tokenTint04',
+  },
+  tokenNumber: {
+    'shape': 'circle',
+    'color': 'tokenTint05',
+  },
+  tokenConstant: {
+    'shape': 'circle',
+    'color': 'tokenTint07',
+  },
+  tokenObject: {
+    'shape': 'square',
+    'color': 'tokenTint03',
+  },
+  tokenEvent: {
+    'shape': 'circle',
+    'color': 'tokenTint09',
+  },
+  tokenKey: {
+    'shape': 'circle',
+    'color': 'tokenTint06',
+  },
+  tokenNull: {
+    'shape': 'square',
+    'color': 'tokenTint02',
+  },
+  tokenStruct: {
+    'shape': 'square',
+    'color': 'tokenTint07',
+  },
+  tokenPackage: {
+    'shape': 'square',
+    'color': 'tokenTint10',
+  },
+  tokenOperator: {
+    'shape': 'circle',
+    'color': 'tokenTint09',
+  },
+  tokenEnumMember: {
+    'shape': 'square',
+    'color': 'tokenTint04',
+  },
+  tokenRepo: {
+    'shape': 'rectangle',
+    'color': 'tokenTint05',
+    'fill': true,
+  },
+  tokenSymbol: {
+    'shape': 'rectangle',
+    'color': 'tokenTint07',
+    'fill': true,
+  },
+  tokenFile: {
+    'shape': 'rectangle',
+    'color': 'tokenTint12',
+    'fill': true,
+  },
+};
\ No newline at end of file