Replace all glyphicon icons

42 files changed, 230 insertions, 234 deletions

diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index 6449f5064..3c775cac5 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
@@ -28,13 +28,6 @@ tr.banned > td {
   @include margin-left(15px);
 }
 
-.user-table-primary-text .glyphicon {
-  @include margin-left(0.1rem);
-
-  font-size: 80%;
-  color: #808080;
-}
-
 p-tableCheckbox {
   position: relative;
   top: -2.5px;
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index eadaf7904..4a76f1783 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -44,10 +44,6 @@
   }
 }
 
-td .glyphicon {
-  @include margin-right(10px);
-}
-
 pre {
   font-size: 11px;
 }
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.scss b/client/src/app/+my-library/my-follows/my-followers.component.scss
index fae4cd972..d8c5f9cff 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.scss
+++ b/client/src/app/+my-library/my-follows/my-followers.component.scss
@@ -16,11 +16,5 @@ input[type=text] {
 
   .actor-display-name {
     font-size: 16px;
-
-    + .glyphicon {
-      @include margin-left(5px);
-
-      font-size: 12px;
-    }
   }
 }
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
index d32477270..a8450ff1b 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
@@ -55,13 +55,6 @@
     color: pvar(--mainForegroundColor);
     line-height: 1rem;
 
-    div .glyphicon {
-      @include margin-left(0.1rem);
-
-      font-size: 80%;
-      color: #808080;
-    }
-
     div + div {
       font-size: 80%;
     }
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index eca821370..a54df97cd 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -65,7 +65,7 @@
           [redraftValue]="commentReplyRedraftValue"
         >
           <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
-            <span class="glyphicon glyphicon-menu-down"></span>
+            <span class="chevron-down"></span>
 
             <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
 
@@ -80,7 +80,7 @@
 
             <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
 
-            <my-loader size="sm" class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-loader>
+            <my-loader size="sm" class="ms-1" [loading]="threadLoading[comment.id]"></my-loader>
           </div>
         </my-video-comment>
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
index 31aa73937..4b00683ab 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
@@ -11,14 +11,6 @@
   cursor: pointer;
 }
 
