From ae32253e176f48b7384a22cb9df11458320d6947 Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Mon, 8 May 2023 09:16:18 +0200
Subject: [PATCH 01/11] Byttet ut bruk av `ds-icons` med `aksel-icons` (#1961)

---
 .changeset/stupid-boats-approve.md            | 19 +++++
 @navikt/core/css/alert.css                    |  1 -
 @navikt/core/css/chips.css                    | 17 +++--
 @navikt/core/css/date.css                     |  3 +-
 @navikt/core/css/form/search.css              |  2 +-
 @navikt/core/css/form/select.css              |  8 +-
 @navikt/core/css/form/switch.css              |  4 +-
 @navikt/core/css/read-more.css                | 30 ++++----
 @navikt/core/css/stepper.css                  | 23 ++++++
 @navikt/core/css/table.css                    | 13 ++--
 @navikt/core/css/tabs.css                     |  2 +-
 @navikt/core/css/tokens.json                  |  2 +-
 @navikt/core/react/package.json               |  1 -
 @navikt/core/react/src/alert/Alert.tsx        | 18 ++---
 .../core/react/src/button/button.stories.tsx  | 16 ++--
 @navikt/core/react/src/chips/Removable.tsx    |  4 +-
 @navikt/core/react/src/chips/Toggle.tsx       |  4 +-
 @navikt/core/react/src/date/DateInput.tsx     |  4 +-
 .../src/date/datepicker/caption/Caption.tsx   |  6 +-
 .../datepicker/caption/DropdownCaption.tsx    |  6 +-
 .../src/date/monthpicker/MonthCaption.tsx     |  6 +-
 @navikt/core/react/src/form/Select.tsx        |  5 +-
 @navikt/core/react/src/form/Switch.tsx        |  9 +--
 @navikt/core/react/src/form/search/Search.tsx |  9 ++-
 .../react/src/form/search/SearchButton.tsx    |  4 +-
 @navikt/core/react/src/help-text/HelpText.tsx |  9 +--
 .../core/react/src/help-text/HelpTextIcon.tsx | 45 +++++++++++
 .../core/react/src/link-panel/LinkPanel.tsx   |  5 +-
 @navikt/core/react/src/link/link.stories.tsx  | 12 +--
 @navikt/core/react/src/list/list.stories.tsx  | 18 ++---
 @navikt/core/react/src/modal/Modal.tsx        |  7 +-
 .../core/react/src/pagination/Pagination.tsx  |  9 ++-
 @navikt/core/react/src/read-more/ReadMore.tsx | 25 ++++---
 .../react/src/read-more/readmore.stories.tsx  |  7 +-
 @navikt/core/react/src/stepper/Step.tsx       |  9 +--
 .../react/src/stepper/stepper.stories.tsx     |  4 +-
 @navikt/core/react/src/table/ColumnHeader.tsx | 12 ++-
 .../core/react/src/table/ExpandableRow.tsx    |  8 +-
 @navikt/core/react/src/tabs/TabList.tsx       |  8 +-
 @navikt/core/react/src/tabs/Tabs.stories.tsx  | 74 ++++++++++++-------
 .../src/toggle-group/ToggleGroup.stories.tsx  | 19 +++--
 @navikt/icons/README.md                       |  8 +-
 @navikt/internal/react/package.json           |  2 +-
 .../src/copy-to-clipboard/CopyToClipboard.tsx |  4 +-
 .../copy-to-clipboard.stories.tsx             |  6 +-
 .../react/src/header/HeaderUserButton.tsx     | 11 +--
 .../react/src/header/header.stories.tsx       | 32 ++++----
 .../react/src/timeline/timeline.stories.tsx   | 73 +++++++++++++-----
 yarn.lock                                     | 57 +++++++-------
 49 files changed, 426 insertions(+), 254 deletions(-)
 create mode 100644 .changeset/stupid-boats-approve.md
 create mode 100644 @navikt/core/react/src/help-text/HelpTextIcon.tsx

diff --git a/.changeset/stupid-boats-approve.md b/.changeset/stupid-boats-approve.md
new file mode 100644
index 00000000000..530b12dcf92
--- /dev/null
+++ b/.changeset/stupid-boats-approve.md
@@ -0,0 +1,19 @@
+---
+"@navikt/ds-css": major
+"@navikt/ds-react": major
+"@navikt/ds-react-internal": major
+---
+
+Aksels løsninger bruker nå `@navikt/aksel-icons`
+
+**Sideffects:**
+
+- Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon.
+- Alert bruker samme ikonstørrelse for alle størrelser
+- Chips har justert padding/ikonstørrelser
+- Datepicker hover-bug på knapper er fikset
+- Select har fått justert padding rundt ikon
+- Switch bruker samme checkmark som checkbox, er nå også avrundet.
+- ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
+- Stepper har endret hvordan den håndterer ✔️ -ikon. Hvis du har overskrevet stepper-CSS kan det hende dette må oppdateres lokalt også.
+- Tabs bruker default text-default
diff --git a/@navikt/core/css/alert.css b/@navikt/core/css/alert.css
index 361b83abe63..893cd23337b 100644
--- a/@navikt/core/css/alert.css
+++ b/@navikt/core/css/alert.css
@@ -28,7 +28,6 @@
 }
 
 .navds-alert--small > .navds-alert__icon {
-  font-size: 1.25rem;
   height: var(--a-font-line-height-large);
 }
 
diff --git a/@navikt/core/css/chips.css b/@navikt/core/css/chips.css
index 8c4884f0c80..4e4c3823e36 100644
--- a/@navikt/core/css/chips.css
+++ b/@navikt/core/css/chips.css
@@ -63,6 +63,10 @@
   box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
 
+.navds-chips__removable {
+  gap: 0;
+}
+
 .navds-chips__removable--action {
   background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
   color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
@@ -77,22 +81,23 @@
 .navds-chips__removable-icon {
   width: 1.5rem;
   height: 1.5rem;
+  font-size: 1.25rem;
   display: grid;
   place-items: center;
   border-radius: var(--a-border-radius-full);
 }
 
 .navds-chips__toggle-icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
   display: grid;
   place-items: center;
   border-radius: var(--a-border-radius-full);
 }
 
 .navds-chips--small .navds-chips__toggle-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .navds-chips--small .navds-chips__removable-icon {
@@ -101,7 +106,7 @@
 }
 
 .navds-chips--small .navds-chips__removable-icon > svg {
-  width: 0.75rem;
+  width: 1rem;
 }
 
 .navds-chips__removable--action:focus-visible {
@@ -126,7 +131,7 @@
 }
 
 .navds-chips--icon-right {
-  padding-right: var(--a-spacing-1);
+  padding-right: 0.375rem;
 }
 
 .navds-chips--small .navds-chips--icon-right {
diff --git a/@navikt/core/css/date.css b/@navikt/core/css/date.css
index d808778a895..f8170bf4b85 100644
--- a/@navikt/core/css/date.css
+++ b/@navikt/core/css/date.css
@@ -164,7 +164,8 @@
 }
 
 .navds-date__caption-button,
-.navds-date__caption-button:disabled {
+.navds-date__caption-button:disabled,
+.navds-date__caption-button:disabled:hover {
   color: var(--ac-date-caption-text, var(--a-text-default));
 }
 
diff --git a/@navikt/core/css/form/search.css b/@navikt/core/css/form/search.css
index 4e0e105aa15..0cc6e6d2034 100644
--- a/@navikt/core/css/form/search.css
+++ b/@navikt/core/css/form/search.css
@@ -72,7 +72,7 @@
   cursor: pointer;
   background: none;
   border: none;
-  font-size: 1rem;
+  font-size: 1.25rem;
   padding: 0;
 }
 
diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css
index f65de333dbb..5b43171fc99 100644
--- a/@navikt/core/css/form/select.css
+++ b/@navikt/core/css/form/select.css
@@ -31,8 +31,8 @@
 
 .navds-select__chevron {
   position: absolute;
-  font-size: 1rem;
-  right: 0.5rem;
+  font-size: 1.5rem;
+  right: var(--a-spacing-2);
   pointer-events: none;
   align-self: center;
 }
@@ -42,6 +42,10 @@
   padding: 0 2rem 0 0.25rem;
 }
 
+.navds-form-field--small .navds-select__chevron {
+  right: 0.375rem;
+}
+
 /**
   Error handling
 */
diff --git a/@navikt/core/css/form/switch.css b/@navikt/core/css/form/switch.css
index 6e1146c2d1a..bc6b43559cb 100644
--- a/@navikt/core/css/form/switch.css
+++ b/@navikt/core/css/form/switch.css
@@ -76,7 +76,7 @@
   position: absolute;
   top: var(--a-spacing-3);
   left: 0;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--a-border-radius-full);
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -118,7 +118,7 @@
 .navds-switch__thumb {
   background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
   color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
-  border-radius: var(--a-border-radius-small);
+  border-radius: var(--a-border-radius-full);
   width: 20px;
   height: 20px;
   position: absolute;
diff --git a/@navikt/core/css/read-more.css b/@navikt/core/css/read-more.css
index fd5f8bc07f8..9050a257e54 100644
--- a/@navikt/core/css/read-more.css
+++ b/@navikt/core/css/read-more.css
@@ -32,32 +32,36 @@
 .navds-read-more__content {
   margin-top: var(--a-spacing-1);
   border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
+  margin-left: 13px;
+  padding-left: 13px;
+}
+
+.navds-read-more--small .navds-read-more__content {
   margin-left: 11px;
   padding-left: 11px;
 }
 
+.navds-read-more__content--closed {
+  display: none;
+}
+
 .navds-read-more__expand-icon {
-  font-size: 1.25rem;
-  height: 1.5rem;
+  font-size: 1.5rem;
   flex-shrink: 0;
 }
 
 .navds-read-more--small .navds-read-more__expand-icon {
-  height: 1.25rem;
-}
-
-.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
-  transform: rotate(-180deg);
+  font-size: 1.25rem;
 }
 
-.navds-read-more__expand-icon--filled {
-  display: none;
+.navds-read-more__button:hover > .navds-read-more__expand-icon {
+  transform: translateY(1px);
 }
 
-.navds-read-more__button:hover > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
-  display: inherit;
+.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
+  transform: rotate(-180deg);
 }
 
-.navds-read-more__button:hover > .navds-read-more__expand-icon {
-  display: none;
+.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
+  transform: translateY(-1px) rotate(-180deg);
 }
diff --git a/@navikt/core/css/stepper.css b/@navikt/core/css/stepper.css
index 46c35b1f038..eb7c9cded70 100644
--- a/@navikt/core/css/stepper.css
+++ b/@navikt/core/css/stepper.css
@@ -102,6 +102,8 @@ button.navds-stepper__step {
   border: none;
   background: none;
   font-size: 28px;
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-text, var(--a-surface-action));
 }
 
 .navds-stepper__content {
@@ -189,6 +191,11 @@ button.navds-stepper__step {
   background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success {
+  color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
+  background-color: var(--ac-stepper-text, var(--a-surface-action));
+}
+
 /* Non-interactive */
 :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
   color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
@@ -217,6 +224,22 @@ button.navds-stepper__step {
   color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
 }
 
+:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success {
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-active-completed, var(--a-surface-action-selected));
+}
+
+:where(.navds-stepper__step--non-interactive, .navds-stepper__step--non-interactive:hover, .navds-stepper__step--non-interactive.navds-stepper__step--active)
+  .navds-stepper__circle--success {
+  color: var(--a-text-on-inverted);
+  background-color: var(--ac-stepper-non-interactive-active-completed, var(--a-surface-inverted));
+}
+
 :where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
   color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
 }
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
+  .navds-stepper__circle--success {
+  color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-on-inverted));
+}
diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css
index f22e3a46173..4f36b553a60 100644
--- a/@navikt/core/css/table.css
+++ b/@navikt/core/css/table.css
@@ -193,19 +193,18 @@
   font-size: 1.25rem;
 }
 
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
-.navds-table__expandable-icon--filled {
-  display: none;
-}
-
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
-  display: block;
+.navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
+  transform: translateY(1px);
 }
 
 .navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
   transform: rotate(180deg);
 }
 
+.navds-table__toggle-expand-cell--open .navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
+  transform: translateY(-1px) rotate(180deg);
+}
+
 .navds-table__expanded-row-cell {
   padding: 0;
 }
diff --git a/@navikt/core/css/tabs.css b/@navikt/core/css/tabs.css
index c1ca83b45f7..bc2cbb6b624 100644
--- a/@navikt/core/css/tabs.css
+++ b/@navikt/core/css/tabs.css
@@ -49,7 +49,7 @@
   align-items: center;
   background: none;
   border: none;
-  color: var(--ac-tabs-text, var(--a-text-subtle));
+  color: var(--ac-tabs-text, var(--a-text-default));
   cursor: pointer;
 }
 
diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
index 4147421256d..aacde5ffc1c 100644
--- a/@navikt/core/css/tokens.json
+++ b/@navikt/core/css/tokens.json
@@ -226,7 +226,7 @@
   },
   "tabs": {
     "--ac-tabs-border": "--a-border-divider",
-    "--ac-tabs-text": "--a-text-subtle",
+    "--ac-tabs-text": "--a-text-default",
     "--ac-tabs-hover-border": "--a-border-subtle-hover",
     "--ac-tabs-selected-border": "--a-border-action",
     "--ac-tabs-selected-text": "--a-text-default",
diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json
index 86ea971995b..7970983770d 100644
--- a/@navikt/core/react/package.json
+++ b/@navikt/core/react/package.json
@@ -39,7 +39,6 @@
   "dependencies": {
     "@floating-ui/react": "0.17.0",
     "@navikt/aksel-icons": "^2.9.8",
-    "@navikt/ds-icons": "^2.9.8",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",
diff --git a/@navikt/core/react/src/alert/Alert.tsx b/@navikt/core/react/src/alert/Alert.tsx
index 4b4e2621a4c..7e9425e008c 100644
--- a/@navikt/core/react/src/alert/Alert.tsx
+++ b/@navikt/core/react/src/alert/Alert.tsx
@@ -1,9 +1,9 @@
 import {
-  ErrorFilled,
-  InformationFilled,
-  SuccessFilled,
-  WarningFilled,
-} from "@navikt/ds-icons";
+  InformationSquareFillIcon,
+  CheckmarkCircleFillIcon,
+  ExclamationmarkTriangleFillIcon,
+  XMarkOctagonFillIcon,
+} from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyLong } from "../typography/BodyLong";
@@ -37,13 +37,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 const Icon = ({ variant, ...props }) => {
   switch (variant) {
     case "error":
-      return <ErrorFilled title="Feil" {...props} />;
+      return <XMarkOctagonFillIcon title="Feil" {...props} />;
     case "warning":
-      return <WarningFilled title="Advarsel" {...props} />;
+      return <ExclamationmarkTriangleFillIcon title="Advarsel" {...props} />;
     case "info":
-      return <InformationFilled title="Informasjon" {...props} />;
+      return <InformationSquareFillIcon title="Informasjon" {...props} />;
     case "success":
-      return <SuccessFilled title="Suksess" {...props} />;
+      return <CheckmarkCircleFillIcon title="Suksess" {...props} />;
     default:
       return null;
   }
diff --git a/@navikt/core/react/src/button/button.stories.tsx b/@navikt/core/react/src/button/button.stories.tsx
index 67f429d79a8..b760aff0fc9 100644
--- a/@navikt/core/react/src/button/button.stories.tsx
+++ b/@navikt/core/react/src/button/button.stories.tsx
@@ -1,4 +1,4 @@
-import { Star } from "@navikt/ds-icons";
+import { StarIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { Button } from "./index";
 
@@ -45,7 +45,7 @@ export const Default = {
         variant={props.variant}
         size={props.size}
         loading={props.loading}
-        icon={props.icon ? <Star /> : undefined}
+        icon={props.icon ? <StarIcon /> : undefined}
         iconPosition={props.iconPosition}
       >
         {props.children}
@@ -159,7 +159,7 @@ export const Icon = () => (
         <Button
           key={variant}
           variant={variant}
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
         />
       ))}
     </div>
@@ -169,7 +169,7 @@ export const Icon = () => (
           key={variant}
           variant={variant}
           size="small"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
         />
       ))}
     </div>
@@ -179,7 +179,7 @@ export const Icon = () => (
           key={variant}
           variant={variant}
           size="xsmall"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
         />
       ))}
     </div>
