diff --git a/frontend/src/icons.scss b/frontend/src/icons.scss
index 5260dca33..a689629f9 100644
--- a/frontend/src/icons.scss
+++ b/frontend/src/icons.scss
@@ -18,6 +18,7 @@ $icons: ok,
     min-width: 1em;
     font-size: inherit;
     display: inline-block;
+    vertical-align: middle;
     filter: invert(22%) sepia(84%) saturate(7448%) hue-rotate(357deg) brightness(102%) contrast(116%);
   }
 }
diff --git a/templates/widgets/alerts/alerts.hamlet b/templates/widgets/alerts/alerts.hamlet
index 55037be72..42d926556 100644
--- a/templates/widgets/alerts/alerts.hamlet
+++ b/templates/widgets/alerts/alerts.hamlet
@@ -1,6 +1,6 @@
 $newline never
 
-$# SPDX-FileCopyrightText: 2022 Felix Hamann <felix.hamann@campus.lmu.de>,Gregor Kleen <gregor.kleen@ifi.lmu.de>,Steffen Jost <jost@tcs.ifi.lmu.de>
+$# SPDX-FileCopyrightText: 2022-2024 Felix Hamann <felix.hamann@campus.lmu.de>,Gregor Kleen <gregor.kleen@ifi.lmu.de>,Steffen Jost <jost@tcs.ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 $#
 $# SPDX-License-Identifier: AGPL-3.0-or-later
 
@@ -9,6 +9,6 @@ $# SPDX-License-Identifier: AGPL-3.0-or-later
   $forall Message{..} <- mmsgs
     <div .alert .alert-#{toPathPiece messageStatus}>
       <div .alert__closer>
-      <div .alert__icon .fas .fa-#{maybe "info-circle" iconText messageIcon}>
+      <div .alert__icon .fas .ico-#{maybe "info-circle" iconText messageIcon}>
       <div .alert__content>
         #{messageContent}
diff --git a/templates/widgets/breadcrumbs/breadcrumbs.hamlet b/templates/widgets/breadcrumbs/breadcrumbs.hamlet
index cd7a681f0..9b5144667 100644
--- a/templates/widgets/breadcrumbs/breadcrumbs.hamlet
+++ b/templates/widgets/breadcrumbs/breadcrumbs.hamlet
@@ -1,6 +1,6 @@
 $newline never
 
-$# SPDX-FileCopyrightText: 2022 Felix Hamann <felix.hamann@campus.lmu.de>,Gregor Kleen <gregor.kleen@ifi.lmu.de>
+$# SPDX-FileCopyrightText: 2022-2024 Felix Hamann <felix.hamann@campus.lmu.de>,Gregor Kleen <gregor.kleen@ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 $#
 $# SPDX-License-Identifier: AGPL-3.0-or-later
 
@@ -8,7 +8,7 @@ $# SPDX-License-Identifier: AGPL-3.0-or-later
   <ul .breadcrumbs__list.list--inline>
 
     <a .breadcrumbs__link.breadcrumbs__home href=@{NewsR}>
-      <i .fas .fa-fw .fa-#{iconText IconBreadcrumbsHome}>
+      <i .ico-#{iconText IconBreadcrumbsHome}>
 
     $forall (bcRoute, bcTitle, hasAccess) <- parents
       <li .breadcrumbs__item>
diff --git a/templates/widgets/notification.hamlet b/templates/widgets/notification.hamlet
index 3950a53bd..9f0a6df19 100644
--- a/templates/widgets/notification.hamlet
+++ b/templates/widgets/notification.hamlet
@@ -1,9 +1,9 @@
 $newline never
 
-$# SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>
+$# SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 $#
 $# SPDX-License-Identifier: AGPL-3.0-or-later
 
-<div .notification .notification-#{toPathPiece messageStatus} .fa-#{iconText messageIcon} :is _NotificationBroad nType:.notification--broad>
+<div .notification .notification-#{toPathPiece messageStatus} .ico-#{iconText messageIcon} :is _NotificationBroad nType:.notification--broad>
   <div .notification__content>
     #{messageContent}
diff --git a/templates/widgets/pageaction/pageaction.hamlet b/templates/widgets/pageaction/pageaction.hamlet
index d0d7e7a54..8dcc11e69 100644
--- a/templates/widgets/pageaction/pageaction.hamlet
+++ b/templates/widgets/pageaction/pageaction.hamlet
@@ -1,6 +1,6 @@
 $newline never
 
-$# SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>
+$# SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 $#
 $# SPDX-License-Identifier: AGPL-3.0-or-later
 
@@ -14,7 +14,7 @@ $if hasSecondaryPageActions || hasPrimarySubActions
     <li .pagenav__list-item .pagenav-secondary>
       <input .pagenav-item__expand-radio name=pagenav-item__expand-radio id=pageaction-item__expand-secondary type=radio uw-no-radiobox>
       <label .pagenav-item__expand-label for=pageaction-item__expand-secondary>
-        <i .fas .fa-fw .fa-#{iconText IconPageActionSecondary}>
+        <i .ico-#{iconText IconPageActionSecondary}>
       <div .pagenav-item__children-wrapper>
         <ul .pagenav-item__children>
           $forall n <- filter isPageActionSecondary nav
diff --git a/templates/widgets/pageaction/primary-wrapper.hamlet b/templates/widgets/pageaction/primary-wrapper.hamlet
index 9627c403f..7d2d3c560 100644
--- a/templates/widgets/pageaction/primary-wrapper.hamlet
+++ b/templates/widgets/pageaction/primary-wrapper.hamlet
@@ -1,6 +1,6 @@
 $newline never
 
-$# SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>
+$# SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 $#
 $# SPDX-License-Identifier: AGPL-3.0-or-later
 
@@ -8,7 +8,7 @@ $# SPDX-License-Identifier: AGPL-3.0-or-later
 $if not (null sWidgets)
   <input .pagenav-item__expand-radio name=pagenav-item__expand-radio id=pageaction-item__expand-#{navIdent} type=radio uw-no-radiobox>
   <label .pagenav-item__expand-label for=pageaction-item__expand-#{navIdent}>
-    <i .fas .fa-fw .fa-#{iconText IconPageActionPrimaryExpand}>
+    <i .ico-#{iconText IconPageActionPrimaryExpand}>
   <div .pagenav-item__children-wrapper>
     <ul .pagenav-item__children>
       $forall sWgt <- sWidgets