diff --git a/common/images/ui_comps/thumbnail-component-result.png b/common/images/ui_comps/thumbnail-component-result.png
new file mode 100644
index 00000000000..42c5f86e8a5
Binary files /dev/null and b/common/images/ui_comps/thumbnail-component-result.png differ
diff --git a/guides/v2.2/ui_comp_guide/components/ui-thumbnailcolumn.md b/guides/v2.2/ui_comp_guide/components/ui-thumbnailcolumn.md
index 6c5b44465de..9b9a5245d25 100644
--- a/guides/v2.2/ui_comp_guide/components/ui-thumbnailcolumn.md
+++ b/guides/v2.2/ui_comp_guide/components/ui-thumbnailcolumn.md
@@ -7,29 +7,38 @@ The ThumbnailColumn component implements a column containing images associated w
 
 ## Configuration options
 
-<table>
-  <tr>
-    <th>Option</th>
-    <th>Description</th>
-    <th>Type</th>
-    <th>Default</th>
-  </tr>
-  <tr>
-    <td><code>bodyTmpl</code></td>
-    <td>Path to the template used for rendering a column's fields in the table's body.</td>
-    <td>String</td>
-    <td><code>ui/grid/cells/thumbnail</code></td>
-  </tr>
-  <tr>
-    <td><code>fieldClass</code></td>
-    <td>Additional CSS classes added to the column's field elements.</td>
-    <td><code>{[name: string]: boolean}</code></td>
-    <td><code>{'data-grid-thumbnail-cell': true}</code></td>
-  </tr>
-</table>
+| Option       | Description    | Type | Default |
+| ------------ | -------------- | ---- | ------- |
+| `bodyTmpl`   | Path to the template used for rendering a column's fields in the table body. | `String` | `ui/grid/cells/thumbnail` |
+| `fieldClass` | Additional CSS classes appended to the column's field elements. | `{[name: string]: boolean}` | `{'data-grid-thumbnail-cell': true}` |
+
+## Examples
+
+### Integrate the ThumbnailColumn component with the Listing component
+
+This sample shows how the thumbnail column is added into the Product [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:
+
+```xml
+<columns>
+    <column name="thumbnail" component="Magento_Ui/js/grid/columns/thumbnail" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail">
+        <settings>
+            <hasPreview>1</hasPreview>
+            <addField>true</addField>
+            <label translate="true">Thumbnail</label>
+            <sortable>false</sortable>
+        </settings>
+    </column>
+</columns>
+```
+
+#### Result
+
+![Thumbnail UiComponent]({{ site.baseurl }}/common/images/ui_comps/thumbnail-component-result.png)
 
 ## Source files
 
+-  [Magento/Catalog/Ui/Component/Listing/Columns/Thumbnail]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Catalog/Ui/Component/Listing/Columns/Thumbnail.php)
+
 Extends [`Column`]({{ page.baseurl }}/ui_comp_guide/components/ui-column.html):
 
--  [app/code/Magento/Ui/view/base/web/js/grid/columns/thumbnail.js]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/thumbnail.js)
\ No newline at end of file
+-  [app/code/Magento/Ui/view/base/web/js/grid/columns/thumbnail.js]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/thumbnail.js)