diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart
index 45ce0033..81e9f12a 100644
--- a/example/widgetbook/pages/components/button_widgetbook.dart
+++ b/example/widgetbook/pages/components/button_widgetbook.dart
@@ -5,27 +5,34 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 import '../../test/test_components.dart';
 import '../../utils/utils.dart';
 
-Widget buttonUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: ZetaButton(
-        label: context.knobs.string(label: 'Text', initialValue: 'Button'),
-        onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {},
-        borderType: context.knobs.list(
-          label: 'Border type',
-          labelBuilder: enumLabelBuilder,
-          options: ZetaWidgetBorder.values,
-        ),
-        size: context.knobs.list(
-          label: 'Size',
-          options: ZetaWidgetSize.values,
-          labelBuilder: enumLabelBuilder,
-        ),
-        type: context.knobs.list(
-          label: 'Type',
-          options: ZetaButtonType.values,
-          labelBuilder: enumLabelBuilder,
-        ),
+Widget buttonUseCase(BuildContext context) {
+  final borderType = context.knobs.list(
+    label: 'Border type',
+    labelBuilder: enumLabelBuilder,
+    options: ZetaWidgetBorder.values,
+  );
+  return WidgetbookTestWidget(
+    widget: ZetaButton(
+      label: context.knobs.string(label: 'Text', initialValue: 'Button'),
+      onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {},
+      borderType: borderType,
+      size: context.knobs.list(
+        label: 'Size',
+        options: ZetaWidgetSize.values,
+        labelBuilder: enumLabelBuilder,
       ),
-    );
+      type: context.knobs.list(
+        label: 'Type',
+        options: ZetaButtonType.values,
+        labelBuilder: enumLabelBuilder,
+      ),
+      leadingIcon:
+          iconKnob(context, rounded: borderType != ZetaWidgetBorder.sharp, nullable: true, name: "Leading Icon"),
+      trailingIcon:
+          iconKnob(context, rounded: borderType != ZetaWidgetBorder.sharp, nullable: true, name: "Trailing Icon"),
+    ),
+  );
+}
 
 Widget iconButtonUseCase(BuildContext context) {
   final borderType = context.knobs.list(
diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart
index be2087cb..18619b52 100644
--- a/lib/src/components/buttons/button.dart
+++ b/lib/src/components/buttons/button.dart
@@ -13,6 +13,8 @@ class ZetaButton extends StatelessWidget {
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
     this.zeta,
+    this.leadingIcon,
+    this.trailingIcon,
     super.key,
   });
 
@@ -23,6 +25,8 @@ class ZetaButton extends StatelessWidget {
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
     this.zeta,
+    this.leadingIcon,
+    this.trailingIcon,
     super.key,
   }) : type = ZetaButtonType.primary;
 
@@ -33,6 +37,8 @@ class ZetaButton extends StatelessWidget {
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
     this.zeta,
+    this.leadingIcon,
+    this.trailingIcon,
     super.key,
   }) : type = ZetaButtonType.secondary;
 
@@ -43,6 +49,8 @@ class ZetaButton extends StatelessWidget {
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
     this.zeta,
+    this.leadingIcon,
+    this.trailingIcon,
     super.key,
   }) : type = ZetaButtonType.positive;
 
@@ -53,6 +61,8 @@ class ZetaButton extends StatelessWidget {
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
     this.zeta,
+    this.leadingIcon,
+    this.trailingIcon,
     super.key,
   }) : type = ZetaButtonType.negative;
 
@@ -63,6 +73,8 @@ class ZetaButton extends StatelessWidget {
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
     this.zeta,
+    this.leadingIcon,
+    this.trailingIcon,
     super.key,
   }) : type = ZetaButtonType.outline;
 
@@ -73,6 +85,8 @@ class ZetaButton extends StatelessWidget {
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
     this.zeta,
+    this.leadingIcon,
+    this.trailingIcon,
     super.key,
   }) : type = ZetaButtonType.outlineSubtle;
 
@@ -83,6 +97,8 @@ class ZetaButton extends StatelessWidget {
     this.size = ZetaWidgetSize.medium,
     this.borderType = ZetaWidgetBorder.rounded,
     this.zeta,
+    this.leadingIcon,
+    this.trailingIcon,
     super.key,
   }) : type = ZetaButtonType.text;
 
