diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 04859a36d103ab1d361bd3222aedc225f70ce855..fc1c59438aeabe44842a4bd719d83718dfd8b704 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -21,6 +21,7 @@ import { SvgIconComponent } from './svg-icon/svg-icon.component';
 import { TextInputModalComponent } from './text-input-modal/text-input-modal.component';
 import { TrainingTypePickerComponent } from './training-type-picker/training-type-picker.component';
 import { ButtonV3Component } from './v3/button/button.component';
+import { IconButtonV3Component } from './v3/button/icon-button/icon-button.component';
 import { CheckboxV3Component } from './v3/checkbox/checkbox.component';
 import { InputV3Component } from './v3/input/input.component';
 import { LabelCheckboxV3Component } from './v3/label-checkbox/label-checkbox.component';
@@ -67,6 +68,7 @@ export const SharedComponents = [
   CheckboxV3Component,
   CustomModalComponent,
   HourPickerComponent,
+  IconButtonV3Component,
   InformationStepComponent,
   InputV3Component,
   LabelCheckboxV3Component,
diff --git a/src/app/shared/components/v3/button/button.component.scss b/src/app/shared/components/v3/button/button.component.scss
index 12a8f80d3799232c2cff2ef78c980fc48e61f2e8..0e3721e3e94cf517577627fe0dea03115d147fe0 100644
--- a/src/app/shared/components/v3/button/button.component.scss
+++ b/src/app/shared/components/v3/button/button.component.scss
@@ -40,6 +40,12 @@ button {
   }
 
   // VARIANT
+  &.icon-only {
+    height: 32px;
+    width: 32px;
+    padding-inline: 12px;
+  }
+
   &.primary {
     background-color: $red;
     color: $white;
diff --git a/src/app/shared/components/v3/button/button.component.ts b/src/app/shared/components/v3/button/button.component.ts
index 8aa6f10d8d0cbba162c46b9d8693331bc6184275..643e2ecd735597ae50262db99b55e251e1c762be 100644
--- a/src/app/shared/components/v3/button/button.component.ts
+++ b/src/app/shared/components/v3/button/button.component.ts
@@ -32,7 +32,7 @@ export class ButtonV3Component {
   @Input() iconFolder: string = 'ico';
 
   /** Icon name */
-  @Input() iconName: string;
+  @Input() iconName?: string;
 
   /** Click handler */
   @Output() action = new EventEmitter<Event>();
diff --git a/src/app/shared/components/v3/button/icon-button/IconButton.stories.ts b/src/app/shared/components/v3/button/icon-button/IconButton.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e84392a867bbcf9a6864c0fbb8c027b7b7a8dfa9
--- /dev/null
+++ b/src/app/shared/components/v3/button/icon-button/IconButton.stories.ts
@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../../../svg-icon/svg-icon.component';
+import { ButtonTypeV3 } from '../button.type';
+import { IconButtonV3Component } from './icon-button.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<IconButtonV3Component> = {
+  title: 'Components/IconButton',
+  component: IconButtonV3Component,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      declarations: [SvgIconComponent],
+      imports: [CommonModule],
+    }),
+  ],
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<IconButtonV3Component>;
+
+export const Primary: Story = {
+  args: {
+    variant: ButtonTypeV3.PrimaryBlack,
+    disabled: false,
+    iconFolder: 'form',
+    iconName: 'chevronRight',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    variant: ButtonTypeV3.Secondary,
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    ...Primary.args,
+    variant: ButtonTypeV3.Tertiary,
+  },
+};
+
+export const PrimaryDisabled: Story = {
+  args: {
+    ...Primary.args,
+    disabled: true,
+  },
+};
diff --git a/src/app/shared/components/v3/button/icon-button/icon-button.component.html b/src/app/shared/components/v3/button/icon-button/icon-button.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..eeed31fa751b8a641f301b1a5589d6d71e9d6e59
--- /dev/null
+++ b/src/app/shared/components/v3/button/icon-button/icon-button.component.html
@@ -0,0 +1,3 @@
+<button [type]="type" [ngClass]="classes" [disabled]="disabled" (click)="action.emit($event)">
+  <app-svg-icon [type]="iconFolder" [icon]="iconName" [iconColor]="'currentColor'" [iconClass]="'icon-20'" />
+</button>
diff --git a/src/app/shared/components/v3/button/icon-button/icon-button.component.ts b/src/app/shared/components/v3/button/icon-button/icon-button.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..36db43ed05998aad471d0337eebc66aa41de4e84
--- /dev/null
+++ b/src/app/shared/components/v3/button/icon-button/icon-button.component.ts
@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonTypeV3 } from '../button.type';
+
+@Component({
+  selector: 'app-v3-icon-button',
+  templateUrl: './icon-button.component.html',
+  styleUrls: ['../button.component.scss'],
+})
+export class IconButtonV3Component {
+  /** HTML type of the button */
+  @Input() type: 'submit' | 'button' | 'reset' = 'button';
+
+  /** What variant should the button be ? */
+  @Input() variant?: ButtonTypeV3 = ButtonTypeV3.Primary;
+
+  /** Should the button be disabled ? */
+  @Input() disabled?: boolean = false;
+
+  /** Folder of the icon ex: assets/ico */
+  @Input() iconFolder: string = 'ico';
+
+  /** Icon name */
+  @Input() iconName: string;
+
+  /** Click handler */
+  @Output() action = new EventEmitter<Event>();
+
+  public get classes(): string[] {
+    return ['icon-only', this.variant];
+  }
+}