diff --git a/src/lib/markbind/src/parsers/componentParser.js b/src/lib/markbind/src/parsers/componentParser.js
index 297a38a87d..40d369e445 100644
--- a/src/lib/markbind/src/parsers/componentParser.js
+++ b/src/lib/markbind/src/parsers/componentParser.js
@@ -414,6 +414,26 @@ function _parseDropdownAttributes(node) {
   }
 }
 
+/**
+ * Thumbnails
+ */
+
+function _parseThumbnailAttributes(node) {
+  const isImage = _.has(node.attribs, 'src') && node.attribs.src !== '';
+  if (isImage) {
+    return;
+  }
+
+  const text = _.has(node.attribs, 'text') ? node.attribs.text : '';
+  if (text === '') {
+    return;
+  }
+
+  const renderedText = md.renderInline(text);
+  node.children = cheerio.parseHTML(renderedText);
+  delete node.attribs.text;
+}
+
 /*
  * API
  */
@@ -446,6 +466,9 @@ function parseComponents(node, errorHandler) {
     case 'dropdown':
       _parseDropdownAttributes(node);
       break;
+    case 'thumbnail':
+      _parseThumbnailAttributes(node);
+      break;
     default:
       break;
     }
diff --git a/src/lib/markbind/src/preprocessors/componentPreprocessor.js b/src/lib/markbind/src/preprocessors/componentPreprocessor.js
index a16dd65d32..0829c727eb 100644
--- a/src/lib/markbind/src/preprocessors/componentPreprocessor.js
+++ b/src/lib/markbind/src/preprocessors/componentPreprocessor.js
@@ -4,7 +4,6 @@ const url = require('url');
 
 const CyclicReferenceError = require('../handlers/cyclicReferenceError.js');
 
-const md = require('../lib/markdown-it');
 const utils = require('../utils');
 const urlUtils = require('../utils/urls');
 const njUtil = require('../utils/nunjuckUtils');
@@ -34,31 +33,6 @@ function _preProcessAllComponents(node, context) {
 }
 
 
-/*
- * Thumbnails
- */
-
-
-// TODO move this to componentParser
-function _preProcessThumbnail(node) {
-  const element = node;
-
-  const isImage = _.has(element.attribs, 'src') && element.attribs.src !== '';
-  if (isImage) {
-    return element;
-  }
-
-  const text = _.has(element.attribs, 'text') ? element.attribs.text : '';
-  if (text === '') {
-    return element;
-  }
-  const renderedText = md.renderInline(text);
-  element.children = cheerio.parseHTML(renderedText);
-
-  return element;
-}
-
-
 /*
  * Common panel and include helper functions
  */
@@ -378,8 +352,6 @@ function preProcessComponent(node, context, config, parser) {
   _preProcessAllComponents(element, context);
 
   switch (element.name) {
-  case 'thumbnail':
-    return _preProcessThumbnail(element);
   case 'panel':
     return _preProcessPanel(element, context, config, parser);
   case 'variable':
diff --git a/test/functional/test_site/expected/testThumbnails.html b/test/functional/test_site/expected/testThumbnails.html
index aba4858b6e..05625c2a9f 100644
--- a/test/functional/test_site/expected/testThumbnails.html
+++ b/test/functional/test_site/expected/testThumbnails.html
@@ -102,31 +102,31 @@
         <hr>
         <p><strong>Text/Emojis/Icons</strong></p>
         <p><strong>Text</strong>
-          <thumbnail text="test" border="1px solid black" circle="">test</thumbnail>
+          <thumbnail border="1px solid black" circle="">test</thumbnail>
         </p>
         <p><strong>Markdown</strong>
-          <thumbnail text="_test_" border="1px solid black" circle=""><em>test</em></thumbnail>
-          <thumbnail text="**test**" border="1px solid black" circle=""><strong>test</strong></thumbnail>
+          <thumbnail border="1px solid black" circle=""><em>test</em></thumbnail>
+          <thumbnail border="1px solid black" circle=""><strong>test</strong></thumbnail>
         </p>
         <p><strong>Emojis</strong>
-          <thumbnail text=":x:" border="1px solid black" circle="">❌</thumbnail>
-          <thumbnail text=":eggplant:" border="1px solid black" circle="">🍆</thumbnail>
+          <thumbnail border="1px solid black" circle="">❌</thumbnail>
+          <thumbnail border="1px solid black" circle="">🍆</thumbnail>
         </p>
         <p><strong>Icons</strong>
-          <thumbnail text=":fab-github:" border="1px solid black" circle=""><span aria-hidden="true" class="fab fa-github"></span></thumbnail>
-          <thumbnail text=":glyphicon-book:" background="#666" font-color="#eee" circle=""><span aria-hidden="true" class="glyphicon glyphicon-book"></span></thumbnail>
+          <thumbnail border="1px solid black" circle=""><span aria-hidden="true" class="fab fa-github"></span></thumbnail>
+          <thumbnail background="#666" font-color="#eee" circle=""><span aria-hidden="true" class="glyphicon glyphicon-book"></span></thumbnail>
         </p>
         <hr>
         <p><strong>font-size/font-color</strong></p>
         <p><strong>20px font-size</strong>
-          <thumbnail text="test" border="1px solid black" font-size="20" circle="">test</thumbnail>
+          <thumbnail border="1px solid black" font-size="20" circle="">test</thumbnail>
         </p>
         <p><strong>40px font-size</strong>
-          <thumbnail text="test" border="1px solid black" font-size="40" circle="">test</thumbnail>
+          <thumbnail border="1px solid black" font-size="40" circle="">test</thumbnail>
         </p>
         <p><strong>font-color</strong>
-          <thumbnail text="blue" border="1px solid black" font-color="#669" circle="">blue</thumbnail>
-          <thumbnail text="maroon" border="1px solid black" font-color="maroon" font-size="25" circle="">maroon</thumbnail>
+          <thumbnail border="1px solid black" font-color="#669" circle="">blue</thumbnail>
+          <thumbnail border="1px solid black" font-color="maroon" font-size="25" circle="">maroon</thumbnail>
         </p>
       </div>