diff --git a/src/comp/card.svelte b/src/comp/card.svelte
index ec96010..11d9a06 100644
--- a/src/comp/card.svelte
+++ b/src/comp/card.svelte
@@ -23,6 +23,7 @@
 
     &[data-horizontal] {
       flex-direction: row;
+      gap: 16px;
     }
   }
 </style>
diff --git a/src/comp/cardicon.svelte b/src/comp/cardicon.svelte
new file mode 100644
index 0000000..17caa72
--- /dev/null
+++ b/src/comp/cardicon.svelte
@@ -0,0 +1,42 @@
+<script>
+  import Card from "./card.svelte";
+    import Tablericon from "./tablericon.svelte";
+
+  /**
+   * @type {string}
+   */
+  export let colorIcon = "var(--gray)";
+
+  /**
+   * @type {string}
+   */
+  export let colorBackground = "var(--gray-dim)";
+
+  /**
+   * @type {string}
+   */
+  export let iconName;
+
+  /**
+   * @type {number}
+   */
+  export let iconSize = 24;
+</script>
+
+<style>
+  .icon {
+    display: flex;
+    background: var(--card-bg);
+    padding: 8px;
+    border-radius: 8px;
+    aspect-ratio: 1 / 1;
+    height: 100%;
+  }
+</style>
+
+<Card horizontal={true} background={colorBackground}>
+  <div class="icon">
+    <Tablericon color={colorIcon} name={iconName} size={iconSize}></Tablericon>
+  </div>
+  <slot />
+</Card>