@@ -106,6 +122,12 @@ class ZetaButton extends StatelessWidget {
   /// like for example from [showZetaDialog]
   final Zeta? zeta;
 
+  /// Leading icon of button. Goes infront of button.
+  final IconData? leadingIcon;
+
+  /// Trailing icon of button. Goes behind button.
+  final IconData? trailingIcon;
+
   /// Creates a clone.
   ZetaButton copyWith({
     String? label,
@@ -113,6 +135,8 @@ class ZetaButton extends StatelessWidget {
     ZetaButtonType? type,
     ZetaWidgetSize? size,
     ZetaWidgetBorder? borderType,
+    IconData? leadingIcon,
+    IconData? trailingIcon,
     Key? key,
   }) {
     return ZetaButton(
@@ -122,6 +146,8 @@ class ZetaButton extends StatelessWidget {
       size: size ?? this.size,
       borderType: borderType ?? this.borderType,
       zeta: zeta,
+      leadingIcon: leadingIcon ?? this.leadingIcon,
+      trailingIcon: trailingIcon ?? this.trailingIcon,
       key: key ?? this.key,
     );
   }
@@ -136,12 +162,32 @@ class ZetaButton extends StatelessWidget {
         onPressed: onPressed,
         style: buttonStyle(colors, borderType, type, null),
         child: SelectionContainer.disabled(
-          child: label.isEmpty
-              ? const SizedBox()
-              : Text(
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              if (leadingIcon != null)
+                Icon(
+                  leadingIcon,
+                  size: _iconSize,
+                ),
+              if (label.isNotEmpty)
+                Text(
                   label,
                   style: _textStyle,
-                ).paddingHorizontal(_textPadding),
+                ),
+              if (trailingIcon != null)
+                Icon(
+                  trailingIcon,
+                  size: _iconSize,
+                ),
+            ]
+                .divide(
+                  const SizedBox(
+                    width: ZetaSpacing.x2,
+                  ),
+                )
+                .toList(),
+          ).paddingHorizontal(_textPadding),
         ),
       ),
     );
@@ -165,13 +211,23 @@ class ZetaButton extends StatelessWidget {
   double get _textPadding {
     switch (size) {
       case ZetaWidgetSize.large:
-        return ZetaSpacing.m;
+        return ZetaSpacing.x4;
 
       case ZetaWidgetSize.medium:
-        return ZetaSpacing.x3_5;
+        return ZetaSpacing.x3;
 
       case ZetaWidgetSize.small:
-        return ZetaSpacing.x2_5;
+        return ZetaSpacing.x1;
+    }
+  }
+
+  double get _iconSize {
+    switch (size) {
+      case ZetaWidgetSize.large:
+      case ZetaWidgetSize.medium:
+        return ZetaSpacing.x5;
+      case ZetaWidgetSize.small:
+        return ZetaSpacing.x4;
     }
   }
 
@@ -183,6 +239,8 @@ class ZetaButton extends StatelessWidget {
       ..add(ObjectFlagProperty<VoidCallback?>.has('onPressed', onPressed))
       ..add(EnumProperty<ZetaButtonType>('type', type))
       ..add(EnumProperty<ZetaWidgetBorder>('borderType', borderType))
-      ..add(EnumProperty<ZetaWidgetSize>('size', size));
+      ..add(EnumProperty<ZetaWidgetSize>('size', size))
+      ..add(DiagnosticsProperty<IconData?>('leadingIcon', leadingIcon))
+      ..add(DiagnosticsProperty<IconData?>('trailingIcon', trailingIcon));
   }
 }
diff --git a/lib/src/theme/colors_base.dart b/lib/src/theme/colors_base.dart
index dbd25a42..7fb92178 100644
--- a/lib/src/theme/colors_base.dart
+++ b/lib/src/theme/colors_base.dart
@@ -1,7 +1,5 @@
 import 'package:flutter/material.dart';
-
-import 'color_swatch.dart';
-import 'colors.dart';
+import '../../zeta_flutter.dart';
 
 /// Default set of Zeta Colors that can be used to make a [ZetaColors] instance.
 ///