From d17bef169a5569742d1c49e7e5b8d70ed06947e8 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Thu, 13 Feb 2025 10:25:16 +0100
Subject: [PATCH 1/2] fix(tokens): add missing icon sizes

---
 .changeset/polite-donuts-design.md | 5 +++++
 src/tokens.ts                      | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 .changeset/polite-donuts-design.md

diff --git a/.changeset/polite-donuts-design.md b/.changeset/polite-donuts-design.md
new file mode 100644
index 00000000..22f50539
--- /dev/null
+++ b/.changeset/polite-donuts-design.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Add missing icon size tokens for header presets.
diff --git a/src/tokens.ts b/src/tokens.ts
index 2544a706..a2378db7 100644
--- a/src/tokens.ts
+++ b/src/tokens.ts
@@ -94,21 +94,25 @@ const TOKENS = {
   'h1-line-height': '44px',
   'h1-letter-spacing': '-0.01em',
   'h1-font-weight': '700',
+  'h1-icon-size': '38px',
   // h2
   'h2-font-size': '24px',
   'h2-line-height': '36px',
   'h2-letter-spacing': '0em',
   'h2-font-weight': '700',
+  'h2-icon-size': '26px',
   // h3
   'h3-font-size': '20px',
   'h3-line-height': '28px',
   'h3-letter-spacing': '0em',
   'h3-font-weight': '700',
+  'h3-icon-size': '22px',
   // h4
   'h4-font-size': '18px',
   'h4-line-height': '24px',
   'h4-letter-spacing': '0',
   'h4-font-weight': '700',
+  'h4-icon-size': '20px',
   // h5
   'h5-font-size': '16px',
   'h5-line-height': '22px',

From 814ab55d85661ec1e85ddb3bdf79e36349ef59e3 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Thu, 13 Feb 2025 10:31:07 +0100
Subject: [PATCH 2/2] fix(Icon): change vertical alignment

---
 .changeset/few-berries-pretend.md  |  5 ++++
 src/icons/Icon.tsx                 |  2 +-
 src/stories/Typography.stories.tsx | 39 +++++++++++++++---------------
 3 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/few-berries-pretend.md

diff --git a/.changeset/few-berries-pretend.md b/.changeset/few-berries-pretend.md
new file mode 100644
index 00000000..7bc26cee
--- /dev/null
+++ b/.changeset/few-berries-pretend.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Change vertical alignment of icons to sub.
diff --git a/src/icons/Icon.tsx b/src/icons/Icon.tsx
index 0ee83f0b..56ef45bf 100644
--- a/src/icons/Icon.tsx
+++ b/src/icons/Icon.tsx
@@ -17,7 +17,7 @@ const IconElement = tasty({
   styles: {
     display: 'inline-grid',
     placeContent: 'center',
-    verticalAlign: 'middle',
+    verticalAlign: 'sub',
     width: '1em 1em',
     height: 'min 1em',
     fontSize: 'var(--icon-size, var(--font-size))',
diff --git a/src/stories/Typography.stories.tsx b/src/stories/Typography.stories.tsx
index 167ef4b6..72fec370 100644
--- a/src/stories/Typography.stories.tsx
+++ b/src/stories/Typography.stories.tsx
@@ -5,6 +5,7 @@ import {
   Flow,
   Space,
   Block,
+  CubeIcon,
 } from '../index';
 
 export default {
@@ -15,61 +16,61 @@ export const Presets = {
   render: () => (
     <Flow gap="1x" color="#dark">
       <Block preset="h1">
-        The quick brown fox jumps over the lazy dog - h1
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h1
       </Block>
       <Block preset="h2">
-        The quick brown fox jumps over the lazy dog - h2
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h2
       </Block>
       <Block preset="h3">
-        The quick brown fox jumps over the lazy dog - h3
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h3
       </Block>
       <Block preset="h4">
-        The quick brown fox jumps over the lazy dog - h4
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h4
       </Block>
       <Block preset="h5">
-        The quick brown fox jumps over the lazy dog - h5
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h5
       </Block>
       <Block preset="h6">
-        The quick brown fox jumps over the lazy dog - h6
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h6
       </Block>
       <Block preset="t1">
-        The quick brown fox jumps over the lazy dog - t1
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t1
       </Block>
       <Block preset="t2">
-        The quick brown fox jumps over the lazy dog - t2
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t2
       </Block>
       <Block preset="t2m">
-        The quick brown fox jumps over the lazy dog - t2m
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t2m
       </Block>
       <Block preset="t3">
-        The quick brown fox jumps over the lazy dog - t3
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t3
       </Block>
       <Block preset="t3m">
-        The quick brown fox jumps over the lazy dog - t3m
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t3m
       </Block>
       <Block preset="t4">
-        The quick brown fox jumps over the lazy dog - t4
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t4
       </Block>
       <Block preset="p1">
-        The quick brown fox jumps over the lazy dog - p1
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - p1
       </Block>
       <Block preset="p2">
-        The quick brown fox jumps over the lazy dog - p2
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - p2
       </Block>
       <Block preset="p3">
-        The quick brown fox jumps over the lazy dog - p3
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - p3
       </Block>
       <Block preset="p4">
-        The quick brown fox jumps over the lazy dog - p4
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - p4
       </Block>
       <Block preset="c1">
-        The quick brown fox jumps over the lazy dog - c1
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - c1
       </Block>
       <Block preset="c2">
-        The quick brown fox jumps over the lazy dog - c2
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - c2
       </Block>
       <Block preset="tag">
-        The quick brown fox jumps over the lazy dog - tag
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - tag
       </Block>
     </Flow>
   ),