diff --git a/src/components/feedback/d-feedback.tsx b/src/components/feedback/d-feedback.tsx
index b8ca4c9..75081e2 100644
--- a/src/components/feedback/d-feedback.tsx
+++ b/src/components/feedback/d-feedback.tsx
@@ -76,8 +76,8 @@ export class DFeedback {
               <div class="w-6 h-6">{this.type === 'success' ? successIcon : errorIcon}</div>
               <d-text>{this.feedback}</d-text>
             </div>
-            <button onClick={this.onClose} class="w-12 h-12 flex items-center justify-end">
-              <div class="w-5 h-5">{closeIcon}</div>
+            <button onClick={this.onClose}>
+              <div class="w-12 h-12 flex items-center justify-end">{closeIcon}</div>
             </button>
           </div>
           {this.message && (
diff --git a/src/components/feedback/test/d-feedback.spec.tsx b/src/components/feedback/test/d-feedback.spec.tsx
index f6a9d0d..59f22a0 100644
--- a/src/components/feedback/test/d-feedback.spec.tsx
+++ b/src/components/feedback/test/d-feedback.spec.tsx
@@ -22,8 +22,8 @@ describe('d-feedback', () => {
                </div>
                <d-text></d-text>
              </div>
-             <button class="w-12 h-12 flex items-center justify-end">
-               <div class="h-5 w-5">
+             <button>
+               <div class="w-12 h-12 flex items-center justify-end">
                  <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                    <g id="x">
                      <path clip-rule="evenodd" d="M4.29279 4.29259C4.48031 4.10512 4.73462 3.99981 4.99979 3.99981C5.26495 3.99981 5.51926 4.10512 5.70679 4.29259L9.99979 8.58559L14.2928 4.29259C14.385 4.19708 14.4954 4.1209 14.6174 4.06849C14.7394 4.01608 14.8706 3.9885 15.0034 3.98734C15.1362 3.98619 15.2678 4.01149 15.3907 4.06177C15.5136 4.11205 15.6253 4.18631 15.7192 4.2802C15.8131 4.37409 15.8873 4.48574 15.9376 4.60864C15.9879 4.73154 16.0132 4.86321 16.012 4.99599C16.0109 5.12877 15.9833 5.25999 15.9309 5.382C15.8785 5.504 15.8023 5.61435 15.7068 5.70659L11.4138 9.99959L15.7068 14.2926C15.8889 14.4812 15.9897 14.7338 15.9875 14.996C15.9852 15.2582 15.88 15.509 15.6946 15.6944C15.5092 15.8798 15.2584 15.985 14.9962 15.9873C14.734 15.9895 14.4814 15.8888 14.2928 15.7066L9.99979 11.4136L5.70679 15.7066C5.51818 15.8888 5.26558 15.9895 5.00339 15.9873C4.74119 15.985 4.49038 15.8798 4.30497 15.6944C4.11956 15.509 4.01439 15.2582 4.01211 14.996C4.00983 14.7338 4.11063 14.4812 4.29279 14.2926L8.58579 9.99959L4.29279 5.70659C4.10532 5.51907 4 5.26476 4 4.99959C4 4.73443 4.10532 4.48012 4.29279 4.29259Z" fill="currentColor" fill-rule="evenodd" id="Vector"></path>
diff --git a/src/components/icon/d-icon.tsx b/src/components/icon/d-icon.tsx
index 0f8dec4..df32358 100644
--- a/src/components/icon/d-icon.tsx
+++ b/src/components/icon/d-icon.tsx
@@ -13,6 +13,7 @@ export class DIcon {
   @Prop() outline: boolean = false;
   @Prop() size: number = 24;
   @State() private pathData: { d: string; fill?: string; stroke?: string }[];
+  @State() private fillAndStroke: { fill: string; stroke: string };
   @State() private pathList: HTMLElement[];
   @State() private visible = false;
   private intersectionObserver: IntersectionObserver;
@@ -22,6 +23,7 @@ export class DIcon {
       this.visible = true;
       await this.loadIconPathData();
       this.generatePathList();
+      this.getFillAndStroke();
     });
   }
 
@@ -37,18 +39,20 @@ export class DIcon {
   }
 
   render() {
-    const fill = this.outline ? 'none' : 'currentColor';
-    const stroke = this.outline ? 'currentColor' : 'none';
     const { size } = this;
     return (
       <Host>
-        <svg xmlns="http://www.w3.org/2000/svg" fill={fill} stroke={stroke} height={size} width={size} viewBox="0 0 24 24">
+        <svg xmlns="http://www.w3.org/2000/svg" height={size} width={size} viewBox="0 0 24 24" {...this.fillAndStroke}>
           {this.pathList}
         </svg>
       </Host>
     );
   }
 
+  @Watch('outline') private getFillAndStroke(): void {
+    this.fillAndStroke = this.outline ? { fill: 'none', stroke: 'currentColor' } : { fill: 'currentColor', stroke: 'none' };
+  }
+
   @Watch('icon') private async loadIconPathData(): Promise<void> {
     const { icon, visible } = this;
     if (!Build.isBrowser || !icon || !visible) {
diff --git a/src/components/tab-button/d-tab-button.tsx b/src/components/tab-button/d-tab-button.tsx
index 601ecf6..ef21f63 100644
--- a/src/components/tab-button/d-tab-button.tsx
+++ b/src/components/tab-button/d-tab-button.tsx
@@ -23,7 +23,7 @@ export class DTabButton {
       const icon = icons[this.tab];
       if (!icon) return null;
 
-      return <d-icon icon={icon} size={28} {...(this.active ? {} : { outline: true })} />;
+      return <d-icon icon={icon} size={28} outline={!this.active} />;
     };
 
     return (
@@ -32,6 +32,7 @@ export class DTabButton {
           tab={this.tab}
           href={`/${this.tab}`}
           class={{
+            'h-12 w-12 block': true,
             'text-on-alt': !this.active,
             'text-on': this.active,
           }}
diff --git a/src/components/tab-button/test/d-tab-button.spec.tsx b/src/components/tab-button/test/d-tab-button.spec.tsx
index c8ae377..a1ebc7f 100644
--- a/src/components/tab-button/test/d-tab-button.spec.tsx
+++ b/src/components/tab-button/test/d-tab-button.spec.tsx
@@ -10,7 +10,7 @@ describe('d-tab-button', () => {
     expect(page.root).toEqualHtml(`
       <d-tab-button tab="home">
        <mock:shadow-root>
-         <ion-tab-button class="text-on-alt" href="/home" tab="home">
+         <ion-tab-button class="block h-12 text-on-alt w-12" href="/home" tab="home">
            <div class="relative w-fit">
               <d-icon icon="home" outline="" size="28"></d-icon>
             </div>