diff --git a/src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.html b/src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.html
index 4e421d0b..9bf3d124 100644
--- a/src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.html
@@ -5,7 +5,7 @@
       <div class="col-md-12">
         <div class="btn-group btn-group-full-width" role="group">
           <button type="button" class="btn btn-primary btn-group-icon btn-group-divider btn-fixed">
-            <i class="ion-ios-home-outline"></i>
+            <i class="nb-home"></i>
           </button>
           <button type="button" class="btn btn-primary">Icon Block Button</button>
         </div>
diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
index bbaf775f..ede1f617 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
@@ -80,25 +80,25 @@
             data-toggle="buttons">
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
               <input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
-              class="ion-ios-americanfootball-outline"></i>
+              class="nb-arrow-thin-down"></i>
             </label>
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
               <input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
-              class="ion-ios-baseball-outline"></i>
+              class="nb-arrow-thin-up"></i>
             </label>
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
-              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="ion-ios-football"></i>
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
             </label>
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
               <input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
-              class="ion-ios-tennisball-outline"></i>
+              class="nb-arrow-thin-right"></i>
             </label>
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
-              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="ion-ios-football-outline"></i>
+              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
             </label>
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
               <input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
-              class="ion-ios-basketball-outline"></i>
+              class="nb-arrow-right"></i>
             </label>
           </div>
         </div>
diff --git a/src/app/pages/ui-features/buttons/buttons.component.html b/src/app/pages/ui-features/buttons/buttons.component.html
index 21e86a7f..336e89f1 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.html
+++ b/src/app/pages/ui-features/buttons/buttons.component.html
@@ -1,9 +1,9 @@
 <div class="row">
   <div class="col-lg-12">
-    <!--<ngx-hero-buttons></ngx-hero-buttons>-->
+    <ngx-hero-buttons></ngx-hero-buttons>
   </div>
   <div class="col-md-12 col-lg-12 col-xxxl-6">
-    <!--<ngx-shape-buttons></ngx-shape-buttons>-->
+    <ngx-shape-buttons></ngx-shape-buttons>
     <ngx-action-groups></ngx-action-groups>
     <ngx-labeled-actions-group></ngx-labeled-actions-group>
 
diff --git a/src/app/pages/ui-features/buttons/buttons.component.scss b/src/app/pages/ui-features/buttons/buttons.component.scss
index 95944ad2..ccadd15e 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/buttons.component.scss
@@ -61,24 +61,6 @@
     .block-level-buttons .btn-group {
       margin-bottom: 1rem;
     }
-
-    .icon-buttons .btn-group:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-
-    .icon-buttons .icon-button-examples {
-      display: flex;
-      justify-content: flex-start;
-
-      button {
-        margin-right: 2rem;
-        min-width: 4rem;
-      }
-    }
-
-    .icon-buttons .icon-button-examples:not(:last-child) {
-      margin-bottom: 1rem;
-    }
   }
 
   @include media-breakpoint-down(is) {
diff --git a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
index 94f40af1..edf53dff 100644
--- a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
@@ -5,36 +5,36 @@
       <div class="col-md-12">
         <div class="btn-group">
           <button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
-            <i class="ion-ios-home-outline"></i>
+            <i class="nb-home"></i>
           </button>
           <button type="button" class="btn btn-primary">Icon Button</button>
         </div>
         <div class="btn-with-icon-example">
           <button type="button" class="btn btn-primary btn-with-icon">
-            <i class="icon ion-ios-home-outline"></i>
+            <i class="nb-home"></i>
             <span>Icon Button</span>
           </button>
         </div>
         <div class="icon-button-examples">
           <button type="button" class="btn btn-outline-primary btn-icon">
-            <i class="ion-paper-airplane"></i>
+            <i class="nb-layout-centre"></i>
           </button>
           <button type="button" class="btn btn-outline-success btn-icon">
-            <i class="ion-ios-cloud-download-outline"></i>
+            <i class="nb-layout-default"></i>
           </button>
           <button type="button" class="btn btn-outline-danger btn-icon">
-            <i class="ion-ios-sunny-outline"></i>
+            <i class="nb-layout-one-column"></i>
           </button>
         </div>
         <div class="icon-button-examples">
           <button type="button" class="btn btn-primary btn-icon">
-            <i class="ion-plus"></i>
+            <i class="nb-shuffle"></i>
           </button>
           <button type="button" class="btn btn-success btn-icon">
-            <i class="ion-ios-home-outline"></i>
+            <i class="nb-skip-backward-outline"></i>
           </button>
           <button type="button" class="btn btn-danger btn-icon">
-            <i class="ion-ios-gear-outline"></i>
+            <i class="nb-skip-forward-outline"></i>
           </button>
         </div>
       </div>
diff --git a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss
index c3767626..7d680af5 100644
--- a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss
@@ -11,3 +11,21 @@ nb-card-body {
     width: 100%;
   }
 }
+
+.btn-group:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.icon-button-examples {
+  display: flex;
+  justify-content: flex-start;
+
+  button {
+    margin-right: 2rem;
+    min-width: 4rem;
+  }
+}
+
+.icon-button-examples:not(:last-child) {
+  margin-bottom: 1rem;
+}