-.glyphicon,
-.comment-thread-loading {
-  @include margin-right(5px);
-
-  display: inline-block;
-  font-size: 13px;
-}
-
 .title-block {
   .title-page {
     @include margin-right(0);
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index d08e2f0fb..783b4b53b 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -26,7 +26,6 @@
         <label class="small-title" i18n>GLOBAL SEARCH</label>
         <div class="advanced-search-status muted">
           <span *ngIf="serverConfig" class="me-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
-          <i class="glyphicon glyphicon-globe"></i>
         </div>
       </div>
       <div class="muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
@@ -41,7 +40,6 @@
           <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
             <span *ngIf="canSearchAnyURI()" class="me-1" i18n>any instance</span>
             <span *ngIf="!canSearchAnyURI()" class="me-1" i18n>only followed instances</span>
-            <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
           </span>
         </div>
       </div>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 5114ec3a7..e4c9c602c 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -129,10 +129,6 @@ li.suggestion {
   }
 }
 
-.glyphicon {
-  top: 3px;
-}
-
 .advanced-search-status {
   height: max-content;
   cursor: default;
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c52af6c80..352682bfc 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -352,10 +352,6 @@ my-actor-avatar {
   display: flex;
   align-items: center;
 
-  i.glyphicon-menu-right {
-    opacity: .4;
-  }
-
   &:hover {
     .hover-display-toggle {
       display: none;
diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html
index 5aa834f36..890b086f1 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -24,14 +24,19 @@
       <div>
         <button
           *ngIf="unreadNotifications"
-          i18n-title title="Mark all as read" class="glyphicon glyphicon-ok me-2"
+          i18n-title title="Mark all as read" class="me-2"
           (click)="markAllAsRead()"
-        ></button>
+        >
+          <my-global-icon iconName="tick"></my-global-icon>
+        </button>
+
         <a
-          i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog"
+          i18n-title title="Update your notification preferences"
           routerLink="/my-account/settings" fragment="notifications"
           #settingsNotifications (click)="onNavigate(settingsNotifications)"
-        ></a>
+        >
+          <my-global-icon iconName="cog"></my-global-icon>
+        </a>
       </div>
     </div>
 
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index 3515c3e19..7f72c98d1 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -119,6 +119,10 @@
             color: rgba(20, 20, 20, 0.8);
           }
         }
+
+        my-global-icon {
+          width: 20px;
+        }
       }
 
       .all-notifications {
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index bb87279d7..b04d46e32 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -19,7 +19,8 @@
         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
           class="ms-auto muted abuse-details-links" i18n
         >
-          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span>
+          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}
+          <my-global-icon iconName="flag"></my-global-icon>
         </a>
       </span>
     </div>
@@ -39,7 +40,8 @@
         <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
           class="ms-auto muted abuse-details-links" i18n
         >
-          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span>
+          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}
+          <my-global-icon iconName="flag"></my-global-icon>
         </a>
       </span>
     </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
index 37bf4cc56..bd43ed459 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@@ -15,3 +15,7 @@
 .abuse-details-links {
   @include disable-default-a-behaviour;
 }
+
+my-global-icon[iconName=flag] {
+  width: 15px;
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 6d1de808d..f79054d03 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -70,7 +70,7 @@
             </span>
 
             <span name>
-              <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
+              <my-global-icon *ngIf="abuse.video.blacklisted" iconName="no" i18n-title title="The video was blocked"></my-global-icon>
             </span>
           </my-video-cell>
         </td>
@@ -80,7 +80,7 @@
             <div class="table-video-text">
               <div>
                 {{ abuse.video.name }}
-                <span class="glyphicon glyphicon-trash"></span>
+                <my-global-icon iconName="delete"></my-global-icon>
               </div>
               <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
             </div>
@@ -116,8 +116,8 @@
       <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short'  }}</td>
 
       <td class="c-hand abuse-states" [pRowToggler]="abuse">
-        <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span>
-        <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span>
+        <my-global-icon *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" iconName="tick"></my-global-icon>
+        <my-global-icon *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" iconName="cross"></my-global-icon>
       </td>
 
       <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index 2d8acae58..4852f2e8b 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -7,10 +7,6 @@
   color: var(--greyForegroundColor);
 }
 
-.abuse-states .glyphicon-comment {
-  @include margin-left(0.5rem);
-}
-
 .abuse-messages {
   my-global-icon {
     @include margin-left(3px);
@@ -20,3 +16,10 @@
     top: -2px;
   }
 }
+
+.table-video-text my-global-icon,
+my-video-cell my-global-icon {
+  width: 15px;
+  position: relative;
+  top: -2px;
+}
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index 1d6b3df7e..e4f318385 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -25,5 +25,5 @@
     (keyup)="onInputSearch($event)"
   >
 
-  <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></a>
+  <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></my-global-icon>
 </div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
index f7f9ce403..669b5f32e 100644
--- a/client/src/app/shared/shared-forms/input-text.component.html
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -5,8 +5,9 @@
     #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
   />
 
-  <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle">
-    <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
+  <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
+    <my-global-icon *ngIf="show" iconName="sensitive"></my-global-icon>
+    <my-global-icon *ngIf="!show" iconName="unsensitive"></my-global-icon>
   </button>
 
   <button
diff --git a/client/src/app/shared/shared-forms/input-text.component.scss b/client/src/app/shared/shared-forms/input-text.component.scss
index cc1646a69..253793196 100644
--- a/client/src/app/shared/shared-forms/input-text.component.scss
+++ b/client/src/app/shared/shared-forms/input-text.component.scss
@@ -9,10 +9,8 @@ input {
 
 .btn {
   font-size: 15px;
-}
 
-my-global-icon {
-  width: 18px;
+  @include button-with-icon(18px);
 }
 
 .copy-text {
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index ed4637c17..d9722e6c6 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -1,6 +1,7 @@
 import { Component, forwardRef, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
+import { GlobalIconName } from '../shared-icons'
 
 @Component({
   selector: 'my-input-text',
@@ -47,6 +48,12 @@ export class InputTextComponent implements ControlValueAccessor {
     this.notifier.success($localize`Copied`)
   }
 
+  getEyeIcon (): GlobalIconName {
+    if (this.show) return 'sensitive'
+
+    return 'unsensitive'
+  }
+
   propagateChange = (_: any) => { /* empty */ }
 
   writeValue (value: string) {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index 43c407743..8b864fd5f 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -91,6 +91,7 @@ export type GlobalIconName = keyof typeof icons
 })
 export class GlobalIconComponent implements OnInit {
   @Input() iconName: GlobalIconName
+  @Input() width: string
 
   constructor (
     private el: ElementRef,
@@ -106,6 +107,10 @@ export class GlobalIconComponent implements OnInit {
       'filter:internal.common.svg-icons.get-content.params',
       'filter:internal.common.svg-icons.get-content.result'
     )
+
+    if (this.width) {
+      nativeElement.style.width = this.width
+    }
   }
 
   private getSVGContent (options: { name: string }) {
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.html b/client/src/app/shared/shared-instance/feature-boolean.component.html
index ccb8a30cc..6de5d2075 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.html
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.html
@@ -1,3 +1,2 @@
-<span *ngIf="value === true" class="glyphicon glyphicon-ok" i18n-aria-label aria-label="yes"></span>
-<span *ngIf="value === false" class="glyphicon glyphicon-remove" i18n-aria-label aria-label="no"></span>
-
+<my-global-icon *ngIf="value === true" iconName="tick" i18n-aria-label aria-label="yes"></my-global-icon>
+<my-global-icon *ngIf="value === false" iconName="cross" i18n-aria-label aria-label="no"></my-global-icon>
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.scss b/client/src/app/shared/shared-instance/feature-boolean.component.scss
index 8683ecc55..29b8c3e02 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.scss
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.scss
@@ -1,10 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.glyphicon-ok {
+my-global-icon[iconName=tick] {
   color: $green;
 }
 
-.glyphicon-remove {
+my-global-icon[iconName=cross] {
   color: $red;
 }
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.html b/client/src/app/shared/shared-instance/instance-statistics.component.html
index 2ca61fd94..960520680 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.html
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.html
@@ -10,7 +10,7 @@
           <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
           <p class="stat-label" i18n>users</p>
         </div>
-        <i class="glyphicon glyphicon-user icon-bottom"></i>
+        <my-global-icon iconName="user"></my-global-icon>
       </div>
     </div>
 
@@ -20,7 +20,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
           <p class="stat-label" i18n>videos</p>
         </div>
-        <i class="glyphicon glyphicon-facetime-video"></i>
+        <my-global-icon iconName="film"></my-global-icon>
       </div>
     </div>
 
@@ -30,7 +30,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
           <p class="stat-label" i18n>views</p>
         </div>
-        <i class="glyphicon glyphicon-eye-open"></i>
+        <my-global-icon iconName="sensitive"></my-global-icon>
       </div>
     </div>
 
@@ -40,7 +40,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
           <p class="stat-label" i18n>comments</p>
         </div>
-        <i class="glyphicon glyphicon-comment"></i>
+        <my-global-icon iconName="message-circle"></my-global-icon>
       </div>
     </div>
 
@@ -50,7 +50,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
           <p class="stat-label" i18n>hosted video</p>
         </div>
-        <i class="glyphicon glyphicon-hdd"></i>
+        <my-global-icon iconName="home"></my-global-icon>
       </div>
     </div>
   </div>
@@ -64,7 +64,7 @@
           <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
           <p class="stat-label" i18n>videos</p>
         </div>
-        <i class="glyphicon glyphicon-facetime-video"></i>
+        <my-global-icon iconName="film"></my-global-icon>
       </div>
     </div>
 
@@ -74,7 +74,7 @@
           <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
           <p class="stat-label" i18n>comments</p>
         </div>
-        <i class="glyphicon glyphicon-comment"></i>
+        <my-global-icon iconName="message-circle"></my-global-icon>
       </div>
     </div>
 
@@ -84,7 +84,7 @@
           <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
           <p class="stat-label" i18n>followers</p>
         </div>
-        <i class="glyphicon glyphicon-retweet"></i>
+        <my-global-icon iconName="share"></my-global-icon>
       </div>
     </div>
 
@@ -94,7 +94,7 @@
           <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
           <p class="stat-label" i18n>following</p>
         </div>
-        <i class="glyphicon glyphicon-retweet"></i>
+        <my-global-icon iconName="globe"></my-global-icon>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.scss b/client/src/app/shared/shared-instance/instance-statistics.component.scss
index 5286ab03a..e1d489d28 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.scss
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.scss
@@ -1,3 +1,5 @@
+@use '_variables' as *;
+@use '_mixins' as *;
 
 h3 {
   font-size: 1.25rem;
@@ -19,22 +21,19 @@ h3 {
     margin: 0;
   }
 
-  .glyphicon {
-    opacity: 0.12;
-    position: absolute;
-    left: 16px;
-    top: -24px;
-
-    &.icon-bottom {
-      top: 4px;
-    }
-
-    &::before {
-      font-size: 8em;
-    }
-  }
-
   .card-body {
     z-index: 2;
   }
 }
+
+my-global-icon {
+  opacity: 0.12;
+  position: absolute;
+  left: 16px;
+  top: -24px;
+  width: 110px;
+
+  &.icon-bottom {
+    top: 4px;
+  }
+}
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index 13c681ab8..dfce88e11 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,6 +1,7 @@
 
 import { NgModule } from '@angular/core'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
+import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { FeatureBooleanComponent } from './feature-boolean.component'
 import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@@ -12,6 +13,7 @@ import { InstanceService } from './instance.service'
 @NgModule({
   imports: [
     SharedMainModule,
+    SharedGlobalIconModule,
     NgbAccordionModule
   ],
 
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index ce8685a09..bd038f8b5 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -12,7 +12,7 @@ export class LoaderComponent {
     sm: {
       width: '1rem',
       height: '1rem',
-      'border-width': '.2em'
+      'border-width': '0.15rem'
     },
     xl: {
       width: '3rem',
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index 11f5a1ab0..ae57ca5b7 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -10,7 +10,7 @@
       [placeholder]="placeholder"
     >
 
-    <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></a>
+    <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
   </div>
 
   <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index d5fcff760..ee0f7a8d2 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -5,7 +5,7 @@
   display: flex;
 }
 
-my-global-icon {
+.root > my-global-icon {
   @include margin-left(10px);
 
   height: 28px;
@@ -25,3 +25,7 @@ input {
     box-shadow: 0 0 5px 0 #a5a5a5;
   }
 }
+
+.input-group > my-global-icon {
+  width: 20px;
+}
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 0658ae962..1b99a6c1e 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -266,7 +266,7 @@
              [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
 
           <ng-container *ngIf="isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-down"></span>
+            <span class="chevron-down"></span>
 
             <ng-container i18n>
               More customization
@@ -274,7 +274,7 @@
           </ng-container>
 
           <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-up"></span>
+            <span class="chevron-up"></span>
 
             <ng-container i18n>
               Less customization
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 6123bc517..611291981 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -49,10 +49,6 @@ my-input-text {
     font-size: 16px;
     font-weight: $font-semibold;
     cursor: pointer;
-
-    .glyphicon {
-      @include margin-right(5px);
-    }
   }
 
   .video-caption-block {
diff --git a/client/src/app/shared/shared-tables/table-expander-icon.component.ts b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
index 3756b475a..66bbfe6fb 100644
--- a/client/src/app/shared/shared-tables/table-expander-icon.component.ts
+++ b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core'
   selector: 'my-table-expander-icon',
   template: `
 <span class="expander">
-    <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+    <i [ngClass]="expanded ? 'chevron-down' : 'chevron-right'"></i>
 </span>`
 })
 export class TableExpanderIconComponent {
diff --git a/client/src/app/shared/shared-tables/video-cell.component.scss b/client/src/app/shared/shared-tables/video-cell.component.scss
index 7efb61502..5d26b02ef 100644
--- a/client/src/app/shared/shared-tables/video-cell.component.scss
+++ b/client/src/app/shared/shared-tables/video-cell.component.scss
@@ -59,13 +59,6 @@
     color: pvar(--mainForegroundColor);
     line-height: 1rem;
 
-    div .glyphicon {
-      @include margin-left(0.1rem);
-
-      font-size: 80%;
-      color: #808080;
-    }
-
     div + div {
       color: var(--greyForegroundColor);
       font-size: 11px;
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index e8990747a..1c7458b4b 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -120,7 +120,7 @@
         [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
       >
         <ng-container *ngIf="isAdvancedCustomizationCollapsed">
-          <span class="glyphicon glyphicon-menu-down"></span>
+          <span class="chevron-down"></span>
 
           <ng-container i18n>
             Advanced
@@ -128,7 +128,7 @@
         </ng-container>
 
         <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-          <span class="glyphicon glyphicon-menu-up"></span>
+          <span class="chevron-up"></span>
 
           <ng-container i18n>
             Simple
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index bd42f4813..eb9c57b2f 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -17,10 +17,6 @@
   .nav-tabs {
     margin-top: 10x;
   }
-
-  .glyphicon {
-    @include margin-right(5px);
-  }
 }
 
 .peertube-select-container.title-select {
diff --git a/client/src/assets/images/feather/skip-back.svg b/client/src/assets/images/feather/skip-back.svg
new file mode 100644
index 000000000..672e94d5f
--- /dev/null
+++ b/client/src/assets/images/feather/skip-back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-back"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg>
\ No newline at end of file
diff --git a/client/src/assets/images/feather/skip-forward.svg b/client/src/assets/images/feather/skip-forward.svg
new file mode 100644
index 000000000..f3fdac3ae
--- /dev/null
+++ b/client/src/assets/images/feather/skip-forward.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
\ No newline at end of file
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 2ad1af23a..2aa743cf1 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,19 +1,15 @@
-$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-
 @use 'sass:math';
 
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '_icons' as *;
 
 @use '_fonts';
 
 @use './classes';
-
 @use './custom-markup';
-
 @use './ng-select';
 
-// Needs an import because we extends glyphicon icons in primeng
 @import './bootstrap';
 @import './primeng-custom';
 
@@ -316,15 +312,27 @@ my-global-icon[iconName=external-link] {
 }
 
 .chevron-down {
-  @include chevron-down(0.55rem, 0.20em);
+  @include chevron-down(0.55rem, 0.15rem);
 
-  margin: 0 5px;
+  margin: 0 8px;
 }
 
 .chevron-up {
-  @include chevron-up(0.55rem, 0.20em);
+  @include chevron-up(0.55rem, 0.15rem);
+
+  margin: 0 8px;
+}
+
+.chevron-right {
+  @include chevron-right(0.55rem, 0.15rem);
+
+  margin: 0 8px;
+}
+
+.chevron-left {
+  @include chevron-left(0.55rem, 0.15rem);
 
-  margin: 0 5px;
+  margin: 0 8px;
 }
 
 /* offsetTop for scrollToAnchor */
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 03b2e8b15..4d2fcf5b3 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,5 +1,3 @@
-$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-
 @use '_variables' as *;
 @use '_mixins' as *;
 
@@ -31,8 +29,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 @import '~bootstrap/scss/helpers';
 @import '~bootstrap/scss/utilities/api';
 
-@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
-
 .flex-auto {
   flex: auto;
 }
diff --git a/client/src/sass/include/_icons.scss b/client/src/sass/include/_icons.scss
new file mode 100644
index 000000000..5d8a312db
--- /dev/null
+++ b/client/src/sass/include/_icons.scss
@@ -0,0 +1,58 @@
+@use '_variables' as *;
+
+@mixin chevron ($size, $border-width) {
+  border-style: solid;
+  border-width: $border-width $border-width 0 0;
+  content: '';
+  display: inline-block;
+  transform: rotate(-45deg);
+  height: $size;
+  width: $size;
+  position: relative;
+}
+
+@mixin chevron-right ($size, $border-width) {
+  @include chevron($size, $border-width);
+
+  left: 0;
+  transform: rotate(45deg);
+}
+
+@mixin chevron-down ($size, $border-width) {
+  @include chevron($size, $border-width);
+
+  bottom: 0.15em;
+  transform: rotate(135deg);
+}
+
+@mixin chevron-up ($size, $border-width) {
+  @include chevron($size, $border-width);
+
+  top: 0.15em;
+  transform: rotate(-45deg);
+}
+
+@mixin chevron-left ($size, $border-width) {
+  @include chevron($size, $border-width);
+
+  left: 0.25em;
+  transform: rotate(-135deg);
+}
+
+// ---------------------------------------------------------------------------
+
+@mixin arrow-up ($size) {
+  width: 0;
+  height: 0;
+  border-left: $size solid transparent;
+  border-right: $size solid transparent;
+  border-bottom: $size solid pvar(--mainForegroundColor);
+}
+
+@mixin arrow-down ($size) {
+  width: 0;
+  height: 0;
+  border-left: $size solid transparent;
+  border-right: $size solid transparent;
+  border-top: $size solid pvar(--mainForegroundColor);
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index da216b00f..22c3b2a2f 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -562,45 +562,6 @@
   }
 }
 
-@mixin chevron ($size, $border-width) {
-  border-style: solid;
-  border-width: $border-width $border-width 0 0;
-  content: '';
-  display: inline-block;
-  transform: rotate(-45deg);
-  height: $size;
-  width: $size;
-  position: relative;
-}
-
-@mixin chevron-right ($size, $border-width) {
-  @include chevron($size, $border-width);
-
-  left: 0;
-  transform: rotate(45deg);
-}
-
-@mixin chevron-down ($size, $border-width) {
-  @include chevron($size, $border-width);
-
-  bottom: 0.15em;
-  transform: rotate(135deg);
-}
-
-@mixin chevron-up ($size, $border-width) {
-  @include chevron($size, $border-width);
-
-  top: 0.15em;
-  transform: rotate(-45deg);
-}
-
-@mixin chevron-left ($size, $border-width) {
-  @include chevron($size, $border-width);
-
-  left: 0.25em;
-  transform: rotate(-135deg);
-}
-
 @mixin in-content-small-title {
   text-transform: uppercase;
   color: pvar(--mainColor);
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 8aa2c2ac3..d2346c126 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '_icons' as *;
 @use './_player-variables' as *;
 
 $setting-transition-duration: 0.15s;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index ef117ae34..f5d7c7b00 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '_icons' as *;
 
 /* stylelint-disable */
 @import '~primeng/resources/primeng.css';
@@ -495,14 +496,9 @@ body p-selectbutton.ng-dirty.ng-invalid .p-button {
   border: 1px solid #a80000;
 }
 
-// data table customizations
-
-@mixin glyphicon-light {
-  font-family: 'Glyphicons Halflings';
-  text-decoration: none !important;
-  color: pvar(--mainForegroundColor) !important;
-  font-display: swap;
-}
+// ---------------------------------------------------------------------------
+// PeerTube customizations
+// ---------------------------------------------------------------------------
 
 p-table {
   .p-datatable-header {
@@ -618,24 +614,20 @@ p-table {
     &.p-highlight {
       background-color: pvar(--submenuBackgroundColor) !important;
 
-      .pi {
-        @extend .glyphicon !optional;
-
-        color: #000 !important;
-        font-size: 11px !important;
-        top: 0 !important;
-
-        &.pi-sort-amount-up-alt {
-          @extend .glyphicon-triangle-top !optional;
-
-          color: pvar(--mainForegroundColor) !important;
-        }
+      .pi-sort-amount-up-alt,
+      .pi-sort-amount-down {
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        color: pvar(--mainForegroundColor) !important;
+      }
 
-        &.pi-sort-amount-down {
-          @extend .glyphicon-triangle-bottom !optional;
+      .pi-sort-amount-up-alt {
+        @include arrow-up(5px);
+      }
 
-          color: pvar(--mainForegroundColor) !important;
-        }
+      .pi-sort-amount-down {
+        @include arrow-down(5px);
       }
     }
   }
@@ -693,12 +685,10 @@ p-table {
       .p-paginator-prev,
       .p-paginator-next,
       .p-paginator-last {
-        @include glyphicon-light;
         padding: 5px 2px;
-        height: auto;
+        height: 100%;
         outline: none;
-        font-size: 13px;
-        top: -1px;
+        color: pvar(--mainForegroundColor);
 
         &.focus-within,
         &:focus {
@@ -710,23 +700,37 @@ p-table {
         }
 
         &.p-paginator-first {
-          @extend .glyphicon-step-backward !optional;
+          .p-paginator-icon {
+            width: 18px;
+            height: 18px;
+            background: url('../assets/images/feather/skip-back.svg') no-repeat;
+            background-size: contain;
+          }
         }
 
         &.p-paginator-prev {
-          @extend .glyphicon-chevron-left !optional;
+          .p-paginator-icon {
+            @extend .chevron-left !optional;
+          }
 
           @include margin-right(10px);
         }
 
         &.p-paginator-next {
-          @extend .glyphicon-chevron-right !optional;
+          .p-paginator-icon {
+            @extend .chevron-right !optional;
+          }
 
           @include margin-left(10px);
         }
 
         &.p-paginator-last {
-          @extend .glyphicon-step-forward !optional;
+          .p-paginator-icon {
+            width: 18px;
+            height: 18px;
+            background: url('../assets/images/feather/skip-forward.svg') no-repeat;
+            background-size: contain;
+          }
         }
       }
 
@@ -810,8 +814,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-next {
-      @extend .glyphicon-chevron-right !optional;
-      @include glyphicon-light;
+      @extend .chevron-right !optional;
 
       color: #000 !important;
       text-align: end;
@@ -822,8 +825,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-prev {
-      @extend .glyphicon-chevron-left !optional;
-      @include glyphicon-light;
+      @extend .chevron-left !optional;
 
       color: #000 !important;
       text-align: start;
@@ -837,15 +839,13 @@ p-calendar .p-datepicker {
   .p-timepicker {
 
     .pi.pi-chevron-up {
-      @extend .glyphicon-chevron-up !optional;
-      @include glyphicon-light;
+      @extend .chevron-up !optional;
 
       color: #000 !important;
     }
 
     .pi.pi-chevron-down {
-      @extend .glyphicon-chevron-down !optional;
-      @include glyphicon-light;
+      @extend .chevron-down !optional;
 
       color: #000 !important;
     }
@@ -901,15 +901,14 @@ p-toast {
     min-width: 200px;
 
     .p-toast-icon-close {
-      font-family: "Glyphicons Halflings";
       opacity: 0;
       position: absolute;
       right: 5px;
       top: 5px;
-
-      &:after {
-        content: "\e014";
-      }
+      width: 18px;
+      height: 18px;
+      background: url('../assets/images/feather/x.svg') no-repeat;
+      background-size: contain;
     }
 
     &:hover .p-toast-icon-close {
@@ -927,22 +926,6 @@ p-toast {
     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
     overflow: hidden;
 
-    &.p-toast-message-success my-global-icon {
-      color: #8BC34A !important;
-    }
-
-    &.p-toast-message-error my-global-icon {
-      color: #F44336 !important;
-    }
-
-    &.p-toast-message-warn my-global-icon {
-      color: #F1680D !important;
-    }
-
-    &.p-toast-message-info my-global-icon {
-      color: #03A9F4 !important;
-    }
-
     .notification-block {
       display: flex;
       align-items: center;
@@ -962,13 +945,24 @@ p-toast {
           margin-bottom: 0;
         }
       }
-
-      .glyphicon {
-        font-size: 32px;
-        @include margin-right(5px);
-      }
     }
   }
+
+  .p-toast-message-success my-global-icon {
+    color: #8BC34A !important;
+  }
+
+  .p-toast-message-error my-global-icon {
+    color: #F44336 !important;
+  }
+
+  .p-toast-message-warn my-global-icon {
+    color: #F1680D !important;
+  }
+
+  .p-toast-message-info my-global-icon {
+    color: #03A9F4 !important;
+  }
 }
 
 .p-selectbutton {