diff --git a/holi-bricks/components/button/Button.stories.tsx b/holi-bricks/components/button/Button.stories.tsx
index be81e8ffd6f72a5a4890a066a2cbf6a571e47651..e7e046a8663768a3b550f145bed0df91cbd6a0c4 100644
--- a/holi-bricks/components/button/Button.stories.tsx
+++ b/holi-bricks/components/button/Button.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { Button } from 'holi-bricks/components/button'
 import React from 'react'
 
-import { Chat3 } from '@holi/icons/src/generated'
+import { Chat3, Hearts } from '@holi/icons/src/generated'
 import { View } from 'react-native'
 
 const availableVariants = ['primary', 'secondary', 'danger'] as const
@@ -19,6 +19,7 @@ const disabledProps = [
   'aria-disabled',
   'tabIndex',
   'icon',
+  'iconBefore',
   'onPress',
   'loadingLabel',
   'testID',
@@ -46,6 +47,7 @@ export const Playground: Story = {
     label: { description: 'Button text', required: false },
     variant: { control: 'select', options: availableVariants },
     size: { control: 'select', options: availableSizes },
+    scaleIcon: { control: 'number', description: 'Scale factor for icons' },
   },
   args: {
     label: 'Label',
@@ -56,6 +58,7 @@ export const Playground: Story = {
     transparent: false,
     selected: false,
     inline: true,
+    scaleIcon: 1,
   },
   render: function Render(args) {
     const [, updateArgs] = useArgs()
@@ -111,6 +114,15 @@ export const ByState: Story = {
         <View style={{ margin: 6 }}>
           <Button label="with icon" icon={Chat3} />
         </View>
+        <View style={{ margin: 6 }}>
+          <Button label="with icon before" iconBefore={Hearts} />
+        </View>
+        <View style={{ margin: 6 }}>
+          <Button label="with both icons" icon={Chat3} iconBefore={Hearts} />
+        </View>
+        <View style={{ margin: 6 }}>
+          <Button label="with scaled icons" icon={Chat3} iconBefore={Hearts} scaleIcon={1.5} />
+        </View>
         <View style={{ margin: 6 }}>
           <Button label="transparent" transparent />
         </View>
diff --git a/holi-bricks/components/button/Button.tsx b/holi-bricks/components/button/Button.tsx
index 34e5701ee0ef496f93ef7d49168b865e5b73849f..5432b9168ff4d45bebfa3aeab57649ece16890b4 100644
--- a/holi-bricks/components/button/Button.tsx
+++ b/holi-bricks/components/button/Button.tsx
@@ -37,6 +37,8 @@ export type ButtonProps = AccessibilityProps & {
   transparent?: boolean
   selected?: boolean
   icon?: HoliIconType
+  iconBefore?: HoliIconType
+  scaleIcon?: number
   inline?: boolean
   testID?: string
 }
@@ -52,6 +54,8 @@ export const Button = ({
   transparent = false,
   selected = false,
   icon,
+  iconBefore,
+  scaleIcon = 1,
   inline = false,
   testID,
   ...rest
@@ -67,6 +71,7 @@ export const Button = ({
 
   const isSpinning = loading || isProcessing
   const labelToShow = isSpinning && loadingLabel ? loadingLabel : label
+  const iconSize = 16 * scaleIcon
 
   const handlePress = useCallback(
     async (event: GestureResponderEvent) => {
@@ -103,6 +108,9 @@ export const Button = ({
       {...accessibilityProps(rest)}
     >
       <View style={styles.content}>
+        {iconBefore && !isSpinning && (
+          <HoliIcon icon={iconBefore} size={iconSize} color={styles.text(disabled, selected, variant).color} />
+        )}
         <View style={styles.textContainer(size)}>
           <Text size={size === 'lg' ? 'md' : 'sm'} colorOveride={styles.text(disabled, selected, variant).color}>
             {labelToShow}
@@ -111,12 +119,12 @@ export const Button = ({
         {isSpinning && (
           <View testID="spinner">
             <SpinningIconContainer spinning={isSpinning}>
-              <HoliIcon icon={Loader} size={16} color={styles.text(disabled, selected, variant).color} />
+              <HoliIcon icon={Loader} size={iconSize} color={styles.text(disabled, selected, variant).color} />
             </SpinningIconContainer>
           </View>
         )}
         {!isSpinning && icon && (
-          <HoliIcon icon={icon} size={16} color={styles.text(disabled, selected, variant).color} />
+          <HoliIcon icon={icon} size={iconSize} color={styles.text(disabled, selected, variant).color} />
         )}
       </View>
     </Pressable>