diff --git a/carbon.yml b/carbon.yml
index 6be97142..7ca6ebd6 100644
--- a/carbon.yml
+++ b/carbon.yml
@@ -248,8 +248,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/image-loader.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -443,8 +442,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/radio-tile.svg'
     demoLinks:
       - type: storybook
         name: Storybook
diff --git a/thumbnails/image-loader.svg b/thumbnails/image-loader.svg
new file mode 100644
index 00000000..b1d5f70e
--- /dev/null
+++ b/thumbnails/image-loader.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>image-loader</title>
+    <defs>
+        <path d="M14.25,10.5 C13.0073593,10.5 12,9.49264069 12,8.25 C12,7.00735931 13.0073593,6 14.25,6 C15.4926407,6 16.5,7.00735931 16.5,8.25 C16.5,8.8467371 16.2629471,9.41903341 15.8409903,9.84099026 C15.4190334,10.2629471 14.8467371,10.5 14.25,10.5 L14.25,10.5 Z M14.25,7.5 C13.8357864,7.5 13.5,7.83578644 13.5,8.25 C13.5,8.66421356 13.8357864,9 14.25,9 C14.6642136,9 15,8.66421356 15,8.25 C15,7.83578644 14.6642136,7.5 14.25,7.5 Z M19.6125,3 L4.3875,3 C3.62120491,3 3,3.62120491 3,4.3875 L3,19.6125 C3,19.9804879 3.14618262,20.3334039 3.40638934,20.5936107 C3.66659607,20.8538174 4.01951212,21 4.3875,21 L19.6125,21 C19.9804879,21 20.3334039,20.8538174 20.5936107,20.5936107 C20.8538174,20.3334039 21,19.9804879 21,19.6125 L21,4.3875 C21,3.62120491 20.3787951,3 19.6125,3 Z M19.5,4.5 L19.5,15.9975 L16.695,13.1925 C16.4136476,12.9108344 16.0318639,12.75257 15.63375,12.75257 C15.2356361,12.75257 14.8538524,12.9108344 14.5725,13.1925 L13.5,14.2875 L9.375,10.1925 C9.09364761,9.91083444 8.71186387,9.75257002 8.31375,9.75257002 C7.91563613,9.75257002 7.53385239,9.91083444 7.2525,10.1925 L4.5,12.945 L4.5,4.5 L19.5,4.5 Z M4.5,19.5 L4.5,15.06 L8.31,11.25 L8.31,11.25 L12.4125,15.3525 C12.6938524,15.6341656 13.0756361,15.79243 13.47375,15.79243 C13.8718639,15.79243 14.2536476,15.6341656 14.535,15.3525 L15.63,14.25 L15.63,14.25 L19.5,18.12 L19.5,19.5 L4.5,19.5 Z" id="path-1"></path>
+    </defs>
+    <g id="image-loader" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-Copy-29" fill="#BEBEBE" x="60" y="36" width="200" height="109"></rect>
+        <g id="icon/formatting/image/16-copy" transform="translate(148.000000, 79.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="icon-color" fill="#8E8E93" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/radio-tile.svg b/thumbnails/radio-tile.svg
new file mode 100644
index 00000000..47862878
--- /dev/null
+++ b/thumbnails/radio-tile.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>radio-tile</title>
+    <defs>
+        <circle id="path-1" cx="6.5" cy="6.5" r="5.6875"></circle>
+        <polygon id="path-3" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
+    </defs>
+    <g id="radio-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-Copy-2" transform="translate(56.000000, 109.000000)" fill="#F3F3F3">
+            <rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
+            <rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
+        </g>
+        <g id="Group" transform="translate(56.000000, 33.000000)" fill="#F3F3F3">
+            <rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
+            <rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
+        </g>
+        <g id="Group-Copy" transform="translate(56.000000, 71.000000)" fill="#F3F3F3">
+            <rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
+            <rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
+        </g>
+        <rect id="Rectangle-Copy-4" fill="#C6C6C6" x="67" y="44" width="72" height="6"></rect>
+        <rect id="Rectangle-Copy-5" fill="#C6C6C6" x="67" y="82" width="72" height="6"></rect>
+        <g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 79.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
+        </g>
+        <rect id="Rectangle-Copy-6" fill="#C6C6C6" x="67" y="120" width="72" height="6"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/selectable-tile.svg b/thumbnails/selectable-tile.svg
index 88235aa3..3763c347 100644
--- a/thumbnails/selectable-tile.svg
+++ b/thumbnails/selectable-tile.svg
@@ -2,16 +2,27 @@
 <svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>selectable-tile</title>
     <defs>
-        <circle id="path-1" cx="8" cy="8" r="7"></circle>
-        <polygon id="path-3" points="7 10.75 4.5 8.25 5.295 7.5 7 9.175 10.705 5.5 11.5 6.29"></polygon>
+        <circle id="path-1" cx="6.5" cy="6.5" r="5.6875"></circle>
+        <polygon id="path-3" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
+        <circle id="path-5" cx="6.5" cy="6.5" r="5.6875"></circle>
+        <polygon id="path-7" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
     </defs>
     <g id="selectable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group" transform="translate(72.000000, 41.000000)" fill="#F3F3F3">
-            <rect id="Rectangle" x="0" y="0" width="176" height="98"></rect>
-            <rect id="Rectangle" stroke="#161616" x="0" y="0" width="176" height="98"></rect>
+        <g id="Group-Copy-2" transform="translate(56.000000, 109.000000)" fill="#F3F3F3">
+            <rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
+            <rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
         </g>
-        <rect id="Rectangle-Copy-4" fill="#C6C6C6" x="86" y="55" width="90" height="8"></rect>
-        <g id="Group" transform="translate(222.000000, 51.000000)">
+        <g id="Group" transform="translate(56.000000, 33.000000)" fill="#F3F3F3">
+            <rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
+            <rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
+        </g>
+        <g id="Group-Copy" transform="translate(56.000000, 71.000000)" fill="#F3F3F3">
+            <rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
+            <rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
+        </g>
+        <rect id="Rectangle-Copy-4" fill="#C6C6C6" x="67" y="44" width="72" height="6"></rect>
+        <rect id="Rectangle-Copy-5" fill="#C6C6C6" x="67" y="82" width="72" height="6"></rect>
+        <g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 41.000000)">
             <mask id="mask-2" fill="white">
                 <use xlink:href="#path-1"></use>
             </mask>
@@ -21,5 +32,16 @@
             </mask>
             <use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
         </g>
+        <g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 79.000000)">
+            <mask id="mask-6" fill="white">
+                <use xlink:href="#path-5"></use>
+            </mask>
+            <use id="icon-color" fill="#000000" xlink:href="#path-5"></use>
+            <mask id="mask-8" fill="white">
+                <use xlink:href="#path-7"></use>
+            </mask>
+            <use id="icon-color" fill="#FFFFFF" xlink:href="#path-7"></use>
+        </g>
+        <rect id="Rectangle-Copy-6" fill="#C6C6C6" x="67" y="120" width="72" height="6"></rect>
     </g>
 </svg>
\ No newline at end of file