diff --git a/assets/dev/scss/frontend/general/_button.scss b/assets/dev/scss/frontend/general/_button.scss
index 4977220c769..4e23c56a2b0 100644
--- a/assets/dev/scss/frontend/general/_button.scss
+++ b/assets/dev/scss/frontend/general/_button.scss
@@ -1,4 +1,11 @@
 // Shared button style.
+.elementor-widget-button {
+	--button-flex-direction: row;
+	--button-align-self: initial;
+	--button-icon-transition: all 0.3s;
+	--button-icon-display: initial;
+}
+
 .elementor-button {
 	display: inline-block;
 	line-height: 1;
@@ -9,7 +16,7 @@
 	color: #fff;
 	fill: #fff;
 	text-align: center;
-	transition: $transition-hover;
+	transition: var(--button-icon-transition);
 
 	&:hover,
 	&:focus,
@@ -20,18 +27,24 @@
 	&-content-wrapper {
 		display: flex;
 		justify-content: center;
-		flex-direction: row;
+		flex-direction: var(--button-flex-direction);
 		gap: 5px;
 	}
 
 	&-icon {
-		svg {
-			width: 1em;
-			height: auto;
+		display: var(--button-icon-display);
+
+		i {
+			color: var(--button-icon-color, inherit);
+			font-size: var(--button-icon-size);
+			transition: var(--button-icon-transition);
 		}
 
-		.e-font-icon-svg {
-			height: 1em;
+		svg {
+			height: var(--button-icon-size, 1em);
+			width: auto;
+			fill: var(--button-icon-color, inherit);
+			transition: var(--button-icon-transition);
 		}
 	}
 
@@ -83,6 +96,21 @@
 
 	span {
 		text-decoration: inherit; //fix for conflict with text-decoration & inline-block
+		align-self: var(--button-align-self);
+	}
+
+	&:hover {
+
+		.elementor-button-icon {
+
+			i {
+				color: var(--button-icon-color-hover);
+			}
+
+			svg {
+				fill: var(--button-icon-color-hover);
+			}
+		}
 	}
 }
 
diff --git a/includes/widgets/button.php b/includes/widgets/button.php
index 7040959a708..dad9156d837 100644
--- a/includes/widgets/button.php
+++ b/includes/widgets/button.php
@@ -126,6 +126,18 @@ protected function register_controls() {
 		$this->register_button_style_controls();
 
 		$this->end_controls_section();
+
+		$this->start_controls_section(
+			'section_style_icon',
+			[
+				'label' => esc_html__( 'Icon', 'elementor' ),
+				'tab' => Controls_Manager::TAB_STYLE,
+			]
+		);
+
+		$this->register_icon_style_controls();
+
+		$this->end_controls_section();
 	}
 
 	/**
diff --git a/includes/widgets/traits/button-trait.php b/includes/widgets/traits/button-trait.php
index a1437f99a9d..666a9ac12a1 100644
--- a/includes/widgets/traits/button-trait.php
+++ b/includes/widgets/traits/button-trait.php
@@ -132,72 +132,6 @@ protected function register_button_content_controls( $args = [] ) {
 			]
 		);
 
-		$start = is_rtl() ? 'right' : 'left';
-		$end = is_rtl() ? 'left' : 'right';
-
-		$this->add_control(
-			'icon_align',
-			[
-				'label' => esc_html__( 'Icon Position', 'elementor' ),
-				'type' => Controls_Manager::CHOOSE,
-				'default' => is_rtl() ? 'row-reverse' : 'row',
-				'options' => [
-					'row' => [
-						'title' => esc_html__( 'Start', 'elementor' ),
-						'icon' => "eicon-h-align-{$start}",
-					],
-					'row-reverse' => [
-						'title' => esc_html__( 'End', 'elementor' ),
-						'icon' => "eicon-h-align-{$end}",
-					],
-				],
-				'selectors_dictionary' => [
-					'left' => is_rtl() ? 'row-reverse' : 'row',
-					'right' => is_rtl() ? 'row' : 'row-reverse',
-				],
-				'selectors' => [
-					'{{WRAPPER}} .elementor-button-content-wrapper' => 'flex-direction: {{VALUE}};',
-				],
-				'condition' => array_merge(
-					$args['section_condition'],
-					[
-						'text!' => '',
-						'selected_icon[value]!' => '',
-					]
-				),
-			]
-		);
-
-		$this->add_control(
-			'icon_indent',
-			[
-				'label' => esc_html__( 'Icon Spacing', 'elementor' ),
-				'type' => Controls_Manager::SLIDER,
-				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
-				'range' => [
-					'px' => [
-						'max' => 50,
-					],
-					'em' => [
-						'max' => 5,
-					],
-					'rem' => [
-						'max' => 5,
-					],
-				],
-				'selectors' => [
-					'{{WRAPPER}} .elementor-button .elementor-button-content-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
-				],
-				'condition' => array_merge(
-					$args['section_condition'],
-					[
-						'text!' => '',
-						'selected_icon[value]!' => '',
-					]
-				),
-			]
-		);
-
 		$this->add_control(
 			'button_css_id',
 			[
@@ -438,7 +372,7 @@ protected function register_button_style_controls( $args = [] ) {
 					'unit' => 's',
 				],
 				'selectors' => [
-					'{{WRAPPER}} .elementor-button' => 'transition-duration: {{SIZE}}{{UNIT}};',
+					'{{WRAPPER}}' => '--button-icon-transition: {{SIZE}}{{UNIT}};',
 				],
 			]
 		);
@@ -503,6 +437,162 @@ protected function register_button_style_controls( $args = [] ) {
 		);
 	}
 
+	protected function register_icon_style_controls( $args = [] ) {
+		$default_args = [
+			'section_condition' => [],
+			'alignment_default' => '',
+			'alignment_control_prefix_class' => 'elementor%s-align-',
+			'content_alignment_default' => '',
+		];
+
+		$args = wp_parse_args( $args, $default_args );
+
+		$start = is_rtl() ? 'right' : 'left';
+		$end = is_rtl() ? 'left' : 'right';
+
+		$this->add_control(
+			'icon_align',
+			[
+				'label' => esc_html__( 'Position', 'elementor' ),
+				'type' => Controls_Manager::CHOOSE,
+				'options' => [
+					'row' => [
+						'title' => esc_html__( 'Start', 'elementor' ),
+						'icon' => "eicon-h-align-{$start}",
+					],
+					'row-reverse' => [
+						'title' => esc_html__( 'End', 'elementor' ),
+						'icon' => "eicon-h-align-{$end}",
+					],
+					'column' => [
+						'title' => esc_html__( 'Above', 'elementor' ),
+						'icon' => 'eicon-v-align-top',
+					],
+					'column-reverse' => [
+						'title' => esc_html__( 'Below', 'elementor' ),
+						'icon' => 'eicon-v-align-bottom',
+					],
+				],
+				'selectors_dictionary' => [
+					'left' => is_rtl() ? '--button-flex-direction: row-reverse' : '--button-flex-direction: row',
+					'right' => is_rtl() ? '--button-flex-direction: row' : '--button-flex-direction: row-reverse',
+					'row' => '--button-flex-direction: row',
+					'row-reverse' => '--button-flex-direction: row-reverse',
+					'column' => '--button-flex-direction: column; --button-align-self: center; --button-icon-display: flex;',
+					'column-reverse' => '--button-flex-direction: column-reverse; --button-align-self: center; --button-icon-display: flex;',
+				],
+				'selectors' => [
+					'{{WRAPPER}}' => '{{VALUE}};',
+				],
+				'condition' => array_merge(
+					$args['section_condition'],
+					[
+						'text!' => '',
+						'selected_icon[value]!' => '',
+					]
+				),
+			]
+		);
+
+		$this->add_responsive_control(
+			'icon_size',
+			[
+				'label' => esc_html__( 'Size', 'elementor' ),
+				'type' => Controls_Manager::SLIDER,
+				'range' => [
+					'px' => [
+						'max' => 100,
+					],
+					'em' => [
+						'max' => 10,
+					],
+					'rem' => [
+						'max' => 10,
+					],
+				],
+				'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
+				'selectors' => [
+					'{{WRAPPER}}' => '--button-icon-size: {{SIZE}}{{UNIT}}; --button-icon-display: flex; --button-align-self: center;',
+				],
+        ]);
+
+		$this->add_control(
+			'icon_indent',
+			[
+				'label' => esc_html__( 'Spacing', 'elementor' ),
+				'type' => Controls_Manager::SLIDER,
+				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
+				'range' => [
+					'px' => [
+						'max' => 50,
+					],
+					'em' => [
+						'max' => 5,
+					],
+					'rem' => [
+						'max' => 5,
+					],
+				],
+				'selectors' => [
+					'{{WRAPPER}} .elementor-button .elementor-button-content-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
+				],
+				'condition' => array_merge(
+					$args['section_condition'],
+					[
+						'text!' => '',
+						'selected_icon[value]!' => '',
+					]
+				),
+		]);
+
+		$this->start_controls_tabs(
+			'icons_button_style',
+		    [
+			'condition' => $args['section_condition'],
+		]);
+
+		$this->start_controls_tab(
+			'icon_button_normal',
+		    [
+                'label' => esc_html__( 'Normal', 'elementor' ),
+			    'condition' => $args['section_condition'],
+		]);
+
+		$this->add_control(
+			'icon_color', 
+		    [
+			'label' => esc_html__( 'Color', 'elementor' ),
+			'type' => Controls_Manager::COLOR,
+			'selectors' => [
+				'{{WRAPPER}}' => '--button-icon-color: {{VALUE}};',
+			],
+		]);
+
+		$this->end_controls_tab();
+
+		$this->start_controls_tab(
+			'icon_button_hover',
+            [
+				'label' => esc_html__( 'Hover', 'elementor' ),
+				'condition' => $args['section_condition'],
+        ]);
+
+		$this->add_control(
+			'icon_color_hover',
+		    [
+			'label' => esc_html__( 'Color', 'elementor' ),
+			'type' => Controls_Manager::COLOR,
+			'selectors' => [
+				'{{WRAPPER}}' => '--button-icon-color-hover: {{VALUE}};',
+			],
+        ]);
+
+		$this->end_controls_tab();
+
+		$this->end_controls_tabs();
+
+	}
+
 	/**
 	 * Render button widget output on the frontend.
 	 *