diff --git a/.vscode/settings.json b/.vscode/settings.json
index d064f84fb5..5506159556 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -29,6 +29,5 @@
     },
     "[scss]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "liveServer.settings.port": 5501
+    }
 }
diff --git a/packages/ketchup-showcase/public/assets/svg/attributes.svg b/packages/ketchup-showcase/public/assets/svg/attributes.svg
new file mode 100644
index 0000000000..cba24d3709
--- /dev/null
+++ b/packages/ketchup-showcase/public/assets/svg/attributes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-240v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg>
\ No newline at end of file
diff --git a/packages/ketchup-showcase/public/assets/svg/certificate.svg b/packages/ketchup-showcase/public/assets/svg/certificate.svg
new file mode 100644
index 0000000000..a739dc7a1b
--- /dev/null
+++ b/packages/ketchup-showcase/public/assets/svg/certificate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M140-443v103h680v-103H140Zm0-437h680q24.75 0 42.38 17.62Q880-844.75 880-820v480q0 24.75-17.62 42.37Q844.75-280 820-280H626v200l-146-74-146 74v-200H140q-24.75 0-42.37-17.63Q80-315.25 80-340v-480q0-24.75 17.63-42.38Q115.25-880 140-880Zm0 329h680v-269H140v269Zm0 211v-480 480Z"/></svg>
\ No newline at end of file
diff --git a/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageExtraList.vue b/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageExtraList.vue
index c33afbc67b..360f0a95bd 100644
--- a/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageExtraList.vue
+++ b/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageExtraList.vue
@@ -408,11 +408,7 @@
             <div class="icon-label">chart-pie</div>
           </div>
           <div class="icon-wrapper" title="chat">
-            <kup-image
-              size-x="48px"
-              size-y="48px"
-              resource="chat"
-            ></kup-image>
+            <kup-image size-x="48px" size-y="48px" resource="chat"></kup-image>
             <div class="icon-label">chat</div>
           </div>
           <div class="icon-wrapper" title="checkbox-marked-outline">
@@ -636,11 +632,7 @@
             <div class="icon-label">crop-square</div>
           </div>
           <div class="icon-wrapper" title="csv">
-            <kup-image
-              size-x="48px"
-              size-y="48px"
-              resource="csv"
-            ></kup-image>
+            <kup-image size-x="48px" size-y="48px" resource="csv"></kup-image>
             <div class="icon-label">csv</div>
           </div>
           <div class="icon-wrapper" title="cube-outline">
@@ -1399,12 +1391,8 @@
             ></kup-image>
             <div class="icon-label">magnify-plus</div>
           </div>
-           <div class="icon-wrapper" title="mail">
-            <kup-image
-              size-x="48px"
-              size-y="48px"
-              resource="mail"
-            ></kup-image>
+          <div class="icon-wrapper" title="mail">
+            <kup-image size-x="48px" size-y="48px" resource="mail"></kup-image>
             <div class="icon-label">mail</div>
           </div>
           <div class="icon-wrapper" title="map-marker">
@@ -1528,11 +1516,7 @@
             <div class="icon-label">open_in_new</div>
           </div>
           <div class="icon-wrapper" title="packs">
-            <kup-image
-              size-x="48px"
-              size-y="48px"
-              resource="packs"
-            ></kup-image>
+            <kup-image size-x="48px" size-y="48px" resource="packs"></kup-image>
             <div class="icon-label">packs</div>
           </div>
           <div class="icon-wrapper" title="pause-circle">
@@ -1640,11 +1624,7 @@
             <div class="icon-label">puzzle</div>
           </div>
           <div class="icon-wrapper" title="PWD">
-            <kup-image
-              size-x="48px"
-              size-y="48px"
-              resource="PWD"
-            ></kup-image>
+            <kup-image size-x="48px" size-y="48px" resource="PWD"></kup-image>
             <div class="icon-label">PWD</div>
           </div>
           <div class="icon-wrapper" title="radioactive">
@@ -1700,11 +1680,7 @@
             <div class="icon-label">Reddit</div>
           </div>
           <div class="icon-wrapper" title="redo">
-            <kup-image
-              size-x="48px"
-              size-y="48px"
-              resource="redo"
-            ></kup-image>
+            <kup-image size-x="48px" size-y="48px" resource="redo"></kup-image>
             <div class="icon-label">redo</div>
           </div>
           <div class="icon-wrapper" title="reorder-horizontal">
diff --git a/packages/ketchup/src/components/kup-image/assets/svg/attributes.svg b/packages/ketchup/src/components/kup-image/assets/svg/attributes.svg
new file mode 100644
index 0000000000..cba24d3709
--- /dev/null
+++ b/packages/ketchup/src/components/kup-image/assets/svg/attributes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-240v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg>
\ No newline at end of file
diff --git a/packages/ketchup/src/components/kup-image/assets/svg/certificate.svg b/packages/ketchup/src/components/kup-image/assets/svg/certificate.svg
new file mode 100644
index 0000000000..a739dc7a1b
--- /dev/null
+++ b/packages/ketchup/src/components/kup-image/assets/svg/certificate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M140-443v103h680v-103H140Zm0-437h680q24.75 0 42.38 17.62Q880-844.75 880-820v480q0 24.75-17.62 42.37Q844.75-280 820-280H626v200l-146-74-146 74v-200H140q-24.75 0-42.37-17.63Q80-315.25 80-340v-480q0-24.75 17.63-42.38Q115.25-880 140-880Zm0 329h680v-269H140v269Zm0 211v-480 480Z"/></svg>
\ No newline at end of file
diff --git a/packages/ketchup/src/components/kup-image/assets/svg/lock_unlock_outline.svg b/packages/ketchup/src/components/kup-image/assets/svg/lock_unlock_outline.svg
new file mode 100644
index 0000000000..c1580d166e
--- /dev/null
+++ b/packages/ketchup/src/components/kup-image/assets/svg/lock_unlock_outline.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"   viewBox="0 0 24 24"><path d="M10 13C11.1 13 12 13.89 12 15C12 16.11 11.11 17 10 17S8 16.11 8 15 8.9 13 10 13M18 1C15.24 1 13 3.24 13 6V8H4C2.9 8 2 8.9 2 10V20C2 21.1 2.9 22 4 22H16C17.1 22 18 21.1 18 20V10C18 8.9 17.1 8 16 8H15V6C15 4.34 16.34 3 18 3S21 4.34 21 6V8H23V6C23 3.24 20.76 1 18 1M16 10V20H4V10H16Z" /></svg>
\ No newline at end of file