diff --git a/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx b/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx
index 803f4535c..fe826d65b 100644
--- a/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx
+++ b/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx
@@ -12,8 +12,11 @@ import {
   defaultCalendarTheme,
 } from "../../calendar/CalendarTheme";
 import { useDateRangeInput } from "./hooks/UseDateRangeInput";
-import { Icon, stenaCalendar } from "@stenajs-webui/elements";
-import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons/faLongArrowAltRight";
+import {
+  Icon,
+  stenaArrowWideRight,
+  stenaCalendar,
+} from "@stenajs-webui/elements";
 import { CalendarWithMonthSwitcher } from "../../../features/month-switcher/CalendarWithMonthSwitcher";
 import { CalendarPanelType } from "../../../features/calendar-with-month-year-pickers/CalendarPanelType";
 import { Popover } from "@stenajs-webui/tooltip";
@@ -154,7 +157,7 @@ export function DateRangeInput<T>({
         />
         <Space />
         <Icon
-          icon={faLongArrowAltRight}
+          icon={stenaArrowWideRight}
           color={cssColor("--lhds-color-ui-500")}
           size={14}
         />
diff --git a/packages/calendar/src/features/month-picker/MonthPicker.tsx b/packages/calendar/src/features/month-picker/MonthPicker.tsx
index 8f515e269..c906253b1 100644
--- a/packages/calendar/src/features/month-picker/MonthPicker.tsx
+++ b/packages/calendar/src/features/month-picker/MonthPicker.tsx
@@ -22,9 +22,9 @@ export const MonthPicker: React.FC<MonthPickerProps> = ({
   locale = enGB,
 }) => {
   return (
-    <Column>
+    <Column gap={1}>
       {monthMatrix.map((monthRow) => (
-        <Row key={monthRow[0]}>
+        <Row key={monthRow[0]} gap={1}>
           {monthRow.map((month) => (
             <MonthPickerCell
               key={month}
diff --git a/packages/calendar/src/features/month-picker/MonthPickerCell.tsx b/packages/calendar/src/features/month-picker/MonthPickerCell.tsx
index c377503b2..49124147b 100644
--- a/packages/calendar/src/features/month-picker/MonthPickerCell.tsx
+++ b/packages/calendar/src/features/month-picker/MonthPickerCell.tsx
@@ -24,7 +24,7 @@ export const MonthPickerCell: React.FC<Props> = ({
   }, [locale, month]);
 
   return (
-    <Row width={"64px"} justifyContent={"center"} spacing={0.5} indent={0.5}>
+    <Row justifyContent={"center"}>
       {value === month ? (
         <PrimaryButton
           label={label}
diff --git a/packages/calendar/src/features/month-switcher/CalendarWithMonthSwitcher.tsx b/packages/calendar/src/features/month-switcher/CalendarWithMonthSwitcher.tsx
index fcbb82a25..120e7c96c 100644
--- a/packages/calendar/src/features/month-switcher/CalendarWithMonthSwitcher.tsx
+++ b/packages/calendar/src/features/month-switcher/CalendarWithMonthSwitcher.tsx
@@ -83,30 +83,20 @@ export function CalendarWithMonthSwitcher<T>({
               <Row alignItems={"center"}>
                 {!hideYearPagination && (
                   <FlatButton
-                    size={"small"}
                     onClick={prevYear}
                     leftIcon={stenaAngleLeftDouble}
                   />
                 )}
                 <Space />
-                <FlatButton
-                  size={"small"}
-                  onClick={prevMonth}
-                  leftIcon={stenaAngleLeft}
-                />
+                <FlatButton onClick={prevMonth} leftIcon={stenaAngleLeft} />
               </Row>
             }
             headerRightContent={
               <Row alignItems={"center"}>
-                <FlatButton
-                  size={"small"}
-                  onClick={nextMonth}
-                  leftIcon={stenaAngleRight}
-                />
+                <FlatButton onClick={nextMonth} leftIcon={stenaAngleRight} />
                 <Space />
                 {!hideYearPagination && (
                   <FlatButton
-                    size={"small"}
                     onClick={nextYear}
                     leftIcon={stenaAngleRightDouble}
                   />
diff --git a/packages/calendar/src/features/month-switcher/MonthSwitcherBelow.tsx b/packages/calendar/src/features/month-switcher/MonthSwitcherBelow.tsx
index a6bb630c3..6d3cbe069 100644
--- a/packages/calendar/src/features/month-switcher/MonthSwitcherBelow.tsx
+++ b/packages/calendar/src/features/month-switcher/MonthSwitcherBelow.tsx
@@ -2,13 +2,13 @@ import { Indent, Row, Space } from "@stenajs-webui/core";
 import {
   FlatButton,
   stenaAngleLeft,
+  stenaAngleLeftDouble,
   stenaAngleRight,
+  stenaAngleRightDouble,
 } from "@stenajs-webui/elements";
 import * as React from "react";
-import { CalendarTheme } from "../../components/calendar/CalendarTheme";
-import { faAngleDoubleLeft } from "@fortawesome/free-solid-svg-icons/faAngleDoubleLeft";
-import { faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons/faAngleDoubleRight";
 import { ReactNode } from "react";
+import { CalendarTheme } from "../../components/calendar/CalendarTheme";
 
 export interface WithMonthSwitcherBelowProps {
   theme: CalendarTheme;
@@ -30,13 +30,13 @@ export const WithMonthSwitcherBelow: React.FC<WithMonthSwitcherBelowProps> = ({
     {children}
     <Indent>
       <Row>
-        <FlatButton onClick={prevYear} leftIcon={faAngleDoubleLeft} />
+        <FlatButton onClick={prevYear} leftIcon={stenaAngleLeftDouble} />
         <Space />
         <FlatButton onClick={prevMonth} leftIcon={stenaAngleLeft} />
         <Indent num={2} />
         <FlatButton onClick={nextMonth} leftIcon={stenaAngleRight} />
         <Space />
-        <FlatButton onClick={nextYear} leftIcon={faAngleDoubleRight} />
+        <FlatButton onClick={nextYear} leftIcon={stenaAngleRightDouble} />
       </Row>
     </Indent>
     <Space />
diff --git a/packages/calendar/src/features/year-picker/YearPicker.tsx b/packages/calendar/src/features/year-picker/YearPicker.tsx
index ab1ec5700..86f95c261 100644
--- a/packages/calendar/src/features/year-picker/YearPicker.tsx
+++ b/packages/calendar/src/features/year-picker/YearPicker.tsx
@@ -3,9 +3,11 @@ import { useEffect, useMemo, useState } from "react";
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import { Column, Row } from "@stenajs-webui/core";
 import { YearPickerCell } from "./YearPickerCell";
-import { FlatButton } from "@stenajs-webui/elements";
-import { faCaretLeft } from "@fortawesome/free-solid-svg-icons/faCaretLeft";
-import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
+import {
+  FlatButton,
+  stenaArrowLeft,
+  stenaArrowRight,
+} from "@stenajs-webui/elements";
 import { chunk, range } from "lodash";
 
 export interface YearPickerProps extends ValueAndOnValueChangeProps<number> {
@@ -37,13 +39,13 @@ export const YearPicker: React.FC<YearPickerProps> = ({
     <Row>
       <Column justifyContent={"center"}>
         <FlatButton
-          leftIcon={faCaretLeft}
+          leftIcon={stenaArrowLeft}
           onClick={() => setLastYear(lastYear - 3)}
         />
       </Column>
-      <Column>
+      <Column gap={1}>
         {yearRows.map((yearRow) => (
-          <Row key={yearRow[0]}>
+          <Row key={yearRow[0]} gap={1}>
             {yearRow.map((year) => (
               <YearPickerCell
                 key={year}
@@ -57,7 +59,7 @@ export const YearPicker: React.FC<YearPickerProps> = ({
       </Column>
       <Column justifyContent={"center"}>
         <FlatButton
-          leftIcon={faCaretRight}
+          leftIcon={stenaArrowRight}
           onClick={() => setLastYear(lastYear + 3)}
         />
       </Column>
diff --git a/packages/calendar/src/features/year-picker/YearPickerCell.tsx b/packages/calendar/src/features/year-picker/YearPickerCell.tsx
index 96993eded..0dcd3c2a6 100644
--- a/packages/calendar/src/features/year-picker/YearPickerCell.tsx
+++ b/packages/calendar/src/features/year-picker/YearPickerCell.tsx
@@ -14,7 +14,7 @@ export const YearPickerCell: React.FC<Props> = ({
 }) => {
   const label = String(year);
   return (
-    <Row width={"64px"} justifyContent={"center"} spacing={0.5} indent={0.5}>
+    <Row justifyContent={"center"}>
       {value === year ? (
         <PrimaryButton label={label} onClick={() => onValueChange?.(year)} />
       ) : (
diff --git a/packages/elements/src/components/ui/action-menu/ActionMenu.stories.tsx b/packages/elements/src/components/ui/action-menu/ActionMenu.stories.tsx
index 7f3233b56..9ffdc5cce 100644
--- a/packages/elements/src/components/ui/action-menu/ActionMenu.stories.tsx
+++ b/packages/elements/src/components/ui/action-menu/ActionMenu.stories.tsx
@@ -1,4 +1,3 @@
-import { faSave } from "@fortawesome/free-solid-svg-icons/faSave";
 import { useBoolean, useTimeoutState } from "@stenajs-webui/core";
 import { action } from "@storybook/addon-actions";
 import { ActionMenuItem } from "./ActionMenuItem";
@@ -144,7 +143,7 @@ export const Standard = () => (
 );
 
 export const Outlined = () => (
-  <ActionMenu width={200}>
+  <ActionMenu width={220}>
     <ActionMenuItem
       id={"action-menu-item-open"}
       label={"Open"}
@@ -201,7 +200,7 @@ export const AsyncItem = () => {
   };
 
   return (
-    <ActionMenu width={200}>
+    <ActionMenu width={220}>
       <ActionMenuItem
         id={"action-menu-item-open"}
         label={"Open"}
@@ -209,7 +208,7 @@ export const AsyncItem = () => {
       />
       <ActionMenuItem
         label={saved ? "Saved" : loading ? "Saving..." : "Save"}
-        leftIcon={faSave}
+        leftIcon={stenaSave}
         onClick={start}
       />
       <ActionMenuItem
@@ -220,7 +219,7 @@ export const AsyncItem = () => {
             ? "Saving with danger..."
             : "Save dangerously"
         }
-        leftIcon={isDangerOn ? faSave : faSadCry}
+        leftIcon={isDangerOn ? stenaSave : faSadCry}
         onClick={startDanger}
         variant={"danger"}
         disabled={!isDangerOn}
@@ -240,7 +239,7 @@ export const AsyncItem = () => {
             ? "Saving with success..."
             : "Save successfully"
         }
-        leftIcon={isSuccessOn ? faSave : faSadCry}
+        leftIcon={isSuccessOn ? stenaSave : faSadCry}
         onClick={startSuccess}
         disabled={!isSuccessOn}
       />
diff --git a/packages/elements/src/components/ui/bread-crumbs/BreadCrumbs.tsx b/packages/elements/src/components/ui/bread-crumbs/BreadCrumbs.tsx
index d6bb452f1..6fd3fe31e 100644
--- a/packages/elements/src/components/ui/bread-crumbs/BreadCrumbs.tsx
+++ b/packages/elements/src/components/ui/bread-crumbs/BreadCrumbs.tsx
@@ -2,7 +2,7 @@ import { Indent, Row } from "@stenajs-webui/core";
 import { cssColor } from "@stenajs-webui/theme";
 import * as React from "react";
 import { Children, ReactNode } from "react";
-import { stenaArrowRight } from "../../../icons/ui/IconsUi";
+import { stenaLineSlash } from "../../../icons/ui/IconsUi";
 import { Icon } from "../icon/Icon";
 
 export interface BreadCrumbsProps {
@@ -19,7 +19,7 @@ export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ children }) => {
               {index > 0 && (
                 <Indent num={2}>
                   <Icon
-                    icon={stenaArrowRight}
+                    icon={stenaLineSlash}
                     size={8}
                     color={cssColor("--lhds-color-ui-700")}
                   />
diff --git a/packages/elements/src/components/ui/bread-crumbs/Crumb.module.css b/packages/elements/src/components/ui/bread-crumbs/Crumb.module.css
index 791404a25..444dd7a97 100644
--- a/packages/elements/src/components/ui/bread-crumbs/Crumb.module.css
+++ b/packages/elements/src/components/ui/bread-crumbs/Crumb.module.css
@@ -1,10 +1,10 @@
 .crumb {
-  font-size: 1rem;
+  font-size: 1.2rem;
   font-family: var(--swui-font-primary);
   font-weight: var(--swui-font-weight-text-bold);
   letter-spacing: 0.1rem;
   text-decoration: none;
-  color: var(--swui-text-action-color);
+  color: var(--lhds-color-ui-500);
 
   &:not(:last-of-type) {
     cursor: pointer;
diff --git a/packages/elements/src/components/ui/buttons/Button.module.css b/packages/elements/src/components/ui/buttons/Button.module.css
index 8506c121e..a641af27e 100644
--- a/packages/elements/src/components/ui/buttons/Button.module.css
+++ b/packages/elements/src/components/ui/buttons/Button.module.css
@@ -6,8 +6,11 @@
   --swui-button-text-color: var(--swui-white);
   --swui-button-text-decoration: none;
   --swui-button-letter-spacing: var(--swui-field-letter-spacing);
-  --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 3px);
-  --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 3 - 1px);
+  --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);
+  --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);
+  --swui-button-padding-horizontal-label-only: calc(
+    var(--swui-metrics-spacing) * 3 - 1px
+  );
 
   /* Text */
   --swui-button-text-color-focus: var(--swui-button-text-color);
@@ -154,6 +157,11 @@
   align-items: center;
   justify-content: center;
 
+  &.labelOnly {
+    padding: var(--swui-button-padding-vertical)
+      var(--swui-button-padding-horizontal-label-only);
+  }
+
   &.iconButton {
     --current-icon-height: var(--swui-button-icon-height-medium-icon-only);
 
@@ -193,6 +201,9 @@
     --current-line-height: 1.6rem;
     --swui-button-padding-vertical: calc(var(--swui-metrics-space) / 2 - 1px);
     --swui-button-padding-horizontal: calc(var(--swui-metrics-space) - 1px);
+    --swui-button-padding-horizontal-label-only: calc(
+      var(--swui-metrics-space) * 2 - 1px
+    );
     --current-text-size: 1.2rem;
     --current-icon-height: var(--swui-button-icon-height-small);
 
@@ -203,8 +214,11 @@
 
   &.large {
     --current-line-height: 2.4rem;
-    --swui-button-padding-vertical: calc(var(--swui-metrics-space) * 2 - 4px);
+    --swui-button-padding-vertical: calc(var(--swui-metrics-space) * 2 - 5px);
     --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);
+    --swui-button-padding-horizontal-label-only: calc(
+      var(--swui-metrics-space) * 3 - 1px
+    );
     --current-text-size: 1.8rem;
     --current-icon-height: var(--swui-button-icon-height-large);
 
@@ -216,6 +230,9 @@
   &.larger {
     --swui-button-padding-vertical: 24px;
     --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 6 - 1px);
+    --swui-button-padding-horizontal-label-only: calc(
+      var(--swui-metrics-space) * 6 - 1px
+    );
 
     --current-text-size: 2rem;
     --current-line-height: 2.4rem;
diff --git a/packages/elements/src/components/ui/buttons/PrimaryButton.tsx b/packages/elements/src/components/ui/buttons/PrimaryButton.tsx
index 23b21159f..1bf96ace3 100644
--- a/packages/elements/src/components/ui/buttons/PrimaryButton.tsx
+++ b/packages/elements/src/components/ui/buttons/PrimaryButton.tsx
@@ -56,6 +56,8 @@ export const PrimaryButton = forwardRef<HTMLButtonElement, PrimaryButtonProps>(
         (loading && loadingLabel)
     );
 
+    const labelOnly = hasLabel && !left && !leftIcon && !right && !rightIcon;
+
     return (
       <Button
         ref={ref}
@@ -65,6 +67,7 @@ export const PrimaryButton = forwardRef<HTMLButtonElement, PrimaryButtonProps>(
           styles[size],
           styles[variant],
           !hasLabel && styles.iconButton,
+          labelOnly && styles.labelOnly,
           className
         )}
         disabled={disabled}
diff --git a/packages/elements/src/components/ui/buttons/menu-button/MenuButton.stories.tsx b/packages/elements/src/components/ui/buttons/menu-button/MenuButton.stories.tsx
index 9c88d9ca2..d1f57cf80 100644
--- a/packages/elements/src/components/ui/buttons/menu-button/MenuButton.stories.tsx
+++ b/packages/elements/src/components/ui/buttons/menu-button/MenuButton.stories.tsx
@@ -3,11 +3,11 @@ import { MenuButtonLink } from "./MenuButtonLink";
 import { MenuButtonGroupBox } from "./MenuButtonGroupBox";
 import { Column, Text, useBoolean } from "@stenajs-webui/core";
 import * as React from "react";
-import {
-  faChartBar,
-  faExternalLinkAlt,
-} from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
+import {
+  stenaExternalLink,
+  stenaStatisticsBar,
+} from "../../../../icons/ui/IconsUi";
 
 export default {
   title: "elements/MenuButton",
@@ -23,7 +23,7 @@ export const Overview = () => {
     <Column width={"230px"} gap>
       <MenuButton label={"Just a button"} />
 
-      <MenuButton label={"I have icon"} leftIcon={faChartBar} />
+      <MenuButton label={"I have icon"} leftIcon={stenaStatisticsBar} />
 
       <MenuButton label={"I am selected"} selected />
 
@@ -35,7 +35,7 @@ export const Overview = () => {
         label={"Link to google"}
         href={"https://www.google.com"}
         target={"_blank"}
-        leftIcon={faExternalLinkAlt}
+        leftIcon={stenaExternalLink}
       />
 
       <MenuButtonLink
@@ -43,14 +43,14 @@ export const Overview = () => {
         href={"https://www.google.com"}
         target={"_blank"}
         selected
-        leftIcon={faExternalLinkAlt}
+        leftIcon={stenaExternalLink}
       />
 
       <MenuButtonLink
         label={"I am custom link"}
         href={"https://www.google.com"}
         target={"_blank"}
-        leftIcon={faExternalLinkAlt}
+        leftIcon={stenaExternalLink}
         renderLink={({ className, children, ...anchorProps }) => (
           <a
             {...anchorProps}
@@ -66,7 +66,7 @@ export const Overview = () => {
         label={"I am custom selected"}
         href={"https://www.google.com"}
         target={"_blank"}
-        leftIcon={faExternalLinkAlt}
+        leftIcon={stenaExternalLink}
         renderLink={(
           { className, children, ...anchorProps },
           activeClassName
diff --git a/packages/elements/src/components/ui/buttons/menu-button/MenuButton.tsx b/packages/elements/src/components/ui/buttons/menu-button/MenuButton.tsx
index 9d037caef..53785a481 100644
--- a/packages/elements/src/components/ui/buttons/menu-button/MenuButton.tsx
+++ b/packages/elements/src/components/ui/buttons/menu-button/MenuButton.tsx
@@ -9,13 +9,12 @@ import {
 } from "@stenajs-webui/core";
 import cx from "classnames";
 import styles from "./MenuButton.module.css";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import { cssColor } from "@stenajs-webui/theme";
 import { MenuButtonGroupBox } from "./MenuButtonGroupBox";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { Icon } from "../../icon/Icon";
 import { MenuButtonContent } from "./MenuButtonContent";
+import { stenaAngleDown, stenaAngleUp } from "../../../../icons/ui/IconsUi";
 
 export type MenuButtonVariant = "standard" | "danger";
 
@@ -80,8 +79,8 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
                   <Row>
                     <Indent />
                     <Icon
-                      icon={expanded ? faChevronUp : faChevronDown}
-                      size={12}
+                      icon={expanded ? stenaAngleUp : stenaAngleDown}
+                      size={18}
                       color={cssColor("--lhds-color-blue-600")}
                     />
                   </Row>
diff --git a/packages/elements/src/components/ui/up-down-buttons/UpDownButtons.tsx b/packages/elements/src/components/ui/up-down-buttons/UpDownButtons.tsx
index 0f62a40de..e446a8555 100644
--- a/packages/elements/src/components/ui/up-down-buttons/UpDownButtons.tsx
+++ b/packages/elements/src/components/ui/up-down-buttons/UpDownButtons.tsx
@@ -1,9 +1,8 @@
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
-import { faCaretUp } from "@fortawesome/free-solid-svg-icons/faCaretUp";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Column, Row } from "@stenajs-webui/core";
 import * as React from "react";
 import styles from "./UpDownButtons.module.css";
+import { stenaAngleDown, stenaAngleUp } from "../../../icons/ui/IconsUi";
+import { Icon } from "../icon/Icon";
 
 export interface UpDownButtonsProps {
   onClickUp?: () => void;
@@ -21,9 +20,9 @@ export const UpDownButtons: React.FC<UpDownButtonsProps> = ({
   <Column className={styles.upDownButtons}>
     <button onClick={onClickUp} className={styles.button} disabled={disabled}>
       <Row justifyContent={"center"} alignItems={"center"}>
-        <FontAwesomeIcon
-          icon={faCaretUp}
-          size={"sm"}
+        <Icon
+          icon={stenaAngleUp}
+          size={16}
           color={
             disabled ? "var(--swui-textinput-text-color-disabled)" : iconColor
           }
@@ -32,9 +31,9 @@ export const UpDownButtons: React.FC<UpDownButtonsProps> = ({
     </button>
     <button onClick={onClickDown} className={styles.button} disabled={disabled}>
       <Row justifyContent={"center"} alignItems={"center"}>
-        <FontAwesomeIcon
-          icon={faCaretDown}
-          size={"sm"}
+        <Icon
+          icon={stenaAngleDown}
+          size={16}
           color={
             disabled ? "var(--swui-textinput-text-color-disabled)" : iconColor
           }
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index ef267a569..740897140 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -25,6 +25,7 @@ export * from "./components/ui/button-links/SecondaryButtonLink";
 export * from "./components/ui/button-group/ButtonGroup";
 export * from "./components/ui/up-down-buttons/UpDownButtons";
 export * from "./components/ui/icon/Icon";
+export * from "./components/ui/icon/CircledIcon";
 export * from "./components/ui/card/Card";
 export * from "./components/ui/card/CardHeader";
 export * from "./components/ui/card/CardBody";
diff --git a/packages/filter/package.json b/packages/filter/package.json
index e0664f187..de6a54de3 100644
--- a/packages/filter/package.json
+++ b/packages/filter/package.json
@@ -40,7 +40,7 @@
   "peerDependencies": {
     "@emotion/react": ">=11.1.5",
     "@emotion/styled": ">=11.3.0",
-    "@fortawesome/free-solid-svg-icons": ">=5.15.3",
+    "@fortawesome/fontawesome-svg-core": ">=1.2.35",
     "@types/lodash": ">=4.14.168",
     "lodash": ">=4.17.21",
     "prop-types": ">=15.5.4",
@@ -51,7 +51,7 @@
   "devDependencies": {
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.3.0",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
+    "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@types/jest": "^23.1.5",
     "@types/lodash": "^4.14.168",
     "@types/react": "^18.0.14",
diff --git a/packages/filter/src/features/search-filter/components/SearchFilterButton.tsx b/packages/filter/src/features/search-filter/components/SearchFilterButton.tsx
index f3f51a574..d2b8ddff9 100644
--- a/packages/filter/src/features/search-filter/components/SearchFilterButton.tsx
+++ b/packages/filter/src/features/search-filter/components/SearchFilterButton.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { useCallback } from "react";
 import { useSearchFilterDispatch } from "../context/SearchFilterDispatchContext";
 import { useSearchFilterActions } from "../context/SearchFilterActionsContext";
-import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 
 interface SearchFilterDrawerButtonProps {
   label?: string;
diff --git a/packages/filter/src/features/search-filter/components/SearchFilterSection.tsx b/packages/filter/src/features/search-filter/components/SearchFilterSection.tsx
index 30b0b66d3..1c994676c 100644
--- a/packages/filter/src/features/search-filter/components/SearchFilterSection.tsx
+++ b/packages/filter/src/features/search-filter/components/SearchFilterSection.tsx
@@ -11,7 +11,7 @@ import {
 import { useSearchFilterState } from "../context/SearchFilterStateContext";
 import { useSearchFilterDispatch } from "../context/SearchFilterDispatchContext";
 import { useSearchFilterActions } from "../context/SearchFilterActionsContext";
-import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 
 export interface SearchFilterSectionProps<TSectionKey extends string> {
   sectionId: TSectionKey;
diff --git a/packages/forms/src/components/copy-to-clipboard-button/CopyToClipboardButton.tsx b/packages/forms/src/components/copy-to-clipboard-button/CopyToClipboardButton.tsx
index 39d894c52..2a0b69ce0 100644
--- a/packages/forms/src/components/copy-to-clipboard-button/CopyToClipboardButton.tsx
+++ b/packages/forms/src/components/copy-to-clipboard-button/CopyToClipboardButton.tsx
@@ -1,6 +1,9 @@
-import { faCopy } from "@fortawesome/free-regular-svg-icons/faCopy";
 import { useTimeoutState } from "@stenajs-webui/core";
-import { FlatButton, FlatButtonProps } from "@stenajs-webui/elements";
+import {
+  FlatButton,
+  FlatButtonProps,
+  stenaCopy,
+} from "@stenajs-webui/elements";
 import { Tooltip } from "@stenajs-webui/tooltip";
 import * as React from "react";
 import { useCallback } from "react";
@@ -30,7 +33,7 @@ export function CopyToClipboardButton({
       <FlatButton
         size={size}
         onClick={onClick}
-        leftIcon={faCopy}
+        leftIcon={stenaCopy}
         disabled={value == null}
       />
     </Tooltip>
diff --git a/packages/forms/src/components/ui/checkbox/Checkbox.module.css b/packages/forms/src/components/ui/checkbox/Checkbox.module.css
index 38c473b6b..4a624c1b3 100644
--- a/packages/forms/src/components/ui/checkbox/Checkbox.module.css
+++ b/packages/forms/src/components/ui/checkbox/Checkbox.module.css
@@ -11,7 +11,7 @@
   );
   /* Background */
   --swui-checkbox-unchecked-bg-color: var(--swui-white);
-  --swui-checkbox-checked-bg-color: var(--swui-primary-action-color);
+  --swui-checkbox-checked-bg-color: var(--lhds-color-blue-500);
   --swui-checkbox-disabled-bg-color: var(--swui-field-bg-disabled);
   --swui-checkbox-disabled-checked-bg-color: var(--swui-field-bg-disabled);
 
diff --git a/packages/forms/src/components/ui/password-input/PasswordInput.tsx b/packages/forms/src/components/ui/password-input/PasswordInput.tsx
index e3469794a..11221b140 100644
--- a/packages/forms/src/components/ui/password-input/PasswordInput.tsx
+++ b/packages/forms/src/components/ui/password-input/PasswordInput.tsx
@@ -2,8 +2,7 @@ import * as React from "react";
 import { useState } from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { TextInput, TextInputProps } from "../text-input/TextInput";
-import { faEye } from "@fortawesome/free-solid-svg-icons/faEye";
-import { faEyeSlash } from "@fortawesome/free-solid-svg-icons/faEyeSlash";
+import { stenaEyeHide, stenaEyeShow } from "@stenajs-webui/elements";
 
 export interface PasswordInputProps extends TextInputProps {
   visibleIcon?: IconDefinition;
@@ -11,8 +10,8 @@ export interface PasswordInputProps extends TextInputProps {
 }
 
 export const PasswordInput: React.FC<PasswordInputProps> = ({
-  hiddenIcon = faEye,
-  visibleIcon = faEyeSlash,
+  hiddenIcon = stenaEyeShow,
+  visibleIcon = stenaEyeHide,
   ...props
 }) => {
   const [isPassword, setIsPassword] = useState(true);
diff --git a/packages/forms/src/components/ui/radio/RadioButton.module.css b/packages/forms/src/components/ui/radio/RadioButton.module.css
index 219af20bf..c37b9aebb 100644
--- a/packages/forms/src/components/ui/radio/RadioButton.module.css
+++ b/packages/forms/src/components/ui/radio/RadioButton.module.css
@@ -10,7 +10,7 @@
     --swui-field-indicator-inactive-color
   );
   /* Background */
-  --swui-radiobutton-checked-bg-color: var(--swui-primary-action-color);
+  --swui-radiobutton-checked-bg-color: var(--lhds-color-blue-500);
   --swui-radiobutton-checked-disabled-bg-color: var(--swui-field-bg-disabled);
   --swui-radiobutton-unchecked-bg-color: var(--swui-white);
   --swui-radiobutton-unchecked-disabled-bg-color: var(--swui-field-bg-disabled);
diff --git a/packages/forms/src/components/ui/radio/RadioButton.stories.tsx b/packages/forms/src/components/ui/radio/RadioButton.stories.tsx
index 0945e7729..c9c171844 100644
--- a/packages/forms/src/components/ui/radio/RadioButton.stories.tsx
+++ b/packages/forms/src/components/ui/radio/RadioButton.stories.tsx
@@ -156,15 +156,18 @@ export const Overview = () => {
   );
 };
 
-export const CustomActionColorOnMultiple = () => (
-  <Column style={{ "--swui-primary-action-color": "#41ae33" } as any}>
-    <RadioButton name={"testing1"} />
-    <Space />
-    <RadioButton name={"testing2"} />
-    <Space />
-    <RadioButton name={"testing3"} />
-  </Column>
-);
+export const CustomActionColorOnMultiple = () => {
+  const style = { "--swui-radiobutton-checked-bg-color": "#41ae33" } as any;
+  return (
+    <Column>
+      <RadioButton name={"testing1"} style={style} />
+      <Space />
+      <RadioButton name={"testing2"} style={style} />
+      <Space />
+      <RadioButton name={"testing3"} style={style} />
+    </Column>
+  );
+};
 
 export const CustomCheckedBgColorOnSingle = () => (
   <Column>
diff --git a/packages/forms/src/components/ui/text-input/TextInputBox.tsx b/packages/forms/src/components/ui/text-input/TextInputBox.tsx
index 8383c7fcc..b2f53b45a 100644
--- a/packages/forms/src/components/ui/text-input/TextInputBox.tsx
+++ b/packages/forms/src/components/ui/text-input/TextInputBox.tsx
@@ -4,9 +4,11 @@ import styles from "./TextInput.module.css";
 import cx from "classnames";
 import { TextInputProps } from "./TextInput";
 import { TextInputIcon } from "./TextInputIcon";
-import { stenaCheck } from "@stenajs-webui/elements";
-import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
-import { InputSpinner } from "@stenajs-webui/elements";
+import {
+  InputSpinner,
+  stenaCheck,
+  stenaExclamationTriangle,
+} from "@stenajs-webui/elements";
 import { Row } from "@stenajs-webui/core";
 
 export interface TextInputBoxProps
@@ -49,7 +51,7 @@ export const TextInputBox: React.FC<TextInputBoxProps> = ({
     variant === "success"
       ? stenaCheck
       : variant === "warning" || variant === "error"
-      ? faExclamationTriangle
+      ? stenaExclamationTriangle
       : iconRight;
 
   const currentContentRight =
diff --git a/packages/grid-export/src/features/grid-excel-export/components/StandardTableExcelExportButton.tsx b/packages/grid-export/src/features/grid-excel-export/components/StandardTableExcelExportButton.tsx
index 40ce27551..89539333c 100644
--- a/packages/grid-export/src/features/grid-excel-export/components/StandardTableExcelExportButton.tsx
+++ b/packages/grid-export/src/features/grid-excel-export/components/StandardTableExcelExportButton.tsx
@@ -2,8 +2,11 @@ import * as React from "react";
 import { useCallback } from "react";
 import { downloadExcelForStandardTable } from "../util/ExcelDownloader";
 import { StandardTableProps } from "@stenajs-webui/grid";
-import { FlatButton, FlatButtonProps } from "@stenajs-webui/elements";
-import { faFileDownload } from "@fortawesome/free-solid-svg-icons/faFileDownload";
+import {
+  FlatButton,
+  FlatButtonProps,
+  stenaDownload,
+} from "@stenajs-webui/elements";
 import { CustomCellFormatters } from "../../../common/CellFormatters";
 
 interface StandardTableExcelExportButtonProps<
@@ -45,7 +48,7 @@ export const StandardTableExcelExportButton =
     return (
       <FlatButton
         size={size}
-        leftIcon={faFileDownload}
+        leftIcon={stenaDownload}
         onClick={onClickExportExcel}
         disabled={!items || !items.length}
       />
diff --git a/packages/grid/package.json b/packages/grid/package.json
index dd24ea906..91d3b40f3 100644
--- a/packages/grid/package.json
+++ b/packages/grid/package.json
@@ -38,6 +38,7 @@
   "peerDependencies": {
     "@emotion/react": ">=11.1.5",
     "@emotion/styled": ">=11.3.0",
+    "@fortawesome/fontawesome-svg-core": ">=1.2.35",
     "@fortawesome/free-solid-svg-icons": ">=5.15.3",
     "@types/lodash": ">=4.14.168",
     "@types/react": ">=18.0.14",
@@ -54,6 +55,7 @@
   "devDependencies": {
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.3.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
     "@types/jest": "^23.1.5",
     "@types/lodash": "^4.14.168",
diff --git a/packages/grid/src/features/standard-table/components/StandardTableHeadRow.tsx b/packages/grid/src/features/standard-table/components/StandardTableHeadRow.tsx
index 365ac2760..a8949d9e5 100644
--- a/packages/grid/src/features/standard-table/components/StandardTableHeadRow.tsx
+++ b/packages/grid/src/features/standard-table/components/StandardTableHeadRow.tsx
@@ -1,7 +1,9 @@
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
 import { Row } from "@stenajs-webui/core";
-import { FlatButton } from "@stenajs-webui/elements";
+import {
+  FlatButton,
+  stenaAngleDown,
+  stenaAngleRight,
+} from "@stenajs-webui/elements";
 import { Checkbox } from "@stenajs-webui/forms";
 import * as React from "react";
 import { CSSProperties } from "react";
@@ -123,7 +125,9 @@ export const StandardTableHeadRow = React.memo(function StandardTableHeadRow<
             {showHeaderExpandCollapse && (
               <FlatButton
                 size={"small"}
-                leftIcon={allItemsAreExpanded ? faChevronDown : faChevronRight}
+                leftIcon={
+                  allItemsAreExpanded ? stenaAngleDown : stenaAngleRight
+                }
                 onClick={toggleExpanded}
               />
             )}
diff --git a/packages/grid/src/features/standard-table/features/column-groups/ColumnInGroup.tsx b/packages/grid/src/features/standard-table/features/column-groups/ColumnInGroup.tsx
index b7603776a..fc6a5631e 100644
--- a/packages/grid/src/features/standard-table/features/column-groups/ColumnInGroup.tsx
+++ b/packages/grid/src/features/standard-table/features/column-groups/ColumnInGroup.tsx
@@ -1,6 +1,9 @@
-import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
 import { Heading, Indent, Row, Space } from "@stenajs-webui/core";
-import { Icon, InputSpinner } from "@stenajs-webui/elements";
+import {
+  Icon,
+  InputSpinner,
+  stenaExclamationTriangle,
+} from "@stenajs-webui/elements";
 import { cssColor } from "@stenajs-webui/theme";
 import { Tooltip } from "@stenajs-webui/tooltip";
 import * as React from "react";
@@ -113,7 +116,7 @@ export const ColumnInGroup = function ColumnGroupColumnItem<
                 appendTo={document.body}
               >
                 <Icon
-                  icon={faExclamationTriangle}
+                  icon={stenaExclamationTriangle}
                   color={cssColor("--lhds-color-red-500")}
                   size={14}
                 />
diff --git a/packages/grid/src/features/standard-table/features/expand-collapse/StandardTableRowExpandButton.tsx b/packages/grid/src/features/standard-table/features/expand-collapse/StandardTableRowExpandButton.tsx
index 9bf7215db..fbbcf41ce 100644
--- a/packages/grid/src/features/standard-table/features/expand-collapse/StandardTableRowExpandButton.tsx
+++ b/packages/grid/src/features/standard-table/features/expand-collapse/StandardTableRowExpandButton.tsx
@@ -1,6 +1,8 @@
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
-import { FlatButton } from "@stenajs-webui/elements";
+import {
+  FlatButton,
+  stenaAngleDown,
+  stenaAngleRight,
+} from "@stenajs-webui/elements";
 import * as React from "react";
 import { useMemo } from "react";
 import { useGridCell } from "../../../grid-cell/hooks/UseGridCell";
@@ -50,7 +52,7 @@ export const StandardTableRowExpandButton = function <TItem>({
       {!buttonDisabled && (
         <FlatButton
           size={"small"}
-          leftIcon={isExpanded ? faChevronDown : faChevronRight}
+          leftIcon={isExpanded ? stenaAngleDown : stenaAngleRight}
           onClick={toggleRowExpanded}
           {...requiredProps}
         />
diff --git a/packages/grid/src/features/table-ui/components/CrudStatusIndicator.tsx b/packages/grid/src/features/table-ui/components/CrudStatusIndicator.tsx
index 6ff491d9b..cfb4b48db 100644
--- a/packages/grid/src/features/table-ui/components/CrudStatusIndicator.tsx
+++ b/packages/grid/src/features/table-ui/components/CrudStatusIndicator.tsx
@@ -1,5 +1,8 @@
-import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
-import { Icon, InputSpinner } from "@stenajs-webui/elements";
+import {
+  Icon,
+  InputSpinner,
+  stenaExclamationTriangle,
+} from "@stenajs-webui/elements";
 import { CrudStatus } from "@stenajs-webui/redux";
 import { cssColor } from "@stenajs-webui/theme";
 import { Tooltip } from "@stenajs-webui/tooltip";
@@ -29,7 +32,7 @@ export const CrudStatusIndicator: React.FC<Props> = ({ crudStatus }) => {
   if (hasError) {
     const icon = (
       <Icon
-        icon={faExclamationTriangle}
+        icon={stenaExclamationTriangle}
         color={cssColor("--lhds-color-orange-600")}
         size={14}
       />
diff --git a/packages/grid/src/features/table-ui/components/ModifiedField.tsx b/packages/grid/src/features/table-ui/components/ModifiedField.tsx
index 8806363f3..f8412f54d 100644
--- a/packages/grid/src/features/table-ui/components/ModifiedField.tsx
+++ b/packages/grid/src/features/table-ui/components/ModifiedField.tsx
@@ -1,6 +1,9 @@
-import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
 import { Indent, Space, Text } from "@stenajs-webui/core";
-import { Icon, stenaArrowRight } from "@stenajs-webui/elements";
+import {
+  Icon,
+  stenaArrowRight,
+  stenaExclamationTriangle,
+} from "@stenajs-webui/elements";
 import { EntityCrudStatus, ModifiedFieldItemState } from "@stenajs-webui/redux";
 import { cssColor } from "@stenajs-webui/theme";
 import { Tooltip } from "@stenajs-webui/tooltip";
@@ -54,7 +57,7 @@ export const ModifiedField: React.FC<Props> = ({
       {showEmptyFieldWarning ? (
         <Tooltip label={warningOnEmpty!} zIndex={100}>
           <Icon
-            icon={faExclamationTriangle}
+            icon={stenaExclamationTriangle}
             color={cssColor("--lhds-color-orange-600")}
             size={14}
           />
diff --git a/packages/grid/src/features/table-ui/components/cells/EditableTextCellWithCrudAndModified.tsx b/packages/grid/src/features/table-ui/components/cells/EditableTextCellWithCrudAndModified.tsx
index 851652f64..c98e0929a 100644
--- a/packages/grid/src/features/table-ui/components/cells/EditableTextCellWithCrudAndModified.tsx
+++ b/packages/grid/src/features/table-ui/components/cells/EditableTextCellWithCrudAndModified.tsx
@@ -1,7 +1,9 @@
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
-import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
 import { Indent, Row, Space, Text } from "@stenajs-webui/core";
-import { Icon } from "@stenajs-webui/elements";
+import {
+  Icon,
+  stenaArrowRight,
+  stenaExclamationTriangle,
+} from "@stenajs-webui/elements";
 import { TextInput } from "@stenajs-webui/forms";
 import {
   EntityCrudStatusRedux,
@@ -12,8 +14,8 @@ import * as React from "react";
 import { KeyboardEventHandler, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
-  tableBorder,
   defaultTableRowHeight,
+  tableBorder,
 } from "../../../../config/TableConfig";
 import {
   useGridCell,
@@ -176,7 +178,7 @@ export const EditableTextCellWithCrudAndModified =
                 {modifiedField?.newValue !== undefined && (
                   <>
                     <Indent>
-                      <Icon icon={faArrowRight} size={12} />
+                      <Icon icon={stenaArrowRight} size={12} />
                     </Indent>
                     <Text
                       color={"var(--primary-action-color)"}
@@ -194,7 +196,7 @@ export const EditableTextCellWithCrudAndModified =
                 modifiedField?.newValue === "" ? (
                   <Tooltip label={warningOnEmpty} zIndex={100}>
                     <Icon
-                      icon={faExclamationTriangle}
+                      icon={stenaExclamationTriangle}
                       color={"var(--ui-alert1)"}
                       size={14}
                     />
diff --git a/packages/grid/src/features/table-ui/components/table/SortOrderIcon.tsx b/packages/grid/src/features/table-ui/components/table/SortOrderIcon.tsx
index 97df185af..7ceaa01c3 100644
--- a/packages/grid/src/features/table-ui/components/table/SortOrderIcon.tsx
+++ b/packages/grid/src/features/table-ui/components/table/SortOrderIcon.tsx
@@ -1,4 +1,4 @@
-import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faSortAlphaDown } from "@fortawesome/free-solid-svg-icons/faSortAlphaDown";
 import { faSortAlphaUp } from "@fortawesome/free-solid-svg-icons/faSortAlphaUp";
 import { faSortAmountDownAlt } from "@fortawesome/free-solid-svg-icons/faSortAmountDownAlt";
diff --git a/packages/grid/src/features/table-ui/components/table/TableHeadItem.tsx b/packages/grid/src/features/table-ui/components/table/TableHeadItem.tsx
index a103145d7..f1f5da8b3 100644
--- a/packages/grid/src/features/table-ui/components/table/TableHeadItem.tsx
+++ b/packages/grid/src/features/table-ui/components/table/TableHeadItem.tsx
@@ -1,9 +1,9 @@
-import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
 import { Box, BoxProps, Heading, Row, Space } from "@stenajs-webui/core";
 import {
   FlatButton,
   Icon,
   InputSpinner,
+  stenaDotsVertical,
   stenaInfoCircle,
 } from "@stenajs-webui/elements";
 import { cssColor } from "@stenajs-webui/theme";
@@ -149,7 +149,7 @@ export const TableHeadItem: React.FC<TableHeadProps> = React.memo(
               variant={"outlined"}
               arrow={false}
             >
-              <FlatButton leftIcon={faEllipsisV} size={"small"} />
+              <FlatButton leftIcon={stenaDotsVertical} size={"small"} />
             </Popover>
           ) : null}
         </Row>
diff --git a/packages/panels/src/components/collapsible/Collapsible.tsx b/packages/panels/src/components/collapsible/Collapsible.tsx
index 27c16a59d..d822d5ef5 100644
--- a/packages/panels/src/components/collapsible/Collapsible.tsx
+++ b/packages/panels/src/components/collapsible/Collapsible.tsx
@@ -1,8 +1,6 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { Clickable, ClickableProps, DivProps, Text } from "@stenajs-webui/core";
-import { Icon } from "@stenajs-webui/elements";
+import { Icon, stenaAngleDown, stenaAngleUp } from "@stenajs-webui/elements";
 import cx from "classnames";
 import * as React from "react";
 import { forwardRef } from "react";
@@ -53,9 +51,9 @@ export const Collapsible = forwardRef<HTMLButtonElement, CollapsibleProps>(
       disabled = false,
       unmountOnCollapse = false,
       mountOnEnter = true,
-      icon = faChevronUp,
-      iconCollapsed = faChevronDown,
-      iconSize = 8,
+      icon = stenaAngleUp,
+      iconCollapsed = stenaAngleDown,
+      iconSize = 16,
       children,
       autoFocus = false,
       ...divProps
diff --git a/packages/panels/src/components/collapsible/CollapsibleEmptyContent.tsx b/packages/panels/src/components/collapsible/CollapsibleEmptyContent.tsx
index 326c2d218..225715171 100644
--- a/packages/panels/src/components/collapsible/CollapsibleEmptyContent.tsx
+++ b/packages/panels/src/components/collapsible/CollapsibleEmptyContent.tsx
@@ -1,6 +1,5 @@
-import { faInbox } from "@fortawesome/free-solid-svg-icons/faInbox";
 import { Column, Space, Text } from "@stenajs-webui/core";
-import { Icon } from "@stenajs-webui/elements";
+import { Icon, stenaMail } from "@stenajs-webui/elements";
 import { cssColor } from "@stenajs-webui/theme";
 import * as React from "react";
 
@@ -9,7 +8,7 @@ interface Props {}
 export const CollapsibleEmptyContent: React.FC<Props> = () => {
   return (
     <Column indent spacing flex={1} alignItems={"center"}>
-      <Icon icon={faInbox} color={cssColor("--lhds-color-ui-500")} />
+      <Icon icon={stenaMail} color={cssColor("--lhds-color-ui-500")} />
       <Space />
       <Text size={"small"} color={cssColor("--lhds-color-ui-500")}>
         No content
diff --git a/packages/panels/src/components/nav-bar/NavBar.tsx b/packages/panels/src/components/nav-bar/NavBar.tsx
index 04ae1aff8..ef76668ec 100644
--- a/packages/panels/src/components/nav-bar/NavBar.tsx
+++ b/packages/panels/src/components/nav-bar/NavBar.tsx
@@ -1,4 +1,4 @@
-import { Box, Indent, Row } from "@stenajs-webui/core";
+import { Indent, Row } from "@stenajs-webui/core";
 import * as React from "react";
 import { ReactNode } from "react";
 import cx from "classnames";
@@ -13,7 +13,6 @@ export type NavBarVariant = "compact" | "standard" | "relaxed";
 export interface NavBarProps {
   className?: string;
   showMenuButton?: boolean;
-  menuButtonVisibility?: "visible" | "hidden";
   onClickMenuButton?: SidebarMenuButtonProps["onClick"];
   right?: ReactNode;
   center?: ReactNode;
@@ -26,7 +25,6 @@ export const NavBar: React.FC<NavBarProps> = ({
   left,
   className,
   showMenuButton = false,
-  menuButtonVisibility = "visible",
   children,
   right,
   center,
@@ -43,25 +41,18 @@ export const NavBar: React.FC<NavBarProps> = ({
         justifyContent={"flex-start"}
         alignItems={"center"}
       >
-        {showMenuButton ? (
-          <>
-            {menuButtonVisibility === "hidden" ? (
-              <Box width={"var(--swui-nav-bar-height)"} />
-            ) : (
-              <NavBarSideMenuButton onClick={onClickMenuButton} />
-            )}
-            <Indent />
-          </>
-        ) : (
-          <Indent num={2} />
-        )}
-        {left ? (
+        <Row width={"86px"} alignItems={"center"}>
+          <Indent />
+          {showMenuButton && (
+            <NavBarSideMenuButton onClick={onClickMenuButton} />
+          )}
+        </Row>
+
+        {left && (
           <>
             {left}
             <Indent num={2} />
           </>
-        ) : (
-          <Indent num={2} />
         )}
         {children && (
           <>
diff --git a/packages/panels/src/components/nav-bar/NavBarHeading.tsx b/packages/panels/src/components/nav-bar/NavBarHeading.tsx
index 4f93b14ce..06de42d7d 100644
--- a/packages/panels/src/components/nav-bar/NavBarHeading.tsx
+++ b/packages/panels/src/components/nav-bar/NavBarHeading.tsx
@@ -4,5 +4,5 @@ import { Heading, HeadingProps } from "@stenajs-webui/core";
 interface NavBarHeadingProps extends HeadingProps {}
 
 export const NavBarHeading: React.FC<NavBarHeadingProps> = (headingProps) => {
-  return <Heading whiteSpace={"nowrap"} color={"#fff"} {...headingProps} />;
+  return <Heading whiteSpace={"nowrap"} variant={"h4"} {...headingProps} />;
 };
diff --git a/packages/panels/src/components/nav-bar/NavBarNotificationButton.module.css b/packages/panels/src/components/nav-bar/NavBarNotificationButton.module.css
index cb49b660d..aee9ddbd4 100644
--- a/packages/panels/src/components/nav-bar/NavBarNotificationButton.module.css
+++ b/packages/panels/src/components/nav-bar/NavBarNotificationButton.module.css
@@ -47,18 +47,10 @@
     --swui-nav-bar-notification-button-background-color-active
   );
 
-  --swui-button-border-radius: 16px;
-  --swui-button-border-radius-icon-only: 16px;
   --swui-nav-bar-notification-shake-count: 3;
 
   transition: 0.5s width;
 
-  width: 32px;
-
-  &.hasCount {
-    width: 56px;
-  }
-
   &.unread {
     --swui-flat-button-background-color: var(
       --swui-nav-bar-notification-button-background-color-unread
diff --git a/packages/panels/src/components/nav-bar/NavBarSideMenuButton.tsx b/packages/panels/src/components/nav-bar/NavBarSideMenuButton.tsx
index b644c9939..c20eff249 100644
--- a/packages/panels/src/components/nav-bar/NavBarSideMenuButton.tsx
+++ b/packages/panels/src/components/nav-bar/NavBarSideMenuButton.tsx
@@ -1,8 +1,6 @@
 import * as React from "react";
-import cx from "classnames";
-import styles from "./NavBarSideMenuButton.module.css";
 import { DivProps } from "@stenajs-webui/core";
-import { Icon, stenaHamburger } from "@stenajs-webui/elements";
+import { FlatButton, stenaHamburger } from "@stenajs-webui/elements";
 
 export interface SidebarMenuButtonProps extends Pick<DivProps, "className"> {
   onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
@@ -13,11 +11,10 @@ export const NavBarSideMenuButton: React.FC<SidebarMenuButtonProps> = ({
   onClick,
 }) => {
   return (
-    <button
+    <FlatButton
+      leftIcon={stenaHamburger}
+      className={className}
       onClick={onClick}
-      className={cx(styles.sidebarMenuButton, className)}
-    >
-      <Icon className={styles.icon} icon={stenaHamburger} />
-    </button>
+    />
   );
 };
diff --git a/packages/panels/src/components/page-header/PageHeader.stories.tsx b/packages/panels/src/components/page-header/PageHeader.stories.tsx
index e32d6a8fb..8b17a8291 100644
--- a/packages/panels/src/components/page-header/PageHeader.stories.tsx
+++ b/packages/panels/src/components/page-header/PageHeader.stories.tsx
@@ -8,6 +8,7 @@ import {
   PrimaryButton,
   SecondaryButton,
   stenaSliders,
+  stenaUser,
   Tab,
   TabMenu,
   Tag,
@@ -19,6 +20,9 @@ import { TextInput } from "@stenajs-webui/forms";
 import { NavBar } from "../nav-bar/NavBar";
 import { cssColor } from "@stenajs-webui/theme";
 import { PageHeaderRow } from "./PageHeaderRow";
+import { NavBarHeading } from "../nav-bar/NavBarHeading";
+import { NavBarButton } from "../nav-bar/NavBarButton";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 
 export default {
   title: "panels/PageHeader",
@@ -28,60 +32,77 @@ export default {
   component: PageHeader,
 };
 
-export const Demo = () => {
+const Base: React.FC<{ icon?: IconDefinition }> = ({ icon }) => {
   const [tabId, setTabId] = useState(0);
   return (
-    <PageHeader
-      renderBreadCrumbs={() => (
-        <BreadCrumbs>
-          <Crumb label={"Home"} />
-          <Crumb label={"Customer"} />
-          <Crumb label={"Booking"} />
-        </BreadCrumbs>
-      )}
-      renderPageHeading={() => (
-        <PageHeading
-          heading={"Page Header"}
-          contentLeft={<Tag label={"56"} />}
-          contentRight={
-            <>
-              <SecondaryButton label={"Discard"} />
-              <Space />
-              <PrimaryButton label={"Save"} />
-            </>
-          }
-        />
-      )}
-      renderTabs={() => (
-        <TabMenu>
-          <Tab
-            label={"Selected"}
-            selected={tabId === 0}
-            onClick={() => setTabId(0)}
-          />
-          <Tab
-            label={"Something"}
-            selected={tabId === 1}
-            onClick={() => setTabId(1)}
-          />
-          <Tab
-            label={"Something else"}
-            selected={tabId === 2}
-            onClick={() => setTabId(2)}
+    <>
+      <NavBar
+        showMenuButton
+        left={<NavBarHeading>Stena line</NavBarHeading>}
+        right={
+          <Row>
+            <NavBarButton label={"Profile"} selected />
+            <Space />
+            <NavBarButton label={"Settings"} />
+          </Row>
+        }
+      />
+      <PageHeader
+        renderBreadCrumbs={() => (
+          <BreadCrumbs>
+            <Crumb label={"Home"} />
+            <Crumb label={"Customer"} />
+            <Crumb label={"Booking"} />
+          </BreadCrumbs>
+        )}
+        renderPageHeading={() => (
+          <PageHeading
+            icon={icon}
+            heading={"Page Header"}
+            contentLeft={<Tag label={"56"} />}
+            contentRight={
+              <>
+                <SecondaryButton label={"Discard"} />
+                <Space />
+                <PrimaryButton label={"Save"} />
+              </>
+            }
           />
-        </TabMenu>
-      )}
-    >
-      <PageHeaderRow gap={2}>
-        <Box>
-          <TextInput />
-        </Box>
-        <PrimaryButton label={"Action"} />
-      </PageHeaderRow>
-    </PageHeader>
+        )}
+        renderTabs={() => (
+          <TabMenu>
+            <Tab
+              label={"Selected"}
+              selected={tabId === 0}
+              onClick={() => setTabId(0)}
+            />
+            <Tab
+              label={"Something"}
+              selected={tabId === 1}
+              onClick={() => setTabId(1)}
+            />
+            <Tab
+              label={"Something else"}
+              selected={tabId === 2}
+              onClick={() => setTabId(2)}
+            />
+          </TabMenu>
+        )}
+      >
+        <PageHeaderRow gap={2}>
+          <Box>
+            <TextInput />
+          </Box>
+          <PrimaryButton label={"Action"} />
+        </PageHeaderRow>
+      </PageHeader>
+    </>
   );
 };
 
+export const Demo = () => <Base icon={stenaUser} />;
+export const NoIcon = () => <Base />;
+
 export const NoTabsOrHeadingContent = () => {
   return (
     <PageHeader
diff --git a/packages/panels/src/components/page-header/PageHeader.tsx b/packages/panels/src/components/page-header/PageHeader.tsx
index 8af9d1584..a394654ad 100644
--- a/packages/panels/src/components/page-header/PageHeader.tsx
+++ b/packages/panels/src/components/page-header/PageHeader.tsx
@@ -17,9 +17,14 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   children,
 }) => {
   return (
-    <Box shadow={"box"} background={cssColor("--lhds-color-ui-50")}>
+    <Box shadow={"box"} background={cssColor("--lhds-color-ui-50")} gap={2}>
       <Box indent={3}>
-        {renderBreadCrumbs && <Row spacing={1.25}>{renderBreadCrumbs()}</Row>}
+        {renderBreadCrumbs && (
+          <Row height={"32px"} alignItems={"center"}>
+            <Row width={"64px"} />
+            {renderBreadCrumbs()}
+          </Row>
+        )}
         {renderPageHeading?.()}
         {renderTabs?.()}
       </Box>
diff --git a/packages/panels/src/components/page-header/PageHeading.tsx b/packages/panels/src/components/page-header/PageHeading.tsx
index 54986f392..616ff9569 100644
--- a/packages/panels/src/components/page-header/PageHeading.tsx
+++ b/packages/panels/src/components/page-header/PageHeading.tsx
@@ -1,10 +1,13 @@
 import * as React from "react";
 import { ReactNode } from "react";
 import { Heading, HeadingVariant, Row } from "@stenajs-webui/core";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { CircledIcon } from "@stenajs-webui/elements";
 
 export type PageHeadingVariant = "compact" | "standard" | "relaxed";
 
 interface PageHeadingProps {
+  icon?: IconDefinition;
   contentLeft?: ReactNode;
   contentRight?: ReactNode;
   heading: string;
@@ -12,23 +15,26 @@ interface PageHeadingProps {
   variant?: PageHeadingVariant;
 }
 
-const variantToSpacing: Record<PageHeadingVariant, number> = {
-  compact: 1,
-  standard: 1.5,
-  relaxed: 2,
-};
-
 export const PageHeading: React.FC<PageHeadingProps> = ({
+  icon,
   heading,
   headingLevel = "h1",
-  variant = "standard",
   contentLeft,
   contentRight,
 }) => (
-  <Row spacing={variantToSpacing[variant]} alignItems={"center"} gap={2}>
-    <Heading variant={"h3"} as={headingLevel}>
-      {heading}
-    </Heading>
+  <Row alignItems={"center"} gap={2} height={"64px"}>
+    <Row alignItems={"center"}>
+      <Row width={"64px"} alignItems={"center"}>
+        {icon && (
+          <>
+            <CircledIcon icon={icon} />
+          </>
+        )}
+      </Row>
+      <Heading variant={"h3"} as={headingLevel}>
+        {heading}
+      </Heading>
+    </Row>
     <Row alignItems={"center"}>{contentLeft}</Row>
     <Row style={{ marginLeft: "auto" }} alignItems={"center"}>
       {contentRight}
diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenu.stories.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenu.stories.tsx
index a008a01ce..8a2bb1a39 100644
--- a/packages/panels/src/components/sidebar-menu/SidebarMenu.stories.tsx
+++ b/packages/panels/src/components/sidebar-menu/SidebarMenu.stories.tsx
@@ -1,12 +1,12 @@
 import { Box, Column } from "@stenajs-webui/core";
 import * as React from "react";
-import { faChartBar } from "@fortawesome/free-solid-svg-icons";
 import {
   Icon,
   stenaBusinessClaim,
   stenaBusinessInvoice,
   stenaCalendar,
   stenaSailingTicket,
+  stenaStatisticsBar,
   stenaStatisticsLine,
   stenaStatusNoShow,
 } from "@stenajs-webui/elements";
@@ -66,10 +66,16 @@ export const Overview = () => {
             selected
           />
           <SidebarMenuLink label={"Level 2.4"} onClick={onClick} />
-          <SidebarMenuCollapsible label={"Level 2.5"} leftIcon={faChartBar}>
+          <SidebarMenuCollapsible
+            label={"Level 2.5"}
+            leftIcon={stenaStatisticsBar}
+          >
             <SidebarMenuLink label={"Level 3.1"} onClick={onClick} />
             <SidebarMenuLink label={"Level 3.2"} onClick={onClick} />
-            <SidebarMenuCollapsible label={"Level 3.3"} leftIcon={faChartBar}>
+            <SidebarMenuCollapsible
+              label={"Level 3.3"}
+              leftIcon={stenaStatisticsBar}
+            >
               <SidebarMenuLink label={"Level 4.1"} onClick={onClick} />
               <SidebarMenuLink label={"Level 4.2"} onClick={onClick} />
             </SidebarMenuCollapsible>
diff --git a/packages/theme/src/styles/default-theme.css b/packages/theme/src/styles/default-theme.css
index b485d10cc..655fb0949 100644
--- a/packages/theme/src/styles/default-theme.css
+++ b/packages/theme/src/styles/default-theme.css
@@ -79,7 +79,7 @@
   --swui-field-box-size-large: 32px;
   --swui-field-box-size-medium: 24px;
   --swui-field-box-size-small: 16px;
-  --swui-field-border-radius: 8px;
+  --swui-field-border-radius: 4px;
   --swui-field-icon-color: var(--swui-text-primary-color);
   --swui-field-icon-size: 13px;
   --swui-field-indicator-active-color: var(--swui-white);