Version Packages (#1968 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🐛 Fikset default headingSize for button
2026-10-13 17:22:02 +00:00 · 2023-05-10 10:22:48 +02:00 · 2023-05-10 10:16:19 +02:00 · 2023-05-09 13:28:35 +02:00 · 2023-05-09 13:14:09 +02:00 · 2023-05-09 13:05:15 +02:00
106 changed files with 1473 additions and 423 deletions
@@ -1,5 +1,29 @@
 # @navikt/aksel-icons

+## 3.0.1
+
+## 3.0.0
+
+## 2.9.8
+
+### Patch Changes
+
+- [#1959](https://github.com/navikt/aksel/pull/1959) [`8790c5997`](https://github.com/navikt/aksel/commit/8790c5997e0d647419bdb5080c86781d08c196b8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Statusikoner er nå tydeligere og mer konsistente.
+
+## 2.9.7
+
+### Patch Changes
+
+- :bug: CheckmarkIcon
+
+## 2.9.6
+
+### Patch Changes
+
+- [#1956](https://github.com/navikt/aksel/pull/1956) [`8c8559009`](https://github.com/navikt/aksel/commit/8c8559009982911bc4402913656ba4cc6a223dd1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset CheckmarkCircleIcon
+
+## 2.9.5
+
 ## 2.9.4

 ## 2.9.3
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0303 6.96967C19.3232 7.26256 19.3232 7.73744 19.0303 8.03033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L4.96967 12.0303C4.67678 11.7374 4.67678 11.2626 4.96967 10.9697C5.26256 10.6768 5.73744 10.6768 6.03033 10.9697L10 14.9393L17.9697 6.96967C18.2626 6.67678 18.7374 6.67678 19.0303 6.96967Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9983 6.93942C19.3079 7.21461 19.3357 7.68866 19.0606 7.99825L11.0606 16.9983C10.9233 17.1526 10.7285 17.2436 10.522 17.2497C10.3156 17.2557 10.1157 17.1764 9.96967 17.0303L4.96967 12.0303C4.67678 11.7374 4.67678 11.2625 4.96967 10.9696C5.26256 10.6768 5.73744 10.6768 6.03033 10.9696L10.4679 15.4072L17.9394 7.0017C18.2146 6.69212 18.6887 6.66423 18.9983 6.93942Z" fill="#262626"/>
 </svg>
@@ -15,5 +15,5 @@ keywords:
  - fullføring
  - validering
 variant: Stroke
-updated_at: 14.04.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023
@@ -15,5 +15,5 @@ keywords:
  - fullføring
  - validering
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM16.5725 9.48447C16.8401 9.16827 16.8007 8.69503 16.4845 8.42748C16.1683 8.15992 15.695 8.19935 15.4275 8.51556L10.454 14.3933L8.03033 11.9697C7.73744 11.6768 7.26256 11.6768 6.96967 11.9697C6.67678 12.2626 6.67678 12.7375 6.96967 13.0303L9.96967 16.0303C10.118 16.1787 10.3216 16.2581 10.5312 16.2494C10.7407 16.2407 10.9371 16.1446 11.0725 15.9845L16.5725 9.48447Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75ZM16.9536 9.27485C17.2434 8.93229 17.2007 8.41962 16.8582 8.12977C16.5156 7.83991 16.0029 7.88263 15.7131 8.22519L10.3251 14.5928L7.69952 11.9672C7.38222 11.6499 6.86778 11.6499 6.55048 11.9672C6.23317 12.2845 6.23317 12.7989 6.55048 13.1162L9.80048 16.3662C9.96114 16.5269 10.1817 16.6129 10.4088 16.6035C10.6358 16.594 10.8485 16.49 10.9953 16.3165L16.9536 9.27485Z" fill="#262626"/>
 </svg>
@@ -15,5 +15,5 @@ keywords:
  - fullføring
  - validering
 variant: Fill
-updated_at: 08.03.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023
@@ -9,5 +9,5 @@ keywords:
  - vise/skjule
  - bytte
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 02.05.2023
 created_at: 07.03.2023
@@ -10,5 +10,5 @@ keywords:
  - nettverk
  - network
 variant: Stroke
-updated_at: 18.04.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023
@@ -13,5 +13,5 @@ keywords:
  - oppmerksomhet
  - viktig
 variant: Stroke
-updated_at: 25.04.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023
@@ -15,5 +15,5 @@ keywords:
  - beskrivelse
  - forklaring
 variant: Stroke
-updated_at: 31.03.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023
@@ -6,5 +6,5 @@ keywords:
  - chain
  - kobling
 variant: Stroke
-updated_at: 11.04.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023
@@ -20,5 +20,5 @@ keywords:
  - ansvar
  - paragraf
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 03.05.2023
 created_at: 07.03.2023
@@ -6,5 +6,5 @@ keywords:
  - legg til
  - more
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 03.05.2023
 created_at: 07.03.2023
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.25 9.5C10.25 8.92044 10.4399 8.49575 10.7178 8.21783C10.9957 7.93991 11.4204 7.75 12 7.75C12.5796 7.75 13.0043 7.93991 13.2822 8.21783C13.5601 8.49575 13.75 8.92044 13.75 9.5C13.75 9.65777 13.6859 9.84934 13.4991 10.1109C13.3076 10.379 13.0426 10.6467 12.7197 10.9697L12.6985 10.9909C12.4009 11.2884 12.0511 11.6381 11.7803 12.0172C11.4984 12.4118 11.25 12.9078 11.25 13.5V14C11.25 14.4142 11.5858 14.75 12 14.75C12.4142 14.75 12.75 14.4142 12.75 14V13.5C12.75 13.3422 12.8141 13.1507 13.0009 12.8891C13.1924 12.621 13.4574 12.3533 13.7803 12.0303L13.8015 12.0091C14.0991 11.7116 14.4489 11.3619 14.7197 10.9828C15.0016 10.5882 15.25 10.0922 15.25 9.5C15.25 8.57956 14.9399 7.75425 14.3428 7.15717C13.7457 6.56009 12.9204 6.25 12 6.25C11.0796 6.25 10.2543 6.56009 9.65717 7.15717C9.06009 7.75425 8.75 8.57956 8.75 9.5C8.75 9.91421 9.08579 10.25 9.5 10.25C9.91421 10.25 10.25 9.91421 10.25 9.5ZM12 15.5C11.4477 15.5 11 15.9477 11 16.5C11 17.0523 11.4477 17.5 12 17.5C12.5523 17.5 13 17.0523 13 16.5C13 15.9477 12.5523 15.5 12 15.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="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="#262626"/>
 </svg>
@@ -13,5 +13,5 @@ keywords:
  - veiledning
  - spørsmålstegn
 variant: Stroke
-updated_at: 31.03.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023
@@ -6,5 +6,5 @@ keywords:
  - crystal
  - snø
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.03033 5.96967C6.73744 5.67678 6.26256 5.67678 5.96967 5.96967C5.67678 6.26256 5.67678 6.73744 5.96967 7.03033L10.9393 12L5.96967 16.9697C5.67678 17.2626 5.67678 17.7374 5.96967 18.0303C6.26256 18.3232 6.73744 18.3232 7.03033 18.0303L12 13.0607L16.9697 18.0303C17.2626 18.3232 17.7374 18.3232 18.0303 18.0303C18.3232 17.7374 18.3232 17.2626 18.0303 16.9697L13.0607 12L18.0303 7.03033C18.3232 6.73744 18.3232 6.26256 18.0303 5.96967C17.7374 5.67678 17.2626 5.67678 16.9697 5.96967L12 10.9393L7.03033 5.96967Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0607L17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L12 10.9393L6.53033 5.46967Z" fill="#262626"/>
 </svg>
@@ -15,5 +15,5 @@ keywords:
  - avvis
  - avslå
 variant: Stroke
-updated_at: 13.04.2023
+updated_at: 04.05.2023
 created_at: 07.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "2.9.4",
+  "version": "3.0.1",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,47 @@
 # @navikt/aksel

+## 3.0.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.0.1
+
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies [[`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f), [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f)]:
+  - @navikt/ds-css@3.0.0
+
+## 2.9.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@2.9.8
+
+## 2.9.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@2.9.7
+
+## 2.9.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@2.9.6
+
+## 2.9.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@2.9.5
+
 ## 2.9.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "2.9.4",
+  "version": "3.0.1",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "2.9.4",
+    "@navikt/ds-css": "3.0.1",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,17 @@
 # @navikt/ds-codemod

+## 3.0.1
+
+## 3.0.0
+
+## 2.9.8
+
+## 2.9.7
+
+## 2.9.6
+
+## 2.9.5
+
 ## 2.9.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.9.4",
+  "version": "3.0.1",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -40,8 +40,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.9.4",
-    "@navikt/ds-react": "^2.9.4",
+    "@navikt/ds-icons": "^3.0.1",
+    "@navikt/ds-react": "^3.0.1",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,41 @@
 # @navikt/ds-css

+## 3.0.1
+
+## 3.0.0
+
+### Major Changes
+
+- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
+
+  - 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.
+
+- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
+
+  **Sideeffects av ikonendringer**
+
+  - 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å avrundet
+  - ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
+  - Tabs bruker default text-default nå
+  - Stepper har endret hvordan den styler checkmark-ikon.
+
+## 2.9.8
+
+## 2.9.7
+
+## 2.9.6
+
+## 2.9.5
+
 ## 2.9.4

 ## 2.9.3
@@ -2,30 +2,78 @@
  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));
-}
-
-.navds-accordion__header:focus {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
+  position: relative;
+  box-shadow: var(--__ac-accordion-header-shadow);
+  z-index: 1;
 }

 .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));
+  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-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+  border-radius: var(--a-border-radius-large);
+}
+
+@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 +81,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__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
-}
-
-.navds-accordion__expand-icon {
+.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 > .navds-accordion__expand-icon {
-  transform: rotateZ(180deg);
+:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
+  transform: translateY(1px);
 }

-.navds-accordion__expand-icon--filled {
+.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
+  > :where(.navds-accordion__header):hover
+  > :where(.navds-accordion__icon-wrapper)
+  > :where(.navds-accordion__header-chevron) {
+  transform: translateY(-1px) rotate(-180deg);
+}
+
+/*************************
+ * Variant/Default *
+ *************************/
+.navds-accordion__item--open {
+  background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
+}
+
+/*************************
+ * Variant/Neutral *
+ *************************/
+.navds-accordion__item--open.navds-accordion__item--neutral {
+  background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
+}
+
+/*************************
+ * 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__header:hover > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
-  display: inherit;
+.navds-accordion__item--no-animation :where(.navds-accordion__content) {
+  animation: none;
 }

-.navds-accordion__header:hover > .navds-accordion__expand-icon {
-  display: none;
+@keyframes fadeAccordionContent {
+  0% {
+    opacity: 0.25;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
@@ -28,7 +28,6 @@
 }

 .navds-alert--small > .navds-alert__icon {
-  font-size: 1.25rem;
  height: var(--a-font-line-height-large);
 }

@@ -32,9 +32,10 @@
 }

 .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));
+  min-height: 2rem;
 }

 .navds-button--xsmall {
@@ -51,13 +52,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 +89,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;
 }

 /*************************
@@ -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 {
@@ -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));
 }

@@ -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);
  }

@@ -72,7 +72,7 @@
  cursor: pointer;
  background: none;
  border: none;
-  font-size: 1rem;
+  font-size: 1.25rem;
  padding: 0;
 }

@@ -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
 */
@@ -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;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.9.4",
+  "version": "3.0.1",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.9.4",
+    "@navikt/ds-tokens": "^3.0.1",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -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;
+  font-size: 1.25rem;
+}
+
+.navds-read-more__button:hover > .navds-read-more__expand-icon {
+  transform: translateY(1px);
 }

 .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
  transform: rotate(-180deg);
 }

-.navds-read-more__expand-icon--filled {
-  display: none;
-}
-
-.navds-read-more__button:hover > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
-  display: inherit;
-}
-
-.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);
 }
@@ -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,26 @@ 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__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));
+}
+
 :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));
+}
@@ -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;
 }
@@ -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;
 }

@@ -14,26 +14,22 @@
    "--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",
-    "--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",
@@ -204,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",
@@ -226,7 +223,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",
@@ -1,5 +1,80 @@
 # @navikt/ds-react

+## 3.0.1
+
+### Patch Changes
+
+- [`fa2ead912`](https://github.com/navikt/aksel/commit/fa2ead912a4db15d1fa7e2c3efccbe69a64dc9a7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :fire: Fjernet ds-icons fra dependencies
+
+- [`db3846f5c`](https://github.com/navikt/aksel/commit/db3846f5cd483ad0ca24bc5938cfcdb64260f89d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default headingSize for Accordion
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.0.1
+
+## 3.0.0
+
+### Major Changes
+
+- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
+
+  - 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.
+
+- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
+
+  **Sideeffects av ikonendringer**
+
+  - 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å avrundet
+  - ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
+  - Tabs bruker default text-default nå
+  - Stepper har endret hvordan den styler checkmark-ikon.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@3.0.0
+  - @navikt/ds-icons@3.0.0
+
+## 2.9.8
+
+### Patch Changes
+
+- Updated dependencies [[`8790c5997`](https://github.com/navikt/aksel/commit/8790c5997e0d647419bdb5080c86781d08c196b8)]:
+  - @navikt/aksel-icons@2.9.8
+  - @navikt/ds-icons@2.9.8
+
+## 2.9.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.9.7
+  - @navikt/ds-icons@2.9.7
+
+## 2.9.6
+
+### Patch Changes
+
+- Updated dependencies [[`8c8559009`](https://github.com/navikt/aksel/commit/8c8559009982911bc4402913656ba4cc6a223dd1)]:
+  - @navikt/aksel-icons@2.9.6
+  - @navikt/ds-icons@2.9.6
+
+## 2.9.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.9.5
+  - @navikt/ds-icons@2.9.5
+
 ## 2.9.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.9.4",
+  "version": "3.0.1",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,8 +38,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^2.9.4",
-    "@navikt/ds-icons": "^2.9.4",
+    "@navikt/aksel-icons": "^3.0.1",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -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 'small'
+   */
+  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 = "small",
+      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;
@@ -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>
    );
  }
 );
@@ -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: [],
+});
@@ -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>
    );
  }
@@ -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}
@@ -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 Controlled = () => {
+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 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",
+  },
+};
@@ -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;
  }
@@ -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]}
@@ -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>
    );
@@ -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>
@@ -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
@@ -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"
@@ -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"
@@ -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"
      />
@@ -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}
@@ -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;
    }
@@ -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"
@@ -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>
 );
@@ -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>
@@ -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" })}
          />
        }
@@ -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)}
@@ -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>
+  );
+};
@@ -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>
    );
  }
@@ -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>
 );

@@ -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>
@@ -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>
@@ -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 }
@@ -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>
    );
  }
@@ -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>
    );
  },
@@ -1,4 +1,3 @@
-import { SuccessFilled } from "@navikt/ds-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> {}

@@ -74,10 +92,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">
+            <CompletedIcon />
+          </span>
        ) : (
          <Label className="navds-stepper__circle" as="span" aria-hidden="true">
            {unsafe_index + 1}
@@ -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
@@ -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>
        ) : (
@@ -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>
@@ -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>
    );
@@ -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>
@@ -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>
  </>
@@ -1,5 +1,17 @@
 # @navikt/ds-tailwind

+## 3.0.1
+
+## 3.0.0
+
+## 2.9.8
+
+## 2.9.7
+
+## 2.9.6
+
+## 2.9.5
+
 ## 2.9.4

 ## 2.9.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "2.9.4",
+  "version": "3.0.1",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.9.4",
+    "@navikt/ds-tokens": "^3.0.1",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,17 @@
 # @navikt/ds-tokens

+## 3.0.1
+
+## 3.0.0
+
+## 2.9.8
+
+## 2.9.7
+
+## 2.9.6
+
+## 2.9.5
+
 ## 2.9.4

 ## 2.9.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.9.4",
+  "version": "3.0.1",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -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>
@@ -1,5 +1,17 @@
 # @navikt/ds-icons

+## 3.0.1
+
+## 3.0.0
+
+## 2.9.8
+
+## 2.9.7
+
+## 2.9.6
+
+## 2.9.5
+
 ## 2.9.4

 ## 2.9.3
@@ -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

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.9.4",
+  "version": "3.0.1",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,17 @@
 # @navikt/ds-css-internal

+## 3.0.1
+
+## 3.0.0
+
+## 2.9.8
+
+## 2.9.7
+
+## 2.9.6
+
+## 2.9.5
+
 ## 2.9.4

 ## 2.9.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "2.9.4",
+  "version": "3.0.1",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,74 @@
 # @navikt/ds-react-internal

+## 3.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`fa2ead912`](https://github.com/navikt/aksel/commit/fa2ead912a4db15d1fa7e2c3efccbe69a64dc9a7), [`db3846f5c`](https://github.com/navikt/aksel/commit/db3846f5cd483ad0ca24bc5938cfcdb64260f89d)]:
+  - @navikt/ds-react@3.0.1
+  - @navikt/aksel-icons@3.0.1
+
+## 3.0.0
+
+### Major Changes
+
+- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
+
+  **Sideeffects av ikonendringer**
+
+  - 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å avrundet
+  - ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
+  - Tabs bruker default text-default nå
+  - Stepper har endret hvordan den styler checkmark-ikon.
+
+### Patch Changes
+
+- Updated dependencies [[`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f), [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f)]:
+  - @navikt/ds-react@3.0.0
+  - @navikt/aksel-icons@3.0.0
+
+## 2.9.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.9.8
+  - @navikt/ds-icons@2.9.8
+
+## 2.9.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.9.7
+  - @navikt/ds-icons@2.9.7
+
+## 2.9.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.9.6
+  - @navikt/ds-icons@2.9.6
+
+## 2.9.5
+
+### Patch Changes
+
+- [#1953](https://github.com/navikt/aksel/pull/1953) [`7019898c0`](https://github.com/navikt/aksel/commit/7019898c0948cf18e788800c5b2d1d547958cde9) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline håndterte ikke startDate/endDate-endringer riktig
+
+  - All bruk av `<button>` i Timeline har nå `type="button"`
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.9.5
+  - @navikt/ds-icons@2.9.5
+
 ## 2.9.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.9.4",
+  "version": "3.0.1",
  "description": "Aksel react components for internal UIs in NAV",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -36,8 +36,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.9.4",
-    "@navikt/ds-react": "^2.9.4",
+    "@navikt/aksel-icons": "^3.0.1",
+    "@navikt/ds-react": "^3.0.1",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -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}
        >
@@ -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>
@@ -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>
  )
 );
@@ -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>
@@ -44,6 +44,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
            onClick={() => setOpen(!open)}
            aria-label={`pin:${format(date, "dd.MM.yyyy")}`}
            aria-expanded={open}
+            type="button"
          />
        </div>
        {children && (
@@ -19,11 +19,13 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Decides startingpoint in timeline.
   * Defaults to earliest date among the timeline periods.
+   * @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
   */
  startDate?: Date;
  /**
   * Decides end-date for timeline.
   * Defaults to the latest date among the timeline periods.
+   * @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
   */
  endDate?: Date;
  /**
@@ -97,12 +99,20 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
    const initialEndDate = endOfDay(useLatestDate({ endDate, rows }));
    const processedRows = useTimelineRows(
      rowsRaw,
-      start,
-      endInclusive,
+      startDate ?? start,
+      endDate ?? endInclusive,
      direction
    );

    const handleZoomChange = (zoomStart: Date) => {
+      if (startDate || endDate) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            "Zooming is not supported when startDate or endDate is set"
+          );
+        }
+        return;
+      }
      if (direction === "left") {
        if (isSameDay(zoomStart, start)) {
          setStart(initialStartDate);
@@ -153,8 +163,8 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
    return (
      <TimelineContext.Provider
        value={{
-          startDate: start,
-          endDate: endInclusive,
+          startDate: startDate ?? start,
+          endDate: endDate ?? endInclusive,
          direction: direction,
          setStart: (d) => handleZoomChange(d),
          setEndInclusive: (d) => setEndInclusive(d),
@@ -45,6 +45,7 @@ const ClickablePeriod = React.memo(
      <>
        <button
          {...restProps}
+          type="button"
          ref={(r) => {
            firstFocus && addFocusable(r, index);
            mergedRef(r);
@@ -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")}
@@ -56,6 +56,7 @@ export const ZoomButton: ZoomButtonType = forwardRef(
    return (
      <Detail as="li">
        <button
+          type="button"
          aria-label={
            !currentZoom
              ? `Zoom tidslinjen ${format(
@@ -15,15 +15,15 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^2.9.4",
-    "@navikt/ds-codemod": "^2.9.4",
-    "@navikt/ds-css": "^2.9.4",
-    "@navikt/ds-css-internal": "^2.9.4",
-    "@navikt/ds-icons": "^2.9.4",
-    "@navikt/ds-react": "^2.9.4",
-    "@navikt/ds-react-internal": "^2.9.4",
-    "@navikt/ds-tailwind": "^2.9.4",
-    "@navikt/ds-tokens": "^2.9.4"
+    "@navikt/aksel-icons": "^3.0.1",
+    "@navikt/ds-codemod": "^3.0.1",
+    "@navikt/ds-css": "^3.0.1",
+    "@navikt/ds-css-internal": "^3.0.1",
+    "@navikt/ds-icons": "^3.0.1",
+    "@navikt/ds-react": "^3.0.1",
+    "@navikt/ds-react-internal": "^3.0.1",
+    "@navikt/ds-tailwind": "^3.0.1",
+    "@navikt/ds-tokens": "^3.0.1"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	2fe5a0a0e2	Version Packages (#1968 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-10 10:22:48 +02:00
Ken	db3846f5cd	🐛 Fikset default headingSize for button	2023-05-10 10:16:19 +02:00
Ken	fa2ead912a	🔥 Fjernet ds-icons fra ds-react dependencies	2023-05-09 13:28:35 +02:00
Ken	11e9b9bef2	🐛 Fikset visning av kode under examples	2023-05-09 13:14:09 +02:00
github-actions[bot]andgithub-actions[bot]	6f53b33e69	Version Packages (#1965 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-09 13:05:15 +02:00
KenandJulian Nymark	166ee5feb3	✨ V3, Accordion og ikonoppdatering (#1964 ) Co-authored-by: Julian Nymark <j@juliannymark.com>	2023-05-09 12:06:35 +02:00
AndreasDybdahl	c29d2aba1b	Update ExpansionCardDescription.tsx (#1962 )	2023-05-06 18:47:18 +02:00
github-actions[bot]andgithub-actions[bot]	2568fe70b1	Version Packages (#1960 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-05 10:18:28 +02:00
Ken	8790c5997e	💄 Statusikoner er nå tydeligere og mer konsistente. (#1959 )	2023-05-05 10:13:24 +02:00
Ken	5b12778c96	🐛 CheckmarkIcon fix	2023-05-04 14:11:51 +02:00
github-actions[bot]andgithub-actions[bot]	3edb149b01	Version Packages (#1957 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-04 10:34:54 +02:00
Ken	8c85590099	🐛 CheckMarkCircle var ikke riktig alignet (#1956 )	2023-05-04 10:31:38 +02:00
github-actions[bot]andgithub-actions[bot]	029d3c7719	Version Packages (#1955 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-05-03 16:00:48 +02:00
Ken	7019898c09	🐛 Timeline håndterte ikke startDate/endDate-endringer riktig (#1953 )	2023-05-03 15:50:55 +02:00