@@ -193,7 +193,7 @@ export const IconWText = () => (
         <Button
           key={variant}
           variant={variant}
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
           iconPosition={i % 2 ? "left" : "right"}
         >
           {varSwitch[variant]}
@@ -206,7 +206,7 @@ export const IconWText = () => (
           key={variant}
           variant={variant}
           size="small"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
           iconPosition={i % 2 ? "left" : "right"}
         >
           {varSwitch[variant]}
@@ -219,7 +219,7 @@ export const IconWText = () => (
           key={variant}
           variant={variant}
           size="xsmall"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
           iconPosition={i % 2 ? "left" : "right"}
         >
           {varSwitch[variant]}
diff --git a/@navikt/core/react/src/chips/Removable.tsx b/@navikt/core/react/src/chips/Removable.tsx
index 1bb425c76d4..65497ca58e8 100644
--- a/@navikt/core/react/src/chips/Removable.tsx
+++ b/@navikt/core/react/src/chips/Removable.tsx
@@ -1,4 +1,4 @@
-import { Close } from "@navikt/ds-icons";
+import { XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
@@ -58,7 +58,7 @@ export const RemovableChips: OverridableComponent<
       >
         <span className="navds-chips__chip-text">{children}</span>
         <span className="navds-chips__removable-icon">
-          <Close aria-hidden />
+          <XMarkIcon aria-hidden />
         </span>
       </Component>
     );
diff --git a/@navikt/core/react/src/chips/Toggle.tsx b/@navikt/core/react/src/chips/Toggle.tsx
index ceabaa86cb3..1da34f3b984 100644
--- a/@navikt/core/react/src/chips/Toggle.tsx
+++ b/@navikt/core/react/src/chips/Toggle.tsx
@@ -1,4 +1,4 @@
-import { SuccessStroke } from "@navikt/ds-icons";
+import { CheckmarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
@@ -30,7 +30,7 @@ export const ToggleChips: ToggleChipsType = forwardRef(
         aria-pressed={selected}
       >
         {selected && (
-          <SuccessStroke aria-hidden className="navds-chips__toggle-icon" />
+          <CheckmarkIcon aria-hidden className="navds-chips__toggle-icon" />
         )}
         <span className="navds-chips__chip-text">{children}</span>
       </Component>
diff --git a/@navikt/core/react/src/date/DateInput.tsx b/@navikt/core/react/src/date/DateInput.tsx
index 87b7534c663..b30235d0dc7 100644
--- a/@navikt/core/react/src/date/DateInput.tsx
+++ b/@navikt/core/react/src/date/DateInput.tsx
@@ -1,4 +1,4 @@
-import { Calender } from "@navikt/ds-icons";
+import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, Button, ErrorMessage, Label, omit } from "..";
@@ -124,7 +124,7 @@ const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
             tabIndex={open ? -1 : 0}
             disabled={inputProps.disabled}
             icon={
-              <Calender
+              <CalendarIcon
                 title={
                   open
                     ? conditionalVariables.iconTitle.close
diff --git a/@navikt/core/react/src/date/datepicker/caption/Caption.tsx b/@navikt/core/react/src/date/datepicker/caption/Caption.tsx
index 80cebce82f1..152d3eb5b11 100644
--- a/@navikt/core/react/src/date/datepicker/caption/Caption.tsx
+++ b/@navikt/core/react/src/date/datepicker/caption/Caption.tsx
@@ -1,4 +1,4 @@
-import { Left, Right } from "@navikt/ds-icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { Button, Label } from "../../..";
@@ -32,13 +32,13 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
           variant="tertiary"
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<Left title="velg forrige måned" />}
+          icon={<ArrowLeftIcon title="velg forrige måned" />}
           className="navds-date__caption-button"
           type="button"
         />
         <Button
           aria-label={nextLabel}
-          icon={<Right title="velg neste måned" />}
+          icon={<ArrowRightIcon title="velg neste måned" />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
           variant="tertiary"
diff --git a/@navikt/core/react/src/date/datepicker/caption/DropdownCaption.tsx b/@navikt/core/react/src/date/datepicker/caption/DropdownCaption.tsx
index a6216f11017..b4e192d635b 100644
--- a/@navikt/core/react/src/date/datepicker/caption/DropdownCaption.tsx
+++ b/@navikt/core/react/src/date/datepicker/caption/DropdownCaption.tsx
@@ -1,4 +1,4 @@
-import { Left, Right } from "@navikt/ds-icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import setMonth from "date-fns/setMonth";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
@@ -58,7 +58,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
         variant="tertiary"
         disabled={!previousMonth}
         onClick={() => previousMonth && goToMonth(previousMonth)}
-        icon={<Left title="velg forrige måned" />}
+        icon={<ArrowLeftIcon title="velg forrige måned" />}
         className="navds-date__caption-button"
         type="button"
       />
@@ -94,7 +94,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
 
       <Button
         aria-label={nextLabel}
-        icon={<Right title="velg neste måned" />}
+        icon={<ArrowRightIcon title="velg neste måned" />}
         onClick={() => nextMonth && goToMonth(nextMonth)}
         disabled={!nextMonth}
         variant="tertiary"
diff --git a/@navikt/core/react/src/date/monthpicker/MonthCaption.tsx b/@navikt/core/react/src/date/monthpicker/MonthCaption.tsx
index 4744a19e1f1..3ba7a12972f 100644
--- a/@navikt/core/react/src/date/monthpicker/MonthCaption.tsx
+++ b/@navikt/core/react/src/date/monthpicker/MonthCaption.tsx
@@ -1,4 +1,4 @@
-import { Left, Right } from "@navikt/ds-icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
@@ -61,7 +61,7 @@ export const MonthCaption = () => {
         disabled={hasPrevYear()}
         onClick={() => handleButtonClick(-1)}
         aria-label={labelPrevYear(locale?.code)}
-        icon={<Left aria-hidden />}
+        icon={<ArrowLeftIcon aria-hidden />}
         variant="tertiary"
         type="button"
       />
@@ -90,7 +90,7 @@ export const MonthCaption = () => {
         disabled={hasNextYear()}
         onClick={() => handleButtonClick(1)}
         aria-label={labelNextYear(locale?.code)}
-        icon={<Right aria-hidden />}
+        icon={<ArrowRightIcon aria-hidden />}
         variant="tertiary"
         type="button"
       />
diff --git a/@navikt/core/react/src/form/Select.tsx b/@navikt/core/react/src/form/Select.tsx
index 57e23ad288c..91d4eef4151 100644
--- a/@navikt/core/react/src/form/Select.tsx
+++ b/@navikt/core/react/src/form/Select.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef, SelectHTMLAttributes } from "react";
 import cl from "clsx";
-import { Expand } from "@navikt/ds-icons";
+
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyLong, Label, ErrorMessage, omit, Detail } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
@@ -113,7 +114,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           >
             {children}
           </select>
-          <Expand className="navds-select__chevron" aria-hidden />
+          <ChevronDownIcon className="navds-select__chevron" aria-hidden />
         </div>
         <div
           className="navds-form-field__error"
diff --git a/@navikt/core/react/src/form/Switch.tsx b/@navikt/core/react/src/form/Switch.tsx
index a73f197aae5..f3b955c83a2 100644
--- a/@navikt/core/react/src/form/Switch.tsx
+++ b/@navikt/core/react/src/form/Switch.tsx
@@ -10,9 +10,9 @@ import { FormFieldProps, useFormField } from "./useFormField";
 
 const SelectedIcon = () => (
   <svg
-    width="12px"
-    height="12px"
-    viewBox="0 0 12 12"
+    width="12"
+    height="10"
+    viewBox="0 0 12 10"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     focusable={false}
@@ -23,9 +23,8 @@ const SelectedIcon = () => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z"
+      d="M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z"
       fill="currentColor"
-      stroke="currentColor"
     />
   </svg>
 );
diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx
index a431b25548a..b496ddcd59d 100644
--- a/@navikt/core/react/src/form/search/Search.tsx
+++ b/@navikt/core/react/src/form/search/Search.tsx
@@ -1,4 +1,4 @@
-import { Close, Search as SearchIcon } from "@navikt/ds-icons";
+import { XMarkIcon, MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, {
   forwardRef,
@@ -194,7 +194,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         <div className="navds-search__wrapper">
           <div className="navds-search__wrapper-inner">
             {variant === "simple" && (
-              <SearchIcon aria-hidden className="navds-search__search-icon" />
+              <MagnifyingGlassIcon
+                aria-hidden
+                className="navds-search__search-icon"
+              />
             )}
             <input
               ref={mergedRef}
@@ -222,7 +225,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 <span className="navds-sr-only">
                   {clearButtonLabel ? clearButtonLabel : "Tøm"}
                 </span>
-                <Close aria-hidden />
+                <XMarkIcon aria-hidden />
               </button>
             )}
           </div>
diff --git a/@navikt/core/react/src/form/search/SearchButton.tsx b/@navikt/core/react/src/form/search/SearchButton.tsx
index 61da451c430..59dce601da0 100644
--- a/@navikt/core/react/src/form/search/SearchButton.tsx
+++ b/@navikt/core/react/src/form/search/SearchButton.tsx
@@ -1,8 +1,8 @@
-import { Search } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Button, ButtonProps } from "../..";
 import { SearchContext } from "./Search";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 
 export interface SearchButtonProps
   extends Omit<ButtonProps, "size" | "children" | "variant"> {
@@ -41,7 +41,7 @@ const SearchButton: SearchButtonType = forwardRef(
           onClick?.(e);
         }}
         icon={
-          <Search
+          <MagnifyingGlassIcon
             {...(children ? { "aria-hidden": true } : { title: "Søk" })}
           />
         }
diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx
index 88065aacaea..1a7a3c27d1a 100644
--- a/@navikt/core/react/src/help-text/HelpText.tsx
+++ b/@navikt/core/react/src/help-text/HelpText.tsx
@@ -1,7 +1,7 @@
-import { Helptext as HelpTextIcon, HelptextFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { Popover, PopoverProps, mergeRefs } from "..";
+import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -61,11 +61,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           type="button"
           aria-expanded={open}
         >
-          <HelpTextIcon className="navds-help-text__icon" title={title} />
-          <HelptextFilled
-            className="navds-help-text__icon navds-help-text__icon--filled"
-            title={title}
-          />
+          <HelpTextIcon title={title} />
+          <HelpTextIcon filled title={title} />
         </button>
         <Popover
           onClose={() => setOpen(false)}
diff --git a/@navikt/core/react/src/help-text/HelpTextIcon.tsx b/@navikt/core/react/src/help-text/HelpTextIcon.tsx
new file mode 100644
index 00000000000..f9770a614b2
--- /dev/null
+++ b/@navikt/core/react/src/help-text/HelpTextIcon.tsx
@@ -0,0 +1,45 @@
+import cl from "clsx";
+import React from "react";
+import { useId } from "../util/useId";
+
+export const HelpTextIcon = ({
+  title,
+  filled = false,
+}: {
+  title: string;
+  filled?: boolean;
+}) => {
+  let titleId: string | undefined = useId();
+  titleId = title ? `title-${titleId}` : undefined;
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      focusable={false}
+      role="img"
+      aria-labelledby={titleId}
+      className={cl("navds-help-text__icon", {
+        "navds-help-text__icon--filled": filled,
+      })}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <circle
+        cx="12"
+        cy="12"
+        r="11"
+        strokeWidth="2"
+        stroke="currentColor"
+        fill={filled ? "currentColor" : "transparent"}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.75 9C9.75 7.75736 10.7574 6.75 12 6.75H12.1716C13.3195 6.75 14.25 7.68054 14.25 8.82843C14.25 9.37966 14.031 9.90832 13.6412 10.2981L12.6412 11.2981C11.7504 12.1889 11.25 13.3971 11.25 14.6569C11.25 15.0711 11.5858 15.4069 12 15.4069C12.4142 15.4069 12.75 15.0711 12.75 14.6569C12.75 13.7949 13.0924 12.9682 13.7019 12.3588L14.7019 11.3588C15.373 10.6877 15.75 9.77748 15.75 8.82843C15.75 6.85212 14.1479 5.25 12.1716 5.25H12C9.92893 5.25 8.25 6.92893 8.25 9V9.5C8.25 9.91421 8.58579 10.25 9 10.25C9.41421 10.25 9.75 9.91421 9.75 9.5V9ZM12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5Z"
+        fill={filled ? "var(--a-surface-default)" : "currentColor"}
+      />
+    </svg>
+  );
+};
diff --git a/@navikt/core/react/src/link-panel/LinkPanel.tsx b/@navikt/core/react/src/link-panel/LinkPanel.tsx
index 04eb6d7ddb1..7cf984b6247 100644
--- a/@navikt/core/react/src/link-panel/LinkPanel.tsx
+++ b/@navikt/core/react/src/link-panel/LinkPanel.tsx
@@ -1,12 +1,13 @@
 import React, { forwardRef } from "react";
 import { Panel, OverridableComponent } from "..";
-import { Next } from "@navikt/ds-icons";
+
 import cl from "clsx";
 import { LinkPanelTitle, LinkPanelTitleType } from "./LinkPanelTitle";
 import {
   LinkPanelDescription,
   LinkPanelDescriptionType,
 } from "./LinkPanelDescription";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
 
 export interface LinkPanelProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -41,7 +42,7 @@ export const LinkPanelComponent: OverridableComponent<
         className={cl("navds-link-panel", className)}
       >
         <div className="navds-link-panel__content">{children}</div>
-        <Next className="navds-link-panel__chevron" aria-hidden />
+        <ChevronRightIcon className="navds-link-panel__chevron" aria-hidden />
       </Panel>
     );
   }
diff --git a/@navikt/core/react/src/link/link.stories.tsx b/@navikt/core/react/src/link/link.stories.tsx
index 8dc0e298308..d72194d6125 100644
--- a/@navikt/core/react/src/link/link.stories.tsx
+++ b/@navikt/core/react/src/link/link.stories.tsx
@@ -1,10 +1,10 @@
-import { Add } from "@navikt/ds-icons";
+import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import React from "react";
 import {
+  BodyLong,
+  Alert as DsAlert,
   ConfirmationPanel as DsConfirmationPanel,
   Link,
-  Alert as DsAlert,
-  BodyLong,
 } from "..";
 export default {
   title: "ds-react/Link",
@@ -15,7 +15,8 @@ export const Default = {
   render: (props) => {
     const LinkD = () => (
       <Link href="#">
-        {props.icon && <Add />}Ex aliqua incididunt {props.icon && <Add />}
+        {props.icon && <PlusCircleFillIcon />}Ex aliqua incididunt{" "}
+        {props.icon && <PlusCircleFillIcon />}
       </Link>
     );
 
@@ -41,7 +42,8 @@ export const Default = {
 
 const DemoLink = () => (
   <Link href="#">
-    <Add aria-hidden /> Ex aliqua incididunt <Add aria-hidden />
+    <PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}
+    <PlusCircleFillIcon aria-hidden />
   </Link>
 );
 
diff --git a/@navikt/core/react/src/list/list.stories.tsx b/@navikt/core/react/src/list/list.stories.tsx
index c22822e7332..e9b05d57ac4 100644
--- a/@navikt/core/react/src/list/list.stories.tsx
+++ b/@navikt/core/react/src/list/list.stories.tsx
@@ -1,9 +1,9 @@
 import {
-  BabyChangingRoom,
-  Braille,
-  Cognition,
-  Refresh,
-} from "@navikt/ds-icons";
+  BabyWrappedIcon,
+  BrailleIcon,
+  HeadHeartIcon,
+  RecycleIcon,
+} from "@navikt/aksel-icons";
 import { Meta } from "@storybook/react";
 import React from "react";
 import { List } from "..";
@@ -97,20 +97,20 @@ export const Icons = {
       <List>
         <List.Item
           title="Lorem Ipsum Dolor Sit Amet"
-          icon={<Braille aria-hidden />}
+          icon={<BrailleIcon aria-hidden />}
         >
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
         <List.Item
           title="Consectetur Adipiscing Elit"
-          icon={<Cognition aria-hidden />}
+          icon={<HeadHeartIcon aria-hidden />}
         >
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
-        <List.Item icon={<BabyChangingRoom aria-hidden />}>
+        <List.Item icon={<BabyWrappedIcon aria-hidden />}>
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
-        <List.Item icon={<Refresh aria-hidden />}>
+        <List.Item icon={<RecycleIcon aria-hidden />}>
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
       </List>
diff --git a/@navikt/core/react/src/modal/Modal.tsx b/@navikt/core/react/src/modal/Modal.tsx
index 8e6f7da2808..9f9e8b8f9d4 100644
--- a/@navikt/core/react/src/modal/Modal.tsx
+++ b/@navikt/core/react/src/modal/Modal.tsx
@@ -1,9 +1,10 @@
 import React, { forwardRef, useEffect, useMemo, useRef } from "react";
 import cl from "clsx";
 import ReactModal from "react-modal";
-import { Close } from "@navikt/ds-icons";
+
 import { Button, mergeRefs, useProvider } from "..";
 import ModalContent, { ModalContentType } from "./ModalContent";
+import { XMarkIcon } from "@navikt/aksel-icons";
 
 export interface ModalProps {
   /**
@@ -144,10 +145,10 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
               "navds-modal__button--shake": shouldCloseOnOverlayClick,
             })}
             size="small"
-            variant="tertiary"
+            variant="tertiary-neutral"
             ref={buttonRef}
             onClick={onClose}
-            icon={<Close title="Lukk modalvindu" />}
+            icon={<XMarkIcon title="Lukk modalvindu" />}
           />
         )}
       </ReactModal>
diff --git a/@navikt/core/react/src/pagination/Pagination.tsx b/@navikt/core/react/src/pagination/Pagination.tsx
index c58721b5a08..747f93c2b88 100644
--- a/@navikt/core/react/src/pagination/Pagination.tsx
+++ b/@navikt/core/react/src/pagination/Pagination.tsx
@@ -1,6 +1,7 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { Back, Next } from "@navikt/ds-icons";
+import React, { forwardRef } from "react";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { BodyShort } from "..";
 import PaginationItem, {
   PaginationItemProps,
@@ -145,7 +146,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               page={page - 1}
               size={size}
               icon={
-                <Back
+                <ChevronLeftIcon
                   className="navds-pagination__prev-next-icon"
                   {...(prevNextTexts
                     ? { "aria-hidden": true }
@@ -199,7 +200,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               page={page + 1}
               size={size}
               icon={
-                <Next
+                <ChevronRightIcon
                   className="navds-pagination__prev-next-icon"
                   {...(prevNextTexts
                     ? { "aria-hidden": true }
diff --git a/@navikt/core/react/src/read-more/ReadMore.tsx b/@navikt/core/react/src/read-more/ReadMore.tsx
index 469fb0e2a5b..01468365bb2 100644
--- a/@navikt/core/react/src/read-more/ReadMore.tsx
+++ b/@navikt/core/react/src/read-more/ReadMore.tsx
@@ -1,9 +1,7 @@
 import React, { forwardRef, useState } from "react";
 import cl from "clsx";
-import { Expand } from "@navikt/ds-icons";
 import { BodyLong } from "../typography";
-import { ExpandFilled } from "@navikt/ds-icons";
-import AnimateHeight from "../util/AnimateHeight";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -74,18 +72,23 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           }}
           aria-expanded={isOpened}
         >
-          <Expand className="navds-read-more__expand-icon" aria-hidden />
-          <ExpandFilled
-            className="navds-read-more__expand-icon navds-read-more__expand-icon--filled"
+          <ChevronDownIcon
+            className="navds-read-more__expand-icon"
             aria-hidden
           />
           <span>{header}</span>
         </button>
-        <AnimateHeight height={isOpened ? "auto" : 0} duration={250}>
-          <BodyLong as="div" className="navds-read-more__content" size={size}>
-            {children}
-          </BodyLong>
-        </AnimateHeight>
+
+        <BodyLong
+          as="div"
+          aria-hidden={!isOpened}
+          className={cl("navds-read-more__content", {
+            "navds-read-more__content--closed": !isOpened,
+          })}
+          size={size}
+        >
+          {children}
+        </BodyLong>
       </div>
     );
   }
diff --git a/@navikt/core/react/src/read-more/readmore.stories.tsx b/@navikt/core/react/src/read-more/readmore.stories.tsx
index 5996b3b8008..a40c311f8ac 100644
--- a/@navikt/core/react/src/read-more/readmore.stories.tsx
+++ b/@navikt/core/react/src/read-more/readmore.stories.tsx
@@ -26,8 +26,11 @@ export const Default = {
         header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
         size={props.size}
       >
-        Command station, this is ST 321. Code Clearance Blue. We're starting our
-        approach. Deactivate the security shield.
+        <div style={{ maxWidth: 300 }}>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia,
+          tempore corporis exercitationem minus dignissimos eius aspernatur
+          fugiat iusto.
+        </div>
       </ReadMore>
     );
   },
diff --git a/@navikt/core/react/src/stepper/Step.tsx b/@navikt/core/react/src/stepper/Step.tsx
index 4fc5121673f..b67803e7b93 100644
--- a/@navikt/core/react/src/stepper/Step.tsx
+++ b/@navikt/core/react/src/stepper/Step.tsx
@@ -1,4 +1,4 @@
-import { SuccessFilled } from "@navikt/ds-icons";
+import { CheckmarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Label, OverridableComponent } from "..";
@@ -74,10 +74,9 @@ export const StepComponent: OverridableComponent<
         }}
       >
         {completed ? (
-          <SuccessFilled
-            aria-hidden
-            className="navds-stepper__circle navds-stepper__circle--success"
-          />
+          <span className="navds-stepper__circle navds-stepper__circle--success">
+            <CheckmarkIcon aria-hidden />
+          </span>
         ) : (
           <Label className="navds-stepper__circle" as="span" aria-hidden="true">
             {unsafe_index + 1}
diff --git a/@navikt/core/react/src/stepper/stepper.stories.tsx b/@navikt/core/react/src/stepper/stepper.stories.tsx
index 718dcee4eaa..49ecb99f104 100644
--- a/@navikt/core/react/src/stepper/stepper.stories.tsx
+++ b/@navikt/core/react/src/stepper/stepper.stories.tsx
@@ -175,9 +175,7 @@ export const CompletedSteps = () => {
         onStepChange={(step) => setActiveStep(step)}
       >
         <Stepper.Step completed={activeStep > 1}>Start søknad</Stepper.Step>
-        <Stepper.Step completed={activeStep > 2}>
-          Personopplysninger
-        </Stepper.Step>
+        <Stepper.Step completed>Personopplysninger</Stepper.Step>
         <Stepper.Step completed={activeStep > 3}>Saksopplysninger</Stepper.Step>
         <Stepper.Step completed={activeStep >= 4}>
           Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
diff --git a/@navikt/core/react/src/table/ColumnHeader.tsx b/@navikt/core/react/src/table/ColumnHeader.tsx
index 0485408a160..2156a45c60a 100644
--- a/@navikt/core/react/src/table/ColumnHeader.tsx
+++ b/@navikt/core/react/src/table/ColumnHeader.tsx
@@ -1,7 +1,11 @@
 import React, { forwardRef, useContext } from "react";
-import { Down, Up, UpDown } from "@navikt/ds-icons";
 import { TableContext } from "./Table";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ArrowsUpDownIcon,
+} from "@navikt/aksel-icons";
 
 export interface ColumnHeaderProps extends HeaderCellProps {
   /**
@@ -55,12 +59,12 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
             {children}
             {context?.sort?.orderBy === sortKey ? (
               context?.sort?.direction === "descending" ? (
-                <Down aria-hidden />
+                <ArrowDownIcon aria-hidden />
               ) : (
-                <Up aria-hidden />
+                <ArrowUpIcon aria-hidden />
               )
             ) : (
-              <UpDown aria-hidden />
+              <ArrowsUpDownIcon aria-hidden />
             )}
           </button>
         ) : (
diff --git a/@navikt/core/react/src/table/ExpandableRow.tsx b/@navikt/core/react/src/table/ExpandableRow.tsx
index 11b347f1d56..ecfb93cd8de 100644
--- a/@navikt/core/react/src/table/ExpandableRow.tsx
+++ b/@navikt/core/react/src/table/ExpandableRow.tsx
@@ -1,10 +1,10 @@
-import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { useId } from "..";
 import AnimateHeight from "../util/AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface ExpandableRowProps extends Omit<RowProps, "content"> {
   /**
@@ -96,14 +96,10 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
                   }
                 }}
               >
-                <Expand
+                <ChevronDownIcon
                   className="navds-table__expandable-icon"
                   title={isOpen ? "Vis mindre" : "Vis mer"}
                 />
-                <ExpandFilled
-                  className="navds-table__expandable-icon navds-table__expandable-icon--filled"
-                  title={isOpen ? "Vis mindre" : "Vis mer"}
-                />
               </button>
             )}
           </DataCell>
diff --git a/@navikt/core/react/src/tabs/TabList.tsx b/@navikt/core/react/src/tabs/TabList.tsx
index a6de30c939d..97111c755dc 100644
--- a/@navikt/core/react/src/tabs/TabList.tsx
+++ b/@navikt/core/react/src/tabs/TabList.tsx
@@ -1,4 +1,4 @@
-import { Back, Next } from "@navikt/ds-icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { TabsList } from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, {
@@ -9,7 +9,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { mergeRefs, debounce } from "..";
+import { debounce, mergeRefs } from "..";
 import { TabsContext } from "./Tabs";
 
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -103,9 +103,9 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
         }}
       >
         {dir === -1 ? (
-          <Back title="scroll tilbake" />
+          <ChevronLeftIcon title="scroll tilbake" />
         ) : (
-          <Next title="scroll neste" />
+          <ChevronRightIcon title="scroll neste" />
         )}
       </div>
     );
diff --git a/@navikt/core/react/src/tabs/Tabs.stories.tsx b/@navikt/core/react/src/tabs/Tabs.stories.tsx
index cdeab32880b..52fc9b2165a 100644
--- a/@navikt/core/react/src/tabs/Tabs.stories.tsx
+++ b/@navikt/core/react/src/tabs/Tabs.stories.tsx
@@ -1,7 +1,7 @@
-import { Cup, Dishwasher, Freezer } from "@navikt/ds-icons";
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Tabs } from ".";
+import { FreezerIcon, MugIcon, DishwasherIcon } from "@navikt/aksel-icons";
 
 export default {
   title: "ds-react/Tabs",
@@ -65,9 +65,13 @@ export const Default = {
         iconPosition={props?.iconPosition}
       >
         <Tabs.List>
-          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+          <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+          <Tabs.Tab
+            value="test2"
+            label="Oppvaskmaskin"
+            icon={<DishwasherIcon />}
+          />
+          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
         </Tabs.List>
         <Panel />
       </Tabs>
@@ -84,9 +88,13 @@ export const Small = () => {
   return (
     <Tabs defaultValue="test2" size="small">
       <Tabs.List>
-        <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-        <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-        <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+        <Tabs.Tab
+          value="test2"
+          label="Oppvaskmaskin"
+          icon={<DishwasherIcon />}
+        />
+        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
       </Tabs.List>
       <Panel />
     </Tabs>
@@ -98,9 +106,13 @@ export const Controlled = () => {
   return (
     <Tabs value={activeValue} onChange={setActiveValue}>
       <Tabs.List>
-        <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-        <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-        <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+        <Tabs.Tab
+          value="test2"
+          label="Oppvaskmaskin"
+          icon={<DishwasherIcon />}
+        />
+        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
       </Tabs.List>
       <Panel />
     </Tabs>
@@ -112,17 +124,25 @@ export const IconPosition = () => {
     <div className="colgap">
       <Tabs defaultValue="test2" size="small">
         <Tabs.List>
-          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+          <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+          <Tabs.Tab
+            value="test2"
+            label="Oppvaskmaskin"
+            icon={<DishwasherIcon />}
+          />
+          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
         </Tabs.List>
         <Panel />
       </Tabs>
       <Tabs defaultValue="test2" size="small" iconPosition="top">
         <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+          <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+          <Tabs.Tab
+            value="test2"
+            label="Oppvaskmaskin"
+            icon={<DishwasherIcon />}
+          />
+          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
         </Tabs.List>
         <Panel />
       </Tabs>
@@ -135,17 +155,17 @@ export const Icon = () => {
     <div className="colgap">
       <Tabs defaultValue="test2">
         <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<Cup />} />
-          <Tabs.Tab value="test2" icon={<Dishwasher />} />
-          <Tabs.Tab value="test3" icon={<Freezer />} />
+          <Tabs.Tab value="test1" icon={<MugIcon />} />
+          <Tabs.Tab value="test2" icon={<DishwasherIcon />} />
+          <Tabs.Tab value="test3" icon={<FreezerIcon />} />
         </Tabs.List>
         <Panel />
       </Tabs>
       <Tabs defaultValue="test2" size="small" iconPosition="top">
         <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<Cup />} />
-          <Tabs.Tab value="test2" icon={<Dishwasher />} />
-          <Tabs.Tab value="test3" icon={<Freezer />} />
+          <Tabs.Tab value="test1" icon={<MugIcon />} />
+          <Tabs.Tab value="test2" icon={<DishwasherIcon />} />
+          <Tabs.Tab value="test3" icon={<FreezerIcon />} />
         </Tabs.List>
         <Panel />
       </Tabs>
@@ -157,9 +177,13 @@ export const Overflow = () => {
   return (
     <Tabs defaultValue="test2" style={{ maxWidth: 300 }}>
       <Tabs.List>
-        <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-        <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-        <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+        <Tabs.Tab
+          value="test2"
+          label="Oppvaskmaskin"
+          icon={<DishwasherIcon />}
+        />
+        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
       </Tabs.List>
       <Panel />
     </Tabs>
diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
index 6fac0767411..2e83bde7eac 100644
--- a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
+++ b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
@@ -1,5 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { Email, EmailOpened, Send } from "@navikt/ds-icons";
+
+import {
+  EnvelopeClosedIcon,
+  EnvelopeOpenIcon,
+  InboxUpIcon,
+} from "@navikt/aksel-icons";
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { ToggleGroup } from "../index";
@@ -27,28 +32,28 @@ const Items = (icon?: boolean, both?: boolean) => (
     <ToggleGroup.Item value="ulest">
       {both ? (
         <>
-          <Email /> Uleste
+          <EnvelopeClosedIcon /> Uleste
         </>
       ) : (
-        <>{icon ? <Email /> : "Uleste"}</>
+        <>{icon ? <EnvelopeClosedIcon /> : "Uleste"}</>
       )}
     </ToggleGroup.Item>
     <ToggleGroup.Item value="lest">
       {both ? (
         <>
-          <EmailOpened /> Leste
+          <EnvelopeOpenIcon /> Leste
         </>
       ) : (
-        <>{icon ? <EmailOpened /> : "Leste"}</>
+        <>{icon ? <EnvelopeOpenIcon /> : "Leste"}</>
       )}
     </ToggleGroup.Item>
     <ToggleGroup.Item value="sendt">
       {both ? (
         <>
-          <Send /> Sendte
+          <InboxUpIcon /> Sendt
         </>
       ) : (
-        <>{icon ? <Send /> : "Sendte"}</>
+        <>{icon ? <InboxUpIcon /> : "Sendt"}</>
       )}
     </ToggleGroup.Item>
   </>
diff --git a/@navikt/icons/README.md b/@navikt/icons/README.md
index b108de12edf..9bc6c2df175 100644
--- a/@navikt/icons/README.md
+++ b/@navikt/icons/README.md
@@ -1,6 +1,10 @@
-# Aksel icons
+# Icons
 
-Icons created and used by NAVs designsystem
+Lagacy-icons created and previously used by NAVs designsystem
+
+## End of life
+
+This package will not recieve any new icons and we recommend transitioning over to our new icon-package [@navikt/aksel-icons](https://npmjs.com/package/@navikt/aksel-icons).
 
 ## Installation
 
diff --git a/@navikt/internal/react/package.json b/@navikt/internal/react/package.json
index 6acdb4119d1..9e177fbbe1c 100644
--- a/@navikt/internal/react/package.json
+++ b/@navikt/internal/react/package.json
@@ -36,7 +36,7 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.9.8",
+    "@navikt/aksel-icons": "^2.9.8",
     "@navikt/ds-react": "^2.9.8",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
diff --git a/@navikt/internal/react/src/copy-to-clipboard/CopyToClipboard.tsx b/@navikt/internal/react/src/copy-to-clipboard/CopyToClipboard.tsx
index 8e530e24f98..b6bef4624d8 100644
--- a/@navikt/internal/react/src/copy-to-clipboard/CopyToClipboard.tsx
+++ b/@navikt/internal/react/src/copy-to-clipboard/CopyToClipboard.tsx
@@ -1,4 +1,4 @@
-import { Copy } from "@navikt/ds-icons";
+import { FilesIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import copy from "copy-to-clipboard";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
@@ -108,7 +108,7 @@ export const CopyToClipboard = forwardRef<
           className={cl("navdsi-copy-to-clipboard", className)}
           onClick={handleClick}
           size={size}
-          icon={<Copy title={copyTitle} aria-hidden={!copyTitle} />}
+          icon={<FilesIcon title={copyTitle} aria-hidden={!copyTitle} />}
           iconPosition={iconPosition}
           {...rest}
         >
diff --git a/@navikt/internal/react/src/copy-to-clipboard/copy-to-clipboard.stories.tsx b/@navikt/internal/react/src/copy-to-clipboard/copy-to-clipboard.stories.tsx
index 99d09741cbe..95b70c8d7f7 100644
--- a/@navikt/internal/react/src/copy-to-clipboard/copy-to-clipboard.stories.tsx
+++ b/@navikt/internal/react/src/copy-to-clipboard/copy-to-clipboard.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import * as React from "react";
-import { Link } from "@navikt/ds-icons";
+import { LinkIcon } from "@navikt/aksel-icons";
 
 import { CopyToClipboard } from "../index";
 
@@ -104,13 +104,13 @@ export const Ikon = () => (
       iconPosition="right"
       popoverText="Kopierte lenke"
       copyText="3.14"
-      icon={<Link />}
+      icon={<LinkIcon />}
     />
     <CopyToClipboard
       iconPosition="left"
       popoverText="Kopierte lenke"
       copyText="3.14"
-      icon={<Link />}
+      icon={<LinkIcon />}
     >
       Kopier lenke
     </CopyToClipboard>
diff --git a/@navikt/internal/react/src/header/HeaderUserButton.tsx b/@navikt/internal/react/src/header/HeaderUserButton.tsx
index ed04e87936f..d428efa3066 100644
--- a/@navikt/internal/react/src/header/HeaderUserButton.tsx
+++ b/@navikt/internal/react/src/header/HeaderUserButton.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import cl from "clsx";
 import { OverridableComponent } from "@navikt/ds-react";
 import { BodyShort, Detail } from "@navikt/ds-react";
-import { Expand } from "@navikt/ds-icons";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import HeaderButton from "./HeaderButton";
 
 export interface HeaderUserButtonProps
@@ -33,14 +33,11 @@ export const HeaderUserButton: HeaderUserButtonType = forwardRef(
       <div>
         <BodyShort size="small" as="div">
           {name}
+          ass
         </BodyShort>
-        {description && (
-          <Detail size="small" as="div">
-            {description}
-          </Detail>
-        )}
+        {description && <Detail as="div">{description}</Detail>}
       </div>
-      <Expand />
+      <ChevronDownIcon title="vis meny" />
     </HeaderButton>
   )
 );
diff --git a/@navikt/internal/react/src/header/header.stories.tsx b/@navikt/internal/react/src/header/header.stories.tsx
index cc4155b58bd..13993995b01 100644
--- a/@navikt/internal/react/src/header/header.stories.tsx
+++ b/@navikt/internal/react/src/header/header.stories.tsx
@@ -1,4 +1,8 @@
-import { Expand, ExternalLink, System } from "@navikt/ds-icons";
+import {
+  ChevronDownIcon,
+  ExternalLinkIcon,
+  MenuGridIcon,
+} from "@navikt/aksel-icons";
 import { BodyLong, BodyShort, Detail } from "@navikt/ds-react";
 import { Meta } from "@storybook/react";
 import React from "react";
@@ -35,24 +39,24 @@ export const Default = {
         {props.systemMenu && (
           <Dropdown>
             <Header.Button as={Dropdown.Toggle} style={{ marginLeft: "auto" }}>
-              <System
+              <MenuGridIcon
                 style={{ fontSize: "1.5rem" }}
-                title="Systemer og oppslagsverk"
+                title="MenuGridIconer og oppslagsverk"
               />
             </Header.Button>
             <Dropdown.Menu strategy="fixed">
               <Dropdown.Menu.List>
                 <Dropdown.Menu.List.Item>
                   <span>A.Inntekt</span>
-                  <ExternalLink style={{ fontSize: "0.875rem" }} />
+                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
                 </Dropdown.Menu.List.Item>
                 <Dropdown.Menu.List.Item>
                   <span>Aa-registeret</span>
-                  <ExternalLink style={{ fontSize: "0.875rem" }} />
+                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
                 </Dropdown.Menu.List.Item>
                 <Dropdown.Menu.List.Item>
                   <span>Gosys</span>
-                  <ExternalLink style={{ fontSize: "0.875rem" }} />
+                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
                 </Dropdown.Menu.List.Item>
               </Dropdown.Menu.List>
             </Dropdown.Menu>
@@ -83,7 +87,7 @@ export const Default = {
               }}
             >
               <BodyShort title="Ola Normann">KH</BodyShort>
-              <Expand />
+              <ChevronDownIcon />
             </Header.Button>
             <Dropdown.Menu strategy="fixed">
               <div>
@@ -161,7 +165,7 @@ export const UserWithMenu = () => (
         }}
       >
         <BodyShort title="Ola Normann">KH</BodyShort>
-        <Expand />
+        <ChevronDownIcon />
       </Header.Button>
       <Dropdown.Menu strategy="fixed">
         <div>
@@ -187,29 +191,29 @@ export const UserWithMenu = () => (
   </Header>
 );
 
-export const UserWithSystemMenu = () => (
+export const UserWithMenuGridIconMenu = () => (
   <Header style={{ width: 600 }}>
     <Header.Title href="/#home">Tittel med lenke</Header.Title>
     <Dropdown>
       <Header.Button as={Dropdown.Toggle} style={{ marginLeft: "auto" }}>
-        <System
+        <MenuGridIcon
           style={{ fontSize: "1.5rem" }}
-          title="Systemer og oppslagsverk"
+          title="MenuGridIconer og oppslagsverk"
         />
       </Header.Button>
       <Dropdown.Menu strategy="fixed">
         <Dropdown.Menu.List>
           <Dropdown.Menu.List.Item>
             <span>A.Inntekt</span>
-            <ExternalLink style={{ fontSize: "0.875rem" }} />
+            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
           </Dropdown.Menu.List.Item>
           <Dropdown.Menu.List.Item>
             <span>Aa-registeret</span>
-            <ExternalLink style={{ fontSize: "0.875rem" }} />
+            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
           </Dropdown.Menu.List.Item>
           <Dropdown.Menu.List.Item>
             <span>Gosys</span>
-            <ExternalLink style={{ fontSize: "0.875rem" }} />
+            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
           </Dropdown.Menu.List.Item>
         </Dropdown.Menu.List>
       </Dropdown.Menu>
diff --git a/@navikt/internal/react/src/timeline/timeline.stories.tsx b/@navikt/internal/react/src/timeline/timeline.stories.tsx
index 7c8dab471f9..b0d058a552c 100644
--- a/@navikt/internal/react/src/timeline/timeline.stories.tsx
+++ b/@navikt/internal/react/src/timeline/timeline.stories.tsx
@@ -1,4 +1,4 @@
-import { SuccessFilled } from "@navikt/ds-icons";
+import { CheckmarkCircleFillIcon } from "@navikt/aksel-icons";
 import { useState } from "@storybook/addons";
 import { Meta } from "@storybook/react";
 import * as React from "react";
@@ -33,7 +33,7 @@ const row1 = [
     start: new Date("Jan 1 2022"),
     end: new Date("Jan 31 2022"),
     status: "success",
-    icon: <SuccessFilled aria-hidden />,
+    icon: <CheckmarkCircleFillIcon aria-hidden />,
     statusLabel: "Sykemeldt",
   },
   {
@@ -49,7 +49,7 @@ const row1 = [
     start: new Date("May 2 2022"),
     end: new Date("May 25 2022"),
     status: "success",
-    icon: <SuccessFilled aria-hidden />,
+    icon: <CheckmarkCircleFillIcon aria-hidden />,
     statusLabel: "Sykemeldt",
   },
   {
@@ -58,7 +58,7 @@ const row1 = [
     end: new Date("Mar 31 2022"),
     status: "success",
     onSelectPeriod: () => console.log("PERIOD SELECTED!"),
-    icon: <SuccessFilled aria-hidden />,
+    icon: <CheckmarkCircleFillIcon aria-hidden />,
     label: "test",
     statusLabel: "Sykemeldt",
   },
@@ -67,7 +67,7 @@ const row1 = [
     start: new Date("Jul 1 2022"),
     end: new Date("Jul 31 2022"),
     status: "warning",
-    icon: <SuccessFilled aria-hidden />,
+    icon: <CheckmarkCircleFillIcon aria-hidden />,
     onSelectPeriod: () => console.log("PERIOD SELECTED!"),
     statusLabel: "Sykemeldt",
   },
@@ -76,7 +76,7 @@ const row1 = [
     start: new Date("Aug 1 2022"),
     end: new Date("Aug 30 2022"),
     status: "warning",
-    icon: <SuccessFilled aria-hidden />,
+    icon: <CheckmarkCircleFillIcon aria-hidden />,
     statusLabel: "Sykemeldt",
   },
 ];
@@ -88,7 +88,7 @@ const row2 = [
     end: new Date("May 25 2022"),
     status: "warning",
     onSelectPeriod: () => console.log("PERIOD SELECTED!"),
-    icon: <SuccessFilled aria-hidden />,
+    icon: <CheckmarkCircleFillIcon aria-hidden />,
     children: <DummyLabel />,
   },
   {
@@ -97,7 +97,7 @@ const row2 = [
     end: new Date("May 2 2022"),
     status: "neutral",
     onSelectPeriod: () => console.log("PERIOD SELECTED!"),
-    icon: <SuccessFilled aria-hidden />,
+    icon: <CheckmarkCircleFillIcon aria-hidden />,
     children: <DummyLabel />,
   },
 ];
@@ -106,7 +106,10 @@ export const Default = () => {
   return (
     <div style={{ width: "80vw" }}>
       <Timeline>
-        <Timeline.Row label="Row 1" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Row 1"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           {row1.map((p: any, i) => {
             return (
               <Timeline.Period
@@ -119,7 +122,10 @@ export const Default = () => {
             );
           })}
         </Timeline.Row>
-        <Timeline.Row label="Row 2" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Row 2"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           {row2.map((p: any, i) => {
             return (
               <Timeline.Period
@@ -144,7 +150,10 @@ export const WithPins = () => {
         <Timeline.Pin date={new Date("Apr 15 2022")}>Pin 1</Timeline.Pin>
         <Timeline.Pin date={new Date("Jun 12 2022")}>Pin 2</Timeline.Pin>
         <Timeline.Pin date={new Date("Jul 28 2022")}>Pin 3</Timeline.Pin>
-        <Timeline.Row label="Row 1" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Row 1"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           {row1.map((p: any, i) => {
             return (
               <Timeline.Period
@@ -157,7 +166,10 @@ export const WithPins = () => {
             );
           })}
         </Timeline.Row>
-        <Timeline.Row label="Row 2" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Row 2"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           {row2.map((p: any, i) => {
             return (
               <Timeline.Period
@@ -179,7 +191,10 @@ export const WithZoom = () => {
   return (
     <div style={{ width: "80vw" }}>
       <Timeline>
-        <Timeline.Row label="Row 1" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Row 1"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           {row1.map((p: any, i) => {
             return (
               <Timeline.Period
@@ -192,7 +207,10 @@ export const WithZoom = () => {
             );
           })}
         </Timeline.Row>
-        <Timeline.Row label="Row 2" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Row 2"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           {row2.map((p: any, i) => {
             return (
               <Timeline.Period
@@ -224,7 +242,10 @@ export const ActivePeriod = () => {
         <Timeline.Pin date={new Date("Apr 15 2022")}>Pin 1</Timeline.Pin>
         <Timeline.Pin date={new Date("Jun 12 2022")}>Pin 2</Timeline.Pin>
         <Timeline.Pin date={new Date("Jul 28 2022")}>Pin 3</Timeline.Pin>
-        <Timeline.Row label="Rad 1" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Rad 1"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           {row1.map((p: any, i) => {
             return (
               <Timeline.Period
@@ -271,7 +292,7 @@ export const ActivePeriod = () => {
             start={new Date("Jan 1 2022")}
             end={new Date("Aug 20 2022")}
             status="info"
-            icon={<SuccessFilled aria-hidden />}
+            icon={<CheckmarkCircleFillIcon aria-hidden />}
           />
         </Timeline.Row>
       </Timeline>
@@ -283,14 +304,20 @@ export const WithDayLabels = () => {
   return (
     <div style={{ width: "80vw" }}>
       <Timeline>
-        <Timeline.Row label="Row 1" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Row 1"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           <Timeline.Period
             start={new Date("Feb 4 2022")}
             end={new Date("Feb 13 2022")}
             status="success"
           />
         </Timeline.Row>
-        <Timeline.Row label="Row 2" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Row 2"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           <Timeline.Period
             start={new Date("Feb 17 2022")}
             end={new Date("Feb 22 2022")}
@@ -306,14 +333,20 @@ export const WithYearLabels = () => {
   return (
     <div style={{ width: "80vw" }}>
       <Timeline>
-        <Timeline.Row label="Row 1" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Row 1"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           <Timeline.Period
             start={new Date("Feb 4 2022")}
             end={new Date("Feb 13 2028")}
             status="success"
           />
         </Timeline.Row>
-        <Timeline.Row label="Row 2" icon={<SuccessFilled aria-hidden />}>
+        <Timeline.Row
+          label="Row 2"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
           <Timeline.Period
             start={new Date("Feb 17 2024")}
             end={new Date("Feb 22 2031")}
diff --git a/yarn.lock b/yarn.lock
index c687515ec76..8771327f1a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3885,7 +3885,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^2.9.7, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^2.9.8, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3912,7 +3912,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 2.9.7
+    "@navikt/ds-css": 2.9.8
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3936,7 +3936,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-codemod@^2.9.7, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^2.9.8, @navikt/ds-codemod@workspace:@navikt/codemod":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
   dependencies:
@@ -3963,7 +3963,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css-internal@^2.9.7, @navikt/ds-css-internal@workspace:@navikt/internal/css":
+"@navikt/ds-css-internal@^2.9.8, @navikt/ds-css-internal@workspace:@navikt/internal/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
   dependencies:
@@ -3974,11 +3974,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@2.9.7, @navikt/ds-css@^2.9.7, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@2.9.8, @navikt/ds-css@^2.9.8, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^2.9.7
+    "@navikt/ds-tokens": ^2.9.8
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3991,7 +3991,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-icons@^2.9.7, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^2.9.8, @navikt/ds-icons@workspace:@navikt/icons":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-icons@workspace:@navikt/icons"
   dependencies:
@@ -4027,8 +4027,8 @@ __metadata:
     "@babel/preset-env": 7.19.4
     "@babel/preset-react": 7.18.6
     "@babel/preset-typescript": 7.18.6
-    "@navikt/ds-icons": ^2.9.7
-    "@navikt/ds-react": ^2.9.7
+    "@navikt/ds-icons": ^2.9.8
+    "@navikt/ds-react": ^2.9.8
     "@rollup/plugin-babel": 6.0.2
     "@rollup/plugin-commonjs": 23.0.2
     "@rollup/plugin-node-resolve": ^15.0.1
@@ -4053,12 +4053,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react-internal@^2.9.7, @navikt/ds-react-internal@workspace:@navikt/internal/react":
+"@navikt/ds-react-internal@^2.9.8, @navikt/ds-react-internal@workspace:@navikt/internal/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
   dependencies:
-    "@navikt/ds-icons": ^2.9.7
-    "@navikt/ds-react": ^2.9.7
+    "@navikt/aksel-icons": ^2.9.8
+    "@navikt/ds-react": ^2.9.8
     clsx: ^1.1.1
     concurrently: 7.2.1
     copy-to-clipboard: ^3.3.1
@@ -4074,13 +4074,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@2.9.7, @navikt/ds-react@^2.9.7, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@2.9.8, @navikt/ds-react@^2.9.8, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.17.0
-    "@navikt/aksel-icons": ^2.9.7
-    "@navikt/ds-icons": ^2.9.7
+    "@navikt/aksel-icons": ^2.9.8
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -4116,11 +4115,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^2.9.7, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^2.9.8, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^2.9.7
+    "@navikt/ds-tokens": ^2.9.8
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -4131,7 +4130,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^2.9.7, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^2.9.8, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8094,15 +8093,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^2.9.7
-    "@navikt/ds-codemod": ^2.9.7
-    "@navikt/ds-css": ^2.9.7
-    "@navikt/ds-css-internal": ^2.9.7
-    "@navikt/ds-icons": ^2.9.7
-    "@navikt/ds-react": ^2.9.7
-    "@navikt/ds-react-internal": ^2.9.7
-    "@navikt/ds-tailwind": ^2.9.7
-    "@navikt/ds-tokens": ^2.9.7
+    "@navikt/aksel-icons": ^2.9.8
+    "@navikt/ds-codemod": ^2.9.8
+    "@navikt/ds-css": ^2.9.8
+    "@navikt/ds-css-internal": ^2.9.8
+    "@navikt/ds-icons": ^2.9.8
+    "@navikt/ds-react": ^2.9.8
+    "@navikt/ds-react-internal": ^2.9.8
+    "@navikt/ds-tailwind": ^2.9.8
+    "@navikt/ds-tokens": ^2.9.8
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -23124,8 +23123,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 2.9.7
-    "@navikt/ds-react": 2.9.7
+    "@navikt/ds-css": 2.9.8
+    "@navikt/ds-react": 2.9.8
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0

From 36aee7b17a87638edd43ee4bbb83735b9b93d5b3 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 8 May 2023 09:25:51 +0200
Subject: [PATCH 02/11] :memo: Changeset

---
 .changeset/stupid-boats-approve.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/.changeset/stupid-boats-approve.md b/.changeset/stupid-boats-approve.md
index 530b12dcf92..0906d6e1288 100644
--- a/.changeset/stupid-boats-approve.md
+++ b/.changeset/stupid-boats-approve.md
@@ -6,14 +6,15 @@
 
 Aksels løsninger bruker nå `@navikt/aksel-icons`
 
-**Sideffects:**
+**Sideeffects av ikonendringer**
 
-- Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon.
+- Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
 - Alert bruker samme ikonstørrelse for alle størrelser
 - Chips har justert padding/ikonstørrelser
 - Datepicker hover-bug på knapper er fikset
+- Helptekst bruker nå et custom-ikon.
 - Select har fått justert padding rundt ikon
-- Switch bruker samme checkmark som checkbox, er nå også avrundet.
+- Switch bruker samme checkmark som checkbox, er nå avrundet
 - ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
-- Stepper har endret hvordan den håndterer ✔️ -ikon. Hvis du har overskrevet stepper-CSS kan det hende dette må oppdateres lokalt også.
-- Tabs bruker default text-default
+- Tabs bruker default text-default nå
+- Stepper har endret hvordan den styler checkmark-ikon.

From 9750cfdb0505f0c9a91282fbc6894afcbe88f360 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 8 May 2023 09:32:27 +0200
Subject: [PATCH 03/11] :bug: Temp lagt tilbake ds-icons for accordion

---
 @navikt/core/react/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json
index 7970983770d..12f6340cefb 100644
--- a/@navikt/core/react/package.json
+++ b/@navikt/core/react/package.json
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
+    "@navikt/ds-icons": "^2.9.8",
     "@navikt/aksel-icons": "^2.9.8",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",

From c372915e37c2f44243d62c9640c935cd843c25a1 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 8 May 2023 10:57:11 +0200
Subject: [PATCH 04/11] :lipstick: Justert small/xsmall button med ikon

---
 @navikt/core/css/button.css | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css
index f4b7665b0dc..fc48057bb3f 100644
--- a/@navikt/core/css/button.css
+++ b/@navikt/core/css/button.css
@@ -32,7 +32,7 @@
 }
 
 .navds-button--small {
-  --__ac-button-padding: 0.375rem var(--a-spacing-3);
+  --__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
 
   padding: var(--ac-button-padding-small, var(--__ac-button-padding));
 }
@@ -51,13 +51,13 @@
 }
 
 .navds-button--small.navds-button--icon-only {
-  --__ac-button-padding: 0.375rem;
+  --__ac-button-padding: var(--a-spacing-1);
 
   padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
 }
 
 .navds-button--xsmall.navds-button--icon-only {
-  --__ac-button-padding: var(--a-spacing-1);
+  --__ac-button-padding: var(--a-spacing-05);
 
   padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
 }
@@ -88,14 +88,12 @@
 
 .navds-button--small .navds-button__icon {
   --ac-button-icon-margin: -2px;
-
-  font-size: 1.25rem;
 }
 
 .navds-button--xsmall .navds-button__icon {
   --ac-button-icon-margin: -2px;
 
-  font-size: 1rem;
+  font-size: 1.25rem;
 }
 
 /*************************

From cac3b6f76fa36d57fecf7ddce0611a8a4ec5fc51 Mon Sep 17 00:00:00 2001
From: Julian Nymark <j@juliannymark.com>
Date: Mon, 8 May 2023 12:59:35 +0200
Subject: [PATCH 05/11] updates to accordion (#1933)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
Co-authored-by: Ken <ken.aleksander@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: AndreasDybdahl <andreas.dybdahl@nav.no>
---
 .changeset/honest-doors-flow.md               |  12 +
 @navikt/core/css/accordion.css                | 154 +++++++++---
 @navikt/core/css/expansioncard.css            |   4 +-
 @navikt/core/css/tokens.json                  |  14 +-
 .../core/react/src/accordion/Accordion.tsx    |  46 +++-
 .../react/src/accordion/AccordionContent.tsx  |  25 +-
 .../react/src/accordion/AccordionContext.tsx  |  15 ++
 .../react/src/accordion/AccordionHeader.tsx   |  40 +--
 .../react/src/accordion/AccordionItem.tsx     |  31 ++-
 .../react/src/accordion/accordion.stories.tsx | 233 ++++++++++++++++--
 .../src/expansion-card/ExpansionCard.tsx      |   2 +-
 .../ExpansionCardDescription.tsx              |   2 +-
 .../core/tokens/stories/spacing.stories.tsx   |  35 ++-
 .../eksempler/accordion/default-open.tsx      |  60 +++++
 .../pages/eksempler/accordion/default.tsx     |  24 +-
 .../pages/eksempler/accordion/sizes.tsx       |  79 ++++++
 .../eksempler/accordion/variant-neutral.tsx   |  60 +++++
 yarn.lock                                     |   1 +
 18 files changed, 734 insertions(+), 103 deletions(-)
 create mode 100644 .changeset/honest-doors-flow.md
 create mode 100644 @navikt/core/react/src/accordion/AccordionContext.tsx
 create mode 100644 aksel.nav.no/website/pages/eksempler/accordion/default-open.tsx
 create mode 100644 aksel.nav.no/website/pages/eksempler/accordion/sizes.tsx
 create mode 100644 aksel.nav.no/website/pages/eksempler/accordion/variant-neutral.tsx

diff --git a/.changeset/honest-doors-flow.md b/.changeset/honest-doors-flow.md
new file mode 100644
index 00000000000..06b73a0be61
--- /dev/null
+++ b/.changeset/honest-doors-flow.md
@@ -0,0 +1,12 @@
+---
+"@navikt/ds-css": major
+"@navikt/ds-react": major
+---
+
+Update Accordion
+
+WHAT: Css changes break backwards compatability, so this update is marked as a major change
+
+WHY: New and improved design was desired.
+
+HOW to update: Update application dependencies (no codemods)
diff --git a/@navikt/core/css/accordion.css b/@navikt/core/css/accordion.css
index 50f5bbed315..e06f0beb5d0 100644
--- a/@navikt/core/css/accordion.css
+++ b/@navikt/core/css/accordion.css
@@ -2,30 +2,77 @@
   position: relative;
 }
 
+/*************************
+ * Header *
+ *************************/
 .navds-accordion__header {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
+  --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
+
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: flex-start;
   gap: var(--a-spacing-2);
-  padding: 14px var(--a-spacing-3) var(--a-spacing-3);
+  padding: var(--a-spacing-3);
   margin: 0;
   text-align: left;
   background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
+  position: relative;
+  box-shadow: var(--__ac-accordion-header-shadow);
+}
+
+.navds-accordion__header:hover {
+  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
+  text-decoration: underline;
+  color: var(--ac-accordion-header-text-hover, inherit);
+}
+
+.navds-accordion--small .navds-accordion__header {
+  padding: var(--a-spacing-2) var(--a-spacing-3);
+}
+
+.navds-accordion--medium .navds-accordion__header {
+  padding: var(--a-spacing-3);
+}
+
+.navds-accordion--large .navds-accordion__header {
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navds-accordion__item:last-child > :where(.navds-accordion__header) {
+  box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+
+.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
+  box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+
+.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
+  box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
+    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+
+.navds-accordion__item--open > :where(.navds-accordion__header) {
+  box-shadow: var(--__ac-accordion-header-shadow);
 }
 
-.navds-accordion__header:focus {
+.navds-accordion__header:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
+  border-radius: var(--a-border-radius-large);
 }
 
-.navds-accordion__header:hover {
-  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
-  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
-  background: var(--ac-accordion-header-bg-hover, var(--a-surface-transparent));
+@supports not selector(:focus-visible) {
+  .navds-accordion__header:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+    border-radius: var(--a-border-radius-large);
+  }
 }
 
 .navds-accordion__header-content {
@@ -33,42 +80,91 @@
   text-overflow: ellipsis;
 }
 
-.navds-accordion__item--open > .navds-accordion__header {
-  background-color: var(--ac-accordion-header-bg-open, var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle)));
-  border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
+/*************************
+ * Icon *
+ *************************/
+.navds-accordion__icon-wrapper {
+  display: grid;
+  place-content: center;
+  border-radius: var(--a-border-radius-medium);
+  height: var(--a-spacing-6);
+  width: var(--a-spacing-6);
+  align-self: center;
 }
 
-.navds-accordion__item--open > :where(.navds-accordion__header:hover) {
-  background-color: var(--ac-accordion-header-bg-open-hover, var(--a-surface-action-subtle));
+.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
+  background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
 }
 
-.navds-accordion__content {
-  padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
-  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
+.navds-accordion__header-chevron {
+  border-radius: var(--a-border-radius-medium);
+  font-size: 1.5rem;
+  height: 1.75rem;
+  flex-shrink: 0;
+  transition: transform 150ms ease-in-out;
+  align-self: center;
 }
 
-.navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
+:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
+  transform: translateY(1px);
 }
 
-.navds-accordion__expand-icon {
-  font-size: 1.5rem;
-  height: 1.75rem;
-  flex-shrink: 0;
+.navds-accordion__item--open
+  > :where(.navds-accordion__header)
+  > :where(.navds-accordion__icon-wrapper)
+  > :where(.navds-accordion__header-chevron) {
+  transform: translateY(0) rotate(-180deg);
 }
 
-.navds-accordion__item--open > .navds-accordion__header > .navds-accordion__expand-icon {
-  transform: rotateZ(180deg);
+.navds-accordion__item--open
+  > :where(.navds-accordion__header):hover
+  > :where(.navds-accordion__icon-wrapper)
+  > :where(.navds-accordion__header-chevron) {
+  transform: translateY(-1px) rotate(-180deg);
 }
 
-.navds-accordion__expand-icon--filled {
-  display: none;
+/*************************
+ * Variant/Default *
+ *************************/
+.navds-accordion__item--open {
+  background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
 }
 
-.navds-accordion__header:hover > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
-  display: inherit;
+/*************************
+ * Variant/Neutral *
+ *************************/
+.navds-accordion__item--open.navds-accordion__item--neutral {
+  background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
 }
 
-.navds-accordion__header:hover > .navds-accordion__expand-icon {
+/*************************
+ * Content *
+ *************************/
+.navds-accordion__content {
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+  animation: fadeAccordionContent 250ms ease;
+}
+
+.navds-accordion__content--closed {
   display: none;
 }
+
+.navds-accordion__item--no-animation :where(.navds-accordion__content) {
+  animation: none;
+}
+
+@keyframes fadeAccordionContent {
+  0% {
+    opacity: 0.25;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/@navikt/core/css/expansioncard.css b/@navikt/core/css/expansioncard.css
index 3adf91dfa44..56d1900f1c0 100644
--- a/@navikt/core/css/expansioncard.css
+++ b/@navikt/core/css/expansioncard.css
@@ -173,13 +173,13 @@
   animation: fadeExpansionCard 250ms ease;
 }
 
-.navds-expansioncard--no-fade :where(.navds-expansioncard__content-inner) {
+.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
   animation: none;
 }
 
 @keyframes fadeExpansionCard {
   0% {
-    opacity: 0;
+    opacity: 0.25;
     transform: translateY(-8px);
   }
 
diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
index aacde5ffc1c..55e9cd629aa 100644
--- a/@navikt/core/css/tokens.json
+++ b/@navikt/core/css/tokens.json
@@ -14,17 +14,13 @@
     "--ac-alert-icon-success-color": "--a-icon-success"
   },
   "accordion": {
-    "--ac-accordion-header-bg": "--ac-surface-transparent",
-    "--ac-accordion-header-bg-hover": "--ac-surface-transparent",
+    "--ac-accordion-header-bg": "--a-surface-transparent",
+    "--ac-accordion-header-bg-hover": "--a-surface-hover",
+    "--ac-accordion-header-text-hover": "inherit",
     "--ac-accordion-header-border": "--a-border-divider",
-    "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
-    "--ac-accordion-header-border-hover": "--a-border-default",
     "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
-    "--ac-accordion-header-bg-open": "--ac-accordion-item-bg-open",
-    "--ac-accordion-header-bg-open-hover": "--a-surface-action-subtle",
-    "--ac-accordion-item-border-open": "--a-surface-action-subtle",
-    "--ac-accordion-content-border": "--a-border-divider",
-    "--ac-accordion-content-border-open": "--a-border-default"
+    "--ac-accordion-neutral-item-bg-open": "--a-surface-neutral-subtle",
+    "--ac-accordion-header-icon-bg-hover": "--a-surface-neutral-subtle-hover"
   },
   "button": {
     "--ac-button-border-radius": "--a-border-radius-medium",
diff --git a/@navikt/core/react/src/accordion/Accordion.tsx b/@navikt/core/react/src/accordion/Accordion.tsx
index 2133e7f1e44..c29ba27a3e7 100644
--- a/@navikt/core/react/src/accordion/Accordion.tsx
+++ b/@navikt/core/react/src/accordion/Accordion.tsx
@@ -3,6 +3,7 @@ import React, { forwardRef } from "react";
 import AccordionItem, { AccordionItemType } from "./AccordionItem";
 import AccordionContent, { AccordionContentType } from "./AccordionContent";
 import AccordionHeader, { AccordionHeaderType } from "./AccordionHeader";
+import { AccordionContext } from "./AccordionContext";
 
 interface AccordionComponent
   extends React.ForwardRefExoticComponent<
@@ -14,6 +15,18 @@ interface AccordionComponent
 }
 
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @default 'default'
+   */
+  variant?: "default" | "neutral";
+  /**
+   * @default 'large'
+   */
+  headingSize?: "large" | "medium" | "small" | "xsmall";
+  /**
+   * @default "medium"
+   */
+  size?: "large" | "medium" | "small";
   /**
    * Instances of Accordion.Item
    */
@@ -21,9 +34,36 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  ({ className, ...rest }, ref) => (
-    <div {...rest} className={cl("navds-accordion", className)} ref={ref} />
-  )
+  (
+    {
+      className,
+      variant = "default",
+      headingSize = "medium",
+      size = "medium",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <AccordionContext.Provider
+        value={{
+          variant,
+          headingSize,
+          size,
+        }}
+      >
+        <div
+          {...rest}
+          className={cl(
+            "navds-accordion",
+            className,
+            `navds-accordion--${size}`
+          )}
+          ref={ref}
+        />
+      </AccordionContext.Provider>
+    );
+  }
 ) as AccordionComponent;
 
 Accordion.Header = AccordionHeader;
diff --git a/@navikt/core/react/src/accordion/AccordionContent.tsx b/@navikt/core/react/src/accordion/AccordionContent.tsx
index b55c6bc84d2..6771fedeb8c 100644
--- a/@navikt/core/react/src/accordion/AccordionContent.tsx
+++ b/@navikt/core/react/src/accordion/AccordionContent.tsx
@@ -1,6 +1,5 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import AnimateHeight from "../util/AnimateHeight";
 import { BodyLong } from "../typography/BodyLong";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -28,16 +27,20 @@ const AccordionContent: AccordionContentType = forwardRef(
     }
 
     return (
-      <AnimateHeight height={context.open ? "auto" : 0} duration={250}>
-        <BodyLong
-          {...rest}
-          as="div"
-          ref={ref}
-          className={cl("navds-accordion__content", className)}
-        >
-          {children}
-        </BodyLong>
-      </AnimateHeight>
+      <BodyLong
+        {...rest}
+        as="div"
+        ref={ref}
+        className={cl(
+          "navds-accordion__content",
+          {
+            "navds-accordion__content--closed": !context.open,
+          },
+          className
+        )}
+      >
+        {children}
+      </BodyLong>
     );
   }
 );
diff --git a/@navikt/core/react/src/accordion/AccordionContext.tsx b/@navikt/core/react/src/accordion/AccordionContext.tsx
new file mode 100644
index 00000000000..e3d56e82376
--- /dev/null
+++ b/@navikt/core/react/src/accordion/AccordionContext.tsx
@@ -0,0 +1,15 @@
+import { createContext } from "react";
+
+export type AccordionContextProps = {
+  variant?: "default" | "neutral";
+  headingSize?: "large" | "medium" | "small" | "xsmall";
+  size?: "large" | "medium" | "small";
+  openItems?: number[];
+};
+
+export const AccordionContext = createContext<AccordionContextProps | null>({
+  variant: "default",
+  headingSize: "small",
+  size: "medium",
+  openItems: [],
+});
diff --git a/@navikt/core/react/src/accordion/AccordionHeader.tsx b/@navikt/core/react/src/accordion/AccordionHeader.tsx
index 9b1d3ccb25e..f707ac00c3a 100644
--- a/@navikt/core/react/src/accordion/AccordionHeader.tsx
+++ b/@navikt/core/react/src/accordion/AccordionHeader.tsx
@@ -1,8 +1,9 @@
-import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Heading } from "../typography/Heading";
+import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface AccordionHeaderProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -18,43 +19,42 @@ export type AccordionHeaderType = React.ForwardRefExoticComponent<
 
 const AccordionHeader: AccordionHeaderType = forwardRef(
   ({ children, className, onClick, ...rest }, ref) => {
-    const context = useContext(AccordionItemContext);
+    const itemContext = useContext(AccordionItemContext);
+    const accordionContext = useContext(AccordionContext);
 
-    if (context === null) {
+    if (accordionContext === null || itemContext === null) {
       console.error(
-        "<Accordion.Header> has to be used within an <Accordion.Item>"
+        "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>"
       );
       return null;
     }
 
-    const handleClick = (
-      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
-    ) => {
-      context.toggleOpen();
-      onClick && onClick(e);
-    };
-
     return (
       <button
-        {...rest}
         ref={ref}
+        {...rest}
         className={cl("navds-accordion__header", className)}
+        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          itemContext.toggleOpen();
+          onClick && onClick(e);
+        }}
+        aria-expanded={itemContext.open}
         type="button"
-        onClick={handleClick}
-        aria-expanded={context.open}
       >
+        <div className="navds-accordion__icon-wrapper">
+          <ChevronDownIcon
+            className="navds-accordion__header-chevron"
+            title="Vis mer"
+            aria-hidden
+          />
+        </div>
         <Heading
-          size="small"
+          size={accordionContext.headingSize ?? "small"}
           as="span"
           className="navds-accordion__header-content"
         >
           {children}
         </Heading>
-        <Expand aria-hidden className="navds-accordion__expand-icon" />
-        <ExpandFilled
-          aria-hidden
-          className="navds-accordion__expand-icon navds-accordion__expand-icon--filled"
-        />
       </button>
     );
   }
diff --git a/@navikt/core/react/src/accordion/AccordionItem.tsx b/@navikt/core/react/src/accordion/AccordionItem.tsx
index 577282acadd..5141d9d7899 100644
--- a/@navikt/core/react/src/accordion/AccordionItem.tsx
+++ b/@navikt/core/react/src/accordion/AccordionItem.tsx
@@ -1,5 +1,12 @@
 import cl from "clsx";
-import React, { createContext, forwardRef, useState } from "react";
+import React, {
+  createContext,
+  forwardRef,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import { AccordionContext } from "./AccordionContext";
 
 export interface AccordionItemProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -38,11 +45,27 @@ const AccordionItem: AccordionItemType = forwardRef(
     ref
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+    const context = useContext(AccordionContext);
+
+    const [_open, _setOpen] = useState(defaultOpen);
+    const shouldAnimate = useRef<boolean>(!(Boolean(open) || defaultOpen));
+    const handleOpen = () => {
+      if (open === undefined) {
+        const newOpen = !_open;
+        _setOpen(newOpen);
+        setInternalOpen(newOpen);
+      } else {
+        setInternalOpen(!open);
+      }
+      shouldAnimate.current = true;
+    };
 
     return (
       <div
         className={cl("navds-accordion__item", className, {
           "navds-accordion__item--open": open ?? internalOpen,
+          "navds-accordion__item--neutral": context?.variant === "neutral",
+          "navds-accordion__item--no-animation": !shouldAnimate.current,
         })}
         ref={ref}
         {...rest}
@@ -50,11 +73,7 @@ const AccordionItem: AccordionItemType = forwardRef(
         <AccordionItemContext.Provider
           value={{
             open: open ?? internalOpen,
-            toggleOpen: () => {
-              if (open === undefined) {
-                setInternalOpen((iOpen) => !iOpen);
-              }
-            },
+            toggleOpen: handleOpen,
           }}
         >
           {children}
diff --git a/@navikt/core/react/src/accordion/accordion.stories.tsx b/@navikt/core/react/src/accordion/accordion.stories.tsx
index d005fed91e6..9a64d01f18b 100644
--- a/@navikt/core/react/src/accordion/accordion.stories.tsx
+++ b/@navikt/core/react/src/accordion/accordion.stories.tsx
@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import AccordionContent from "./AccordionContent";
 import AccordionHeader from "./AccordionHeader";
 import AccordionItem from "./AccordionItem";
-import { Accordion } from ".";
+import { Accordion, AccordionProps } from ".";
+import { Table } from "..";
 
 export default {
   title: "ds-react/Accordion",
@@ -12,6 +13,39 @@ export default {
     AccordionContent,
     AccordionHeader,
   },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "600px",
+          minHeight: "100vh",
+          padding: "10rem 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      options: ["default", "neutral"],
+      control: { type: "select" },
+    },
+    headingSize: {
+      options: ["large", "medium", "small", "xsmall"],
+      control: { type: "select" },
+    },
+    size: {
+      options: ["large", "medium", "small"],
+      control: { type: "select" },
+    },
+    nItems: {
+      control: { type: "number" },
+    },
+  },
 };
 
 const Content = () => (
@@ -32,9 +66,25 @@ const Content = () => (
   </Accordion.Content>
 );
 
+const SmallContent = () => (
+  <Accordion.Content>
+    Magna aliquip aliquip fugiat nostrud <a href="#Lorem">Lorem est</a> pariatur
+    veniam officia laboris voluptate officia pariatur.ex anim
+  </Accordion.Content>
+);
+
 const Item = (props) => {
   const [open, setOpen] = useState(false);
 
+  if (props.defaultOpen) {
+    return (
+      <Accordion.Item defaultOpen={props.defaultOpen}>
+        <Accordion.Header>Accordion header text</Accordion.Header>
+        <SmallContent />
+      </Accordion.Item>
+    );
+  }
+
   return props.controlled ? (
     <Accordion.Item open={open}>
       <Accordion.Header onClick={() => setOpen(!open)}>
@@ -51,11 +101,11 @@ const Item = (props) => {
 };
 
 export const Default = {
-  render: (props) => {
+  render: ({ nItems, ...props }) => {
     return (
       <div style={{ width: 500 }}>
-        <Accordion>
-          {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+        <Accordion {...props}>
+          {[...Array(nItems ? nItems : 2)].map((_, y) => (
             <Item key={y} {...props} />
           ))}
         </Accordion>
@@ -64,18 +114,62 @@ export const Default = {
   },
 
   args: {
-    controlled: false,
+    controlled: "false",
     nItems: 2,
+    variant: "default",
+    headingSize: "medium",
+    size: "medium",
+  },
+};
+
+export const DefaultOpen = {
+  render: ({ nItems, openItems, ...props }) => {
+    return (
+      <div style={{ width: 500 }}>
+        <Accordion {...props}>
+          {[...Array(nItems ? nItems : 2)].map((_, y) => (
+            <Item key={y} defaultOpen={openItems.includes(y)} {...props} />
+          ))}
+        </Accordion>
+      </div>
+    );
+  },
+
+  args: {
+    openItems: [1, 2],
+    controlled: "false",
+    nItems: 5,
+    variant: "neutral",
+    headingSize: "large",
   },
 };
 
-export const Controlled = () => {
+export const Variants = {
+  render: () => {
+    return (
+      <div style={{ width: 500 }} className="colgap">
+        <Accordion>
+          {[...Array(2)].map((_, y) => (
+            <Item key={y} defaultOpen />
+          ))}
+        </Accordion>
+        <Accordion variant="neutral">
+          {[...Array(2)].map((_, y) => (
+            <Item key={y} defaultOpen />
+          ))}
+        </Accordion>
+      </div>
+    );
+  },
+};
+
+export const Controlled = (props) => {
   const [open, setOpen] = useState(false);
   const [open2, setOpen2] = useState(false);
 
   return (
     <div style={{ width: 500 }}>
-      <Accordion>
+      <Accordion {...props}>
         <Accordion.Item open={open}>
           <Accordion.Header onClick={() => setOpen(!open)}>
             Accordion header text
@@ -93,17 +187,124 @@ export const Controlled = () => {
   );
 };
 
-export const Uncontrolled = () => (
-  <div style={{ width: 500 }}>
-    <Accordion>
+export const WithTable = {
+  render: (props) => {
+    const ExampleTable = () => {
+      return (
+        <Table>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>ID</Table.HeaderCell>
+              <Table.HeaderCell>Fornavn</Table.HeaderCell>
+              <Table.HeaderCell>Etternavn</Table.HeaderCell>
+              <Table.HeaderCell>Rolle</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.Row>
+              <Table.HeaderCell>1</Table.HeaderCell>
+              <Table.DataCell>Jean-Luc</Table.DataCell>
+              <Table.DataCell>Picard</Table.DataCell>
+              <Table.DataCell>Kaptein</Table.DataCell>
+            </Table.Row>
+            <Table.Row>
+              <Table.HeaderCell>2</Table.HeaderCell>
+              <Table.DataCell>William</Table.DataCell>
+              <Table.DataCell>Riker</Table.DataCell>
+              <Table.DataCell>Kommandør</Table.DataCell>
+            </Table.Row>
+            <Table.Row>
+              <Table.HeaderCell>3</Table.HeaderCell>
+              <Table.DataCell>Geordi</Table.DataCell>
+              <Table.DataCell>La Forge</Table.DataCell>
+              <Table.DataCell>Sjefsingeniør</Table.DataCell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      );
+    };
+
+    const ContentWithTable = () => {
+      return (
+        <Accordion.Content>
+          <ExampleTable />
+        </Accordion.Content>
+      );
+    };
+
+    return (
+      <div style={{ width: 500 }}>
+        <Accordion {...props}>
+          <Accordion.Item>
+            <Accordion.Header>Table of people</Accordion.Header>
+            <ContentWithTable />
+          </Accordion.Item>
+          <Accordion.Item>
+            <Accordion.Header>Table of people</Accordion.Header>
+            <ContentWithTable />
+          </Accordion.Item>
+        </Accordion>
+      </div>
+    );
+  },
+
+  args: {
+    variant: "default",
+    headingSize: "large",
+  },
+};
+
+const SingleHeaderAccordion = ({
+  size = "medium",
+  headingSize = "medium",
+}: Partial<AccordionProps>) => {
+  return (
+    <Accordion size={size} headingSize={headingSize}>
       <Accordion.Item>
-        <Accordion.Header>Accordion header text</Accordion.Header>
-        <Content />
+        <Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
+        <Accordion.Content>a</Accordion.Content>
       </Accordion.Item>
       <Accordion.Item>
-        <Accordion.Header>Accordion header text</Accordion.Header>
-        <Content />
+        <Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
+        <Accordion.Content>a</Accordion.Content>
       </Accordion.Item>
     </Accordion>
-  </div>
-);
+  );
+};
+
+type sizesType = "large" | "medium" | "small";
+type headingSizesType = "large" | "medium" | "small" | "xsmall";
+const sizes: sizesType[] = ["large", "medium", "small"];
+const headingSizes: headingSizesType[] = ["large", "medium", "small", "xsmall"]; // enum this?!
+
+export const Size = {
+  render: ({ ...props }) => {
+    return (
+      <div style={{ width: 500 }} className="colgap">
+        {sizes.map((element) => (
+          <SingleHeaderAccordion size={element} {...props} />
+        ))}
+      </div>
+    );
+  },
+
+  args: {
+    variant: "neutral",
+  },
+};
+
+export const HeadingSize = {
+  render: ({ ...props }) => {
+    return (
+      <div style={{ width: 500 }} className="colgap">
+        {headingSizes.map((element) => (
+          <SingleHeaderAccordion headingSize={element} {...props} />
+        ))}
+      </div>
+    );
+  },
+
+  args: {
+    variant: "neutral",
+  },
+};
diff --git a/@navikt/core/react/src/expansion-card/ExpansionCard.tsx b/@navikt/core/react/src/expansion-card/ExpansionCard.tsx
index 412cba0b120..7057855b5a7 100644
--- a/@navikt/core/react/src/expansion-card/ExpansionCard.tsx
+++ b/@navikt/core/react/src/expansion-card/ExpansionCard.tsx
@@ -113,7 +113,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
             `navds-expansioncard--${size}`,
             {
               "navds-expansioncard--open": open ?? _open,
-              "navds-expansioncard--no-fade": !shouldFade.current,
+              "navds-expansioncard--no-animation": !shouldFade.current,
             }
           )}
           ref={ref}
diff --git a/@navikt/core/react/src/expansion-card/ExpansionCardDescription.tsx b/@navikt/core/react/src/expansion-card/ExpansionCardDescription.tsx
index d1e8331d75f..4608b2cc3e6 100644
--- a/@navikt/core/react/src/expansion-card/ExpansionCardDescription.tsx
+++ b/@navikt/core/react/src/expansion-card/ExpansionCardDescription.tsx
@@ -18,7 +18,7 @@ export const ExpansionCardDescription: ExpansionCardDescriptionType =
 
     if (panelContext === null) {
       console.error(
-        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+        "<ExpansionCard.Description> has to be used within an <ExpansionCard>"
       );
       return null;
     }
diff --git a/@navikt/core/tokens/stories/spacing.stories.tsx b/@navikt/core/tokens/stories/spacing.stories.tsx
index 9a700e17243..13f33726dcd 100644
--- a/@navikt/core/tokens/stories/spacing.stories.tsx
+++ b/@navikt/core/tokens/stories/spacing.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 import * as tokens from "../dist/tokens.js";
+import { Tooltip } from "@navikt/ds-react";
 
 export default {
   title: "ds-tokens/Spacing",
@@ -14,20 +15,35 @@ export const Spacing = () => {
   );
 
   const sortObject = Object.fromEntries(
-    Object.entries(allSpacing).sort(
-      (a, b) =>
+    Object.entries(allSpacing).sort((a, b) => {
+      if (a[0].endsWith("05"))
+        return 0.5 - Number(b[0].replace("ASpacing", ""));
+      if (b[0].endsWith("05"))
+        return Number(a[0].replace("ASpacing", "")) - 0.5;
+      return (
         Number(a[0].replace("ASpacing", "")) -
         Number(b[0].replace("ASpacing", ""))
-    )
+      );
+    })
   );
 
+  const fontSize = 16;
+
   return (
     <div className="colgap">
       {Object.entries(sortObject).map(([key, val]) => (
-        <div>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(3, 1fr)",
+            alignItems: "center",
+          }}
+        >
+          <span style={{ gridColumn: "1 / 2" }}>{key}</span>
           <div
             key={key}
             style={{
+              gridColumn: "2 / 3",
               width: val,
               height: 40,
               backgroundColor: "var(--a-lightblue-200)",
@@ -35,6 +51,17 @@ export const Spacing = () => {
               alignItems: "center",
             }}
           />
+          <span style={{ gridColumn: "3 / 3", margin: "0 var(--a-spacing-2)" }}>
+            <b>{`${parseFloat(val.replace("rem", "")) * fontSize}px`}</b>
+            <span> = </span>
+            <Tooltip content={val}>
+              <u>{`${val.replace("rem", "")}`}</u>
+            </Tooltip>
+            <span> x </span>
+            <Tooltip content="font-size">
+              <u>{`${fontSize}`}</u>
+            </Tooltip>
+          </span>
         </div>
       ))}
     </div>
diff --git a/aksel.nav.no/website/pages/eksempler/accordion/default-open.tsx b/aksel.nav.no/website/pages/eksempler/accordion/default-open.tsx
new file mode 100644
index 00000000000..35bd9f21a65
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/accordion/default-open.tsx
@@ -0,0 +1,60 @@
+import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Accordion>
+      <Accordion.Item>
+        <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
+        <Accordion.Content>
+          Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha
+          hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk
+          nedsatt arbeidsevnen. NAV kan gjøre <a href="#Unntak">unntak</a>.
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item defaultOpen>
+        <Accordion.Header>
+          Til deg som har yrkesskade eller yrkessykdom
+        </Accordion.Header>
+        <Accordion.Content>
+          Med yrkesskade mener vi at du har fått en skade som følge av en
+          arbeidsulykke. Vi kan godkjenne en sykdom som yrkessykdom hvis den
+          kommer av skadelig påvirkning fra arbeidsmiljøet.
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item>
+        <Accordion.Header>Til deg som er helt frisk</Accordion.Header>
+        <Accordion.Content>
+          Da er det lite som trengs å gjøres.
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "600px",
+          minHeight: "100vh",
+          padding: "10rem 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/accordion/default.tsx b/aksel.nav.no/website/pages/eksempler/accordion/default.tsx
index 65bea155245..81b0b0b0a5a 100644
--- a/aksel.nav.no/website/pages/eksempler/accordion/default.tsx
+++ b/aksel.nav.no/website/pages/eksempler/accordion/default.tsx
@@ -9,7 +9,7 @@ const Example = () => {
         <Accordion.Content>
           Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha
           hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk
-          nedsatt arbeidsevnen. NAV kan gjøre unntak.
+          nedsatt arbeidsevnen. NAV kan gjøre <a href="#Unntak">unntak</a>.
         </Accordion.Content>
       </Accordion.Item>
       <Accordion.Item>
@@ -22,6 +22,12 @@ const Example = () => {
           kommer av skadelig påvirkning fra arbeidsmiljøet.
         </Accordion.Content>
       </Accordion.Item>
+      <Accordion.Item>
+        <Accordion.Header>Til deg som er helt frisk</Accordion.Header>
+        <Accordion.Content>
+          Da er det lite som trengs å gjøres.
+        </Accordion.Content>
+      </Accordion.Item>
     </Accordion>
   );
 };
@@ -31,6 +37,22 @@ export default withDsExample(Example, "static");
 /* Storybook story */
 export const Demo = {
   render: Example,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "600px",
+          minHeight: "100vh",
+          padding: "10rem 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export const args = {
diff --git a/aksel.nav.no/website/pages/eksempler/accordion/sizes.tsx b/aksel.nav.no/website/pages/eksempler/accordion/sizes.tsx
new file mode 100644
index 00000000000..05f13ff30d3
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/accordion/sizes.tsx
@@ -0,0 +1,79 @@
+import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <>
+      <Accordion size="large" headingSize="large">
+        <Accordion.Item>
+          <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
+          <Accordion.Content>
+            Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha
+            hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk
+            nedsatt arbeidsevnen. NAV kan gjøre <a href="#Unntak">unntak</a>.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <br />
+      <Accordion size="medium" headingSize="medium">
+        <Accordion.Item>
+          <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
+          <Accordion.Content>
+            Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha
+            hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk
+            nedsatt arbeidsevnen. NAV kan gjøre <a href="#Unntak">unntak</a>.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <br />
+      <Accordion size="small" headingSize="small">
+        <Accordion.Item>
+          <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
+          <Accordion.Content>
+            Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha
+            hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk
+            nedsatt arbeidsevnen. NAV kan gjøre <a href="#Unntak">unntak</a>.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <br />
+      <Accordion size="small" headingSize="xsmall">
+        <Accordion.Item>
+          <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
+          <Accordion.Content>
+            Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha
+            hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk
+            nedsatt arbeidsevnen. NAV kan gjøre <a href="#Unntak">unntak</a>.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    </>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "600px",
+          minHeight: "100vh",
+          padding: "10rem 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/aksel.nav.no/website/pages/eksempler/accordion/variant-neutral.tsx b/aksel.nav.no/website/pages/eksempler/accordion/variant-neutral.tsx
new file mode 100644
index 00000000000..6c0813ff1bc
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/accordion/variant-neutral.tsx
@@ -0,0 +1,60 @@
+import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Accordion variant="neutral">
+      <Accordion.Item>
+        <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
+        <Accordion.Content>
+          Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha
+          hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk
+          nedsatt arbeidsevnen. NAV kan gjøre <a href="#Unntak">unntak</a>.
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item defaultOpen>
+        <Accordion.Header>
+          Til deg som har yrkesskade eller yrkessykdom
+        </Accordion.Header>
+        <Accordion.Content>
+          Med yrkesskade mener vi at du har fått en skade som følge av en
+          arbeidsulykke. Vi kan godkjenne en sykdom som yrkessykdom hvis den
+          kommer av skadelig påvirkning fra arbeidsmiljøet.
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item>
+        <Accordion.Header>Til deg som er helt frisk</Accordion.Header>
+        <Accordion.Content>
+          Da er det lite som trengs å gjøres.
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "600px",
+          minHeight: "100vh",
+          padding: "10rem 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const args = {
+  index: 0,
+};
diff --git a/yarn.lock b/yarn.lock
index 8771327f1a8..ff7d709cddb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4080,6 +4080,7 @@ __metadata:
   dependencies:
     "@floating-ui/react": 0.17.0
     "@navikt/aksel-icons": ^2.9.8
+    "@navikt/ds-icons": ^2.9.8
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0

From a19eb98109e8fa35b8a87784ec9ee05ffac24d11 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 8 May 2023 13:07:56 +0200
Subject: [PATCH 06/11] :bug: Fixed small-button size

---
 @navikt/core/css/button.css     |  1 +
 @navikt/core/css/tokens.json    | 12 ++++++------
 @navikt/core/react/package.json |  2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css
index fc48057bb3f..509cda098dc 100644
--- a/@navikt/core/css/button.css
+++ b/@navikt/core/css/button.css
@@ -35,6 +35,7 @@
   --__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
 
   padding: var(--ac-button-padding-small, var(--__ac-button-padding));
+  min-height: 2rem;
 }
 
 .navds-button--xsmall {
diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
index 55e9cd629aa..071240dffc1 100644
--- a/@navikt/core/css/tokens.json
+++ b/@navikt/core/css/tokens.json
@@ -24,12 +24,12 @@
   },
   "button": {
     "--ac-button-border-radius": "--a-border-radius-medium",
-    "--ac-button-padding": "var(--a-spacing-3) var(--a-spacing-5)",
-    "--ac-button-padding-small": "0.375rem var(--a-spacing-3)",
-    "--ac-button-padding-xsmall": "var(--a-spacing-05) var(--a-spacing-2)",
-    "--ac-button-padding-icon-only": "var(--a-spacing-3)",
-    "--ac-button-padding-icon-only-small": "0.375rem",
-    "--ac-button-padding-icon-only-xsmall": "var(--a-spacing-1)",
+    "--ac-button-padding": "--a-spacing-3 --a-spacing-5",
+    "--ac-button-padding-small": "--a-spacing-1 --a-spacing-3",
+    "--ac-button-padding-xsmall": "--a-spacing-05 --a-spacing-2",
+    "--ac-button-padding-icon-only": "--a-spacing-3",
+    "--ac-button-padding-icon-only-small": "--a-spacing-1",
+    "--ac-button-padding-icon-only-xsmall": "--a-spacing-05",
     "--ac-button-primary-bg": "--a-surface-action",
     "--ac-button-primary-text": "--a-text-on-action",
     "--ac-button-primary-hover-bg": "--a-surface-action-hover",
diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json
index 12f6340cefb..86ea971995b 100644
--- a/@navikt/core/react/package.json
+++ b/@navikt/core/react/package.json
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.9.8",
     "@navikt/aksel-icons": "^2.9.8",
+    "@navikt/ds-icons": "^2.9.8",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

From 71bfe06441a70a195e250ea1b645e63e03a9ecd4 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 8 May 2023 13:12:06 +0200
Subject: [PATCH 07/11] :memo: Oppdatert changeset

---
 .changeset/honest-doors-flow.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/.changeset/honest-doors-flow.md b/.changeset/honest-doors-flow.md
index 06b73a0be61..3ed60e239d7 100644
--- a/.changeset/honest-doors-flow.md
+++ b/.changeset/honest-doors-flow.md
@@ -3,10 +3,9 @@
 "@navikt/ds-react": major
 ---
 
-Update Accordion
+**Accordion**
 
-WHAT: Css changes break backwards compatability, so this update is marked as a major change
-
-WHY: New and improved design was desired.
-
-HOW to update: Update application dependencies (no codemods)
+- Accordion oppdatet til å ha chevron left-aligned.
+- Neutral-variant lagt til
+- Diverse nye size-options for heading og paddinger.
+- Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.

From 989d4ea4421285a08769fd7b4c574923a7e16826 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 8 May 2023 13:13:10 +0200
Subject: [PATCH 08/11] :memo: Endret eksempel navn sizes -> size

---
 .../website/pages/eksempler/accordion/{sizes.tsx => size.tsx}     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename aksel.nav.no/website/pages/eksempler/accordion/{sizes.tsx => size.tsx} (100%)

diff --git a/aksel.nav.no/website/pages/eksempler/accordion/sizes.tsx b/aksel.nav.no/website/pages/eksempler/accordion/size.tsx
similarity index 100%
rename from aksel.nav.no/website/pages/eksempler/accordion/sizes.tsx
rename to aksel.nav.no/website/pages/eksempler/accordion/size.tsx

From 374d49a1835e8e31cfee8c43d599893c414f9447 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Mon, 8 May 2023 13:15:45 +0200
Subject: [PATCH 09/11] :bug: Fixed hover-bug when content overlays header

---
 @navikt/core/css/accordion.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/@navikt/core/css/accordion.css b/@navikt/core/css/accordion.css
index e06f0beb5d0..98222c1f6cc 100644
--- a/@navikt/core/css/accordion.css
+++ b/@navikt/core/css/accordion.css
@@ -23,6 +23,7 @@
   border: none;
   position: relative;
   box-shadow: var(--__ac-accordion-header-shadow);
+  z-index: 1;
 }
 
 .navds-accordion__header:hover {

From ca8cc23fa82a61b57bf6c46f5dc95b22df1554ed Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 9 May 2023 10:39:33 +0200
Subject: [PATCH 10/11] :art: Oppdatert icon used for Stepper

---
 @navikt/core/react/src/stepper/Step.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/@navikt/core/react/src/stepper/Step.tsx b/@navikt/core/react/src/stepper/Step.tsx
index b67803e7b93..15e28b848fc 100644
--- a/@navikt/core/react/src/stepper/Step.tsx
+++ b/@navikt/core/react/src/stepper/Step.tsx
@@ -1,4 +1,3 @@
-import { CheckmarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Label, OverridableComponent } from "..";
@@ -27,6 +26,25 @@ export interface StepperStepProps
   interactive?: boolean;
 }
 
+const CompletedIcon = () => (
+  <svg
+    width="14"
+    height="10"
+    viewBox="0 0 14 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable={false}
+    role="img"
+    aria-hidden
+    aria-label="Fullført"
+  >
+    <path
+      d="M4.93563 6.41478L11.3755 0.404669C11.9796 -0.160351 12.9294 -0.130672 13.4959 0.47478C14.0624 1.08027 14.0299 2.03007 13.4249 2.59621L5.92151 9.59934C5.64138 9.85904 5.27598 10 4.90064 10C4.5069 10 4.12756 9.84621 3.83953 9.56111L1.33953 7.06111C0.75401 6.47558 0.75401 5.52542 1.33953 4.93989C1.92506 4.35437 2.87522 4.35437 3.46075 4.93989L4.93563 6.41478Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
 export interface StepperStepType
   extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {}
 
@@ -75,7 +93,7 @@ export const StepComponent: OverridableComponent<
       >
         {completed ? (
           <span className="navds-stepper__circle navds-stepper__circle--success">
-            <CheckmarkIcon aria-hidden />
+            <CompletedIcon />
           </span>
         ) : (
           <Label className="navds-stepper__circle" as="span" aria-hidden="true">

From ecac0905c1616760ebad0d497c3416a6d5420286 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Tue, 9 May 2023 11:18:18 +0200
Subject: [PATCH 11/11] :bug: Fixed stepper non-interactive bg

---
 @navikt/core/css/stepper.css | 8 ++++++--
 @navikt/core/css/tokens.json | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/@navikt/core/css/stepper.css b/@navikt/core/css/stepper.css
index eb7c9cded70..1bc05a09b1d 100644
--- a/@navikt/core/css/stepper.css
+++ b/@navikt/core/css/stepper.css
@@ -229,8 +229,12 @@ button.navds-stepper__step {
   background-color: var(--ac-stepper-active-completed, var(--a-surface-action-selected));
 }
 
-:where(.navds-stepper__step--non-interactive, .navds-stepper__step--non-interactive:hover, .navds-stepper__step--non-interactive.navds-stepper__step--active)
-  .navds-stepper__circle--success {
+:where(.navds-stepper__step--non-interactive, .navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success {
+  color: var(--a-text-on-inverted);
+  background-color: var(--ac-stepper-non-interactive-completed-bg, var(--a-surface-neutral));
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success {
   color: var(--a-text-on-inverted);
   background-color: var(--ac-stepper-non-interactive-active-completed, var(--a-surface-inverted));
 }
diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
index 071240dffc1..9792e0f28ce 100644
--- a/@navikt/core/css/tokens.json
+++ b/@navikt/core/css/tokens.json
@@ -200,8 +200,9 @@
     "--ac-stepper-active-border": "--a-border-action-selected",
     "--ac-stepper-active-text": "--a-text-on-action",
     "--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
-    "--ac-stepper-non-interactive-active": "--a-text-default",
+    "--ac-stepper-non-interactive-completed-bg": "--a-surface-subtle",
     "--ac-stepper-non-interactive-line-completed": "--a-border-strong",
+    "--ac-stepper-non-interactive-active": "--a-text-default",
     "--ac-stepper-non-interactive-active-bg": "--a-surface-inverted",
     "--ac-stepper-non-interactive-active-border": "--a-surface-inverted",
     "--ac-stepper-non-interactive-active-text": "--a-text-on-inverted",