diff --git a/src/bundle/Resources/public/scss/_summary-tile.scss b/src/bundle/Resources/public/scss/_summary-tile.scss
new file mode 100644
index 0000000000..3c97de8139
--- /dev/null
+++ b/src/bundle/Resources/public/scss/_summary-tile.scss
@@ -0,0 +1,75 @@
+.ibexa-summary-tile {
+    display: flex;
+    flex-direction: column;
+    padding: calculateRem(24px) calculateRem(24px);
+    gap: calculateRem(8px);
+    width: calculateRem(450px);
+    background: $ibexa-color-white;
+    border: calculateRem(1px) solid $ibexa-color-light-400;
+    border-radius: $ibexa-border-radius;
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__icon-wrapper {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        height: calculateRem(72px);
+        width: calculateRem(72px);
+        border-radius: 50%;
+        background: $ibexa-color-dark;
+
+        .ibexa-icon {
+            fill: $ibexa-color-white;
+        }
+    }
+
+    &__label {
+        font-family: $ibexa-font-family-headings;
+        font-weight: $ibexa-font-weight-bold;
+        font-size: $ibexa-text-font-size-large;
+    }
+
+    &__value {
+        font-weight: $ibexa-font-weight-bold;
+        font-size: $h1-font-size;
+        line-height: calculateRem(36px);
+    }
+
+    @mixin icon-colors($fill, $background) {
+        background: $background;
+
+        .ibexa-icon {
+            fill: $fill;
+        }
+    }
+
+    &__icon-wrapper--color-primary {
+        @include icon-colors($ibexa-color-primary, $ibexa-color-primary-100);
+    }
+
+    &__icon-wrapper--color-secondary {
+        @include icon-colors($ibexa-color-dark, $ibexa-color-light-400);
+    }
+
+    &__icon-wrapper--color-info {
+        @include icon-colors($ibexa-color-info, $ibexa-color-info-100);
+    }
+
+    &__icon-wrapper--color-danger {
+        @include icon-colors($ibexa-color-danger, $ibexa-color-danger-100);
+    }
+
+    &__icon-wrapper--color-success {
+        @include icon-colors($ibexa-color-success, $ibexa-color-success-100);
+    }
+
+    &__icon-wrapper--color-complementary {
+        @include icon-colors($ibexa-color-complementary, $ibexa-color-complementary-100);
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss
index a89e5b7e5e..978347b4ae 100644
--- a/src/bundle/Resources/public/scss/ibexa.scss
+++ b/src/bundle/Resources/public/scss/ibexa.scss
@@ -119,3 +119,4 @@
 @import 'user-invitation-modal';
 @import 'default-location';
 @import 'steps';
+@import 'summary-tile';
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/summary_tile/summary_tile.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/summary_tile/summary_tile.html.twig
new file mode 100644
index 0000000000..ee6a4f6e0c
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/ui/component/summary_tile/summary_tile.html.twig
@@ -0,0 +1,27 @@
+{% import "@ibexadesign/ui/component/macros.html.twig" as html %}
+
+{% set attr = attr|default({})|merge({
+    class: ('ibexa-summary-tile ' ~ attr.class|default(''))|trim,
+}) %}
+
+{% set icon_wrapper_attr = icon_wrapper_attr|default({})|merge({
+    class: ('ibexa-summary-tile__icon-wrapper '
+        ~ (icon_color ? 'ibexa-summary-tile__icon-wrapper--color-' ~ icon_color ~ ' ')
+        ~ icon_wrapper_attr.class|default(''))|trim,
+}) %}
+
+<div {{ html.attributes(attr) }}>
+    <div class="ibexa-summary-tile__header">
+        <div class="ibexa-summary-tile__label">
+            {{ label }}
+        </div>
+        <div {{ html.attributes(icon_wrapper_attr) }}>
+            <svg class="ibexa-icon ibexa-icon--medium">
+                <use xlink:href="{{ icon_path|default(ibexa_icon_path(icon)) }}"></use>
+            </svg>
+        </div>
+    </div>
+    <div class="ibexa-summary-tile__value">
+        {{ value }}
+    </div>
+</div>