diff --git a/ui_framework/doc_site/src/views/icon/icon_basic.html b/ui_framework/doc_site/src/views/icon/icon_basic.html
new file mode 100644
index 0000000000000..78f198e68b543
--- /dev/null
+++ b/ui_framework/doc_site/src/views/icon/icon_basic.html
@@ -0,0 +1 @@
+<div class="kuiIcon kuiIcon--basic fa-train"></div>
diff --git a/ui_framework/doc_site/src/views/icon/icon_example.jsx b/ui_framework/doc_site/src/views/icon/icon_example.jsx
index f9a01a62f126a..7aee7f935504f 100644
--- a/ui_framework/doc_site/src/views/icon/icon_example.jsx
+++ b/ui_framework/doc_site/src/views/icon/icon_example.jsx
@@ -17,6 +17,13 @@ export default createExample([{
     <p>Use this Icon to denote useful information.</p>
   ),
   html: require('./icon_info.html'),
+}, {
+  title: 'Basic',
+  description: (
+    <p>Use this Icon when you don't want to communicate any particular meaning with the icon's color.</p>
+  ),
+  html: require('./icon_basic.html'),
+  hasDarkTheme: false,
 }, {
   title: 'Success',
   description: (