@navikt/ds-react 2.9.7 → 3.0.0

package/src/button/button.stories.tsx

@@ -1,4 +1,4 @@
-import { Star } from "@navikt/ds-icons";
+import { StarIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { Button } from "./index";
 
@@ -45,7 +45,7 @@ export const Default = {
         variant={props.variant}
         size={props.size}
         loading={props.loading}
-        icon={props.icon ? <Star /> : undefined}
+        icon={props.icon ? <StarIcon /> : undefined}
         iconPosition={props.iconPosition}
       >
         {props.children}
@@ -159,7 +159,7 @@ export const Icon = () => (
         <Button
           key={variant}
           variant={variant}
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
         />
       ))}
     </div>
@@ -169,7 +169,7 @@ export const Icon = () => (
           key={variant}
           variant={variant}
           size="small"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
         />
       ))}
     </div>
@@ -179,7 +179,7 @@ export const Icon = () => (
           key={variant}
           variant={variant}
           size="xsmall"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
         />
       ))}
     </div>
@@ -193,7 +193,7 @@ export const IconWText = () => (
         <Button
           key={variant}
           variant={variant}
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
           iconPosition={i % 2 ? "left" : "right"}
         >
           {varSwitch[variant]}
@@ -206,7 +206,7 @@ export const IconWText = () => (
           key={variant}
           variant={variant}
           size="small"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
           iconPosition={i % 2 ? "left" : "right"}
         >
           {varSwitch[variant]}
@@ -219,7 +219,7 @@ export const IconWText = () => (
           key={variant}
           variant={variant}
           size="xsmall"
-          icon={<Star title="Stjerne" />}
+          icon={<StarIcon title="Stjerne" />}
           iconPosition={i % 2 ? "left" : "right"}
         >
           {varSwitch[variant]}

package/src/chips/Removable.tsx

@@ -1,4 +1,4 @@
-import { Close } from "@navikt/ds-icons";
+import { XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
@@ -58,7 +58,7 @@ export const RemovableChips: OverridableComponent<
       >
         <span className="navds-chips__chip-text">{children}</span>
         <span className="navds-chips__removable-icon">
-          <Close aria-hidden />
+          <XMarkIcon aria-hidden />
         </span>
       </Component>
     );

package/src/chips/Toggle.tsx

@@ -1,4 +1,4 @@
-import { SuccessStroke } from "@navikt/ds-icons";
+import { CheckmarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
@@ -30,7 +30,7 @@ export const ToggleChips: ToggleChipsType = forwardRef(
         aria-pressed={selected}
       >
         {selected && (
-          <SuccessStroke aria-hidden className="navds-chips__toggle-icon" />
+          <CheckmarkIcon aria-hidden className="navds-chips__toggle-icon" />
         )}
         <span className="navds-chips__chip-text">{children}</span>
       </Component>

package/src/date/DateInput.tsx

@@ -1,4 +1,4 @@
-import { Calender } from "@navikt/ds-icons";
+import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, Button, ErrorMessage, Label, omit } from "..";
@@ -124,7 +124,7 @@ const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
             tabIndex={open ? -1 : 0}
             disabled={inputProps.disabled}
             icon={
-              <Calender
+              <CalendarIcon
                 title={
                   open
                     ? conditionalVariables.iconTitle.close

package/src/date/datepicker/caption/Caption.tsx

@@ -1,4 +1,4 @@
-import { Left, Right } from "@navikt/ds-icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { Button, Label } from "../../..";
@@ -32,13 +32,13 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
           variant="tertiary"
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<Left title="velg forrige måned" />}
+          icon={<ArrowLeftIcon title="velg forrige måned" />}
           className="navds-date__caption-button"
           type="button"
         />
         <Button
           aria-label={nextLabel}
-          icon={<Right title="velg neste måned" />}
+          icon={<ArrowRightIcon title="velg neste måned" />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
           variant="tertiary"

package/src/date/datepicker/caption/DropdownCaption.tsx

@@ -1,4 +1,4 @@
-import { Left, Right } from "@navikt/ds-icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import setMonth from "date-fns/setMonth";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
@@ -58,7 +58,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
         variant="tertiary"
         disabled={!previousMonth}
         onClick={() => previousMonth && goToMonth(previousMonth)}
-        icon={<Left title="velg forrige måned" />}
+        icon={<ArrowLeftIcon title="velg forrige måned" />}
         className="navds-date__caption-button"
         type="button"
       />
@@ -94,7 +94,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
 
       <Button
         aria-label={nextLabel}
-        icon={<Right title="velg neste måned" />}
+        icon={<ArrowRightIcon title="velg neste måned" />}
         onClick={() => nextMonth && goToMonth(nextMonth)}
         disabled={!nextMonth}
         variant="tertiary"

package/src/date/monthpicker/MonthCaption.tsx

@@ -1,4 +1,4 @@
-import { Left, Right } from "@navikt/ds-icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
@@ -61,7 +61,7 @@ export const MonthCaption = () => {
         disabled={hasPrevYear()}
         onClick={() => handleButtonClick(-1)}
         aria-label={labelPrevYear(locale?.code)}
-        icon={<Left aria-hidden />}
+        icon={<ArrowLeftIcon aria-hidden />}
         variant="tertiary"
         type="button"
       />
@@ -90,7 +90,7 @@ export const MonthCaption = () => {
         disabled={hasNextYear()}
         onClick={() => handleButtonClick(1)}
         aria-label={labelNextYear(locale?.code)}
-        icon={<Right aria-hidden />}
+        icon={<ArrowRightIcon aria-hidden />}
         variant="tertiary"
         type="button"
       />

package/src/expansion-card/ExpansionCard.tsx

@@ -113,7 +113,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
             `navds-expansioncard--${size}`,
             {
               "navds-expansioncard--open": open ?? _open,
-              "navds-expansioncard--no-fade": !shouldFade.current,
+              "navds-expansioncard--no-animation": !shouldFade.current,
             }
           )}
           ref={ref}

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -18,7 +18,7 @@ export const ExpansionCardDescription: ExpansionCardDescriptionType =
 
     if (panelContext === null) {
       console.error(
-        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+        "<ExpansionCard.Description> has to be used within an <ExpansionCard>"
       );
       return null;
     }

package/src/form/Select.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, SelectHTMLAttributes } from "react";
 import cl from "clsx";
-import { Expand } from "@navikt/ds-icons";
+
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyLong, Label, ErrorMessage, omit, Detail } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
@@ -113,7 +114,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           >
             {children}
           </select>
-          <Expand className="navds-select__chevron" aria-hidden />
+          <ChevronDownIcon className="navds-select__chevron" aria-hidden />
         </div>
         <div
           className="navds-form-field__error"

package/src/form/Switch.tsx

@@ -10,9 +10,9 @@ import { FormFieldProps, useFormField } from "./useFormField";
 
 const SelectedIcon = () => (
   <svg
-    width="12px"
-    height="12px"
-    viewBox="0 0 12 12"
+    width="12"
+    height="10"
+    viewBox="0 0 12 10"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     focusable={false}
@@ -23,9 +23,8 @@ const SelectedIcon = () => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z"
+      d="M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z"
       fill="currentColor"
-      stroke="currentColor"
     />
   </svg>
 );

package/src/form/search/Search.tsx

@@ -1,4 +1,4 @@
-import { Close, Search as SearchIcon } from "@navikt/ds-icons";
+import { XMarkIcon, MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, {
   forwardRef,
@@ -194,7 +194,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         <div className="navds-search__wrapper">
           <div className="navds-search__wrapper-inner">
             {variant === "simple" && (
-              <SearchIcon aria-hidden className="navds-search__search-icon" />
+              <MagnifyingGlassIcon
+                aria-hidden
+                className="navds-search__search-icon"
+              />
             )}
             <input
               ref={mergedRef}
@@ -222,7 +225,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 <span className="navds-sr-only">
                   {clearButtonLabel ? clearButtonLabel : "Tøm"}
                 </span>
-                <Close aria-hidden />
+                <XMarkIcon aria-hidden />
               </button>
             )}
           </div>

package/src/form/search/SearchButton.tsx

@@ -1,8 +1,8 @@
-import { Search } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Button, ButtonProps } from "../..";
 import { SearchContext } from "./Search";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 
 export interface SearchButtonProps
   extends Omit<ButtonProps, "size" | "children" | "variant"> {
@@ -41,7 +41,7 @@ const SearchButton: SearchButtonType = forwardRef(
           onClick?.(e);
         }}
         icon={
-          <Search
+          <MagnifyingGlassIcon
             {...(children ? { "aria-hidden": true } : { title: "Søk" })}
           />
         }

package/src/help-text/HelpText.tsx

@@ -1,7 +1,7 @@
-import { Helptext as HelpTextIcon, HelptextFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { Popover, PopoverProps, mergeRefs } from "..";
+import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -61,11 +61,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           type="button"
           aria-expanded={open}
         >
-          <HelpTextIcon className="navds-help-text__icon" title={title} />
-          <HelptextFilled
-            className="navds-help-text__icon navds-help-text__icon--filled"
-            title={title}
-          />
+          <HelpTextIcon title={title} />
+          <HelpTextIcon filled title={title} />
         </button>
         <Popover
           onClose={() => setOpen(false)}

package/src/help-text/HelpTextIcon.tsx

@@ -0,0 +1,45 @@
+import cl from "clsx";
+import React from "react";
+import { useId } from "../util/useId";
+
+export const HelpTextIcon = ({
+  title,
+  filled = false,
+}: {
+  title: string;
+  filled?: boolean;
+}) => {
+  let titleId: string | undefined = useId();
+  titleId = title ? `title-${titleId}` : undefined;
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      focusable={false}
+      role="img"
+      aria-labelledby={titleId}
+      className={cl("navds-help-text__icon", {
+        "navds-help-text__icon--filled": filled,
+      })}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <circle
+        cx="12"
+        cy="12"
+        r="11"
+        strokeWidth="2"
+        stroke="currentColor"
+        fill={filled ? "currentColor" : "transparent"}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.75 9C9.75 7.75736 10.7574 6.75 12 6.75H12.1716C13.3195 6.75 14.25 7.68054 14.25 8.82843C14.25 9.37966 14.031 9.90832 13.6412 10.2981L12.6412 11.2981C11.7504 12.1889 11.25 13.3971 11.25 14.6569C11.25 15.0711 11.5858 15.4069 12 15.4069C12.4142 15.4069 12.75 15.0711 12.75 14.6569C12.75 13.7949 13.0924 12.9682 13.7019 12.3588L14.7019 11.3588C15.373 10.6877 15.75 9.77748 15.75 8.82843C15.75 6.85212 14.1479 5.25 12.1716 5.25H12C9.92893 5.25 8.25 6.92893 8.25 9V9.5C8.25 9.91421 8.58579 10.25 9 10.25C9.41421 10.25 9.75 9.91421 9.75 9.5V9ZM12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5Z"
+        fill={filled ? "var(--a-surface-default)" : "currentColor"}
+      />
+    </svg>
+  );
+};

package/src/link/link.stories.tsx

@@ -1,10 +1,10 @@
-import { Add } from "@navikt/ds-icons";
+import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import React from "react";
 import {
+  BodyLong,
+  Alert as DsAlert,
   ConfirmationPanel as DsConfirmationPanel,
   Link,
-  Alert as DsAlert,
-  BodyLong,
 } from "..";
 export default {
   title: "ds-react/Link",
@@ -15,7 +15,8 @@ export const Default = {
   render: (props) => {
     const LinkD = () => (
       <Link href="#">
-        {props.icon && <Add />}Ex aliqua incididunt {props.icon && <Add />}
+        {props.icon && <PlusCircleFillIcon />}Ex aliqua incididunt{" "}
+        {props.icon && <PlusCircleFillIcon />}
       </Link>
     );
 
@@ -41,7 +42,8 @@ export const Default = {
 
 const DemoLink = () => (
   <Link href="#">
-    <Add aria-hidden /> Ex aliqua incididunt <Add aria-hidden />
+    <PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}
+    <PlusCircleFillIcon aria-hidden />
   </Link>
 );
 

package/src/link-panel/LinkPanel.tsx

@@ -1,12 +1,13 @@
 import React, { forwardRef } from "react";
 import { Panel, OverridableComponent } from "..";
-import { Next } from "@navikt/ds-icons";
+
 import cl from "clsx";
 import { LinkPanelTitle, LinkPanelTitleType } from "./LinkPanelTitle";
 import {
   LinkPanelDescription,
   LinkPanelDescriptionType,
 } from "./LinkPanelDescription";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
 
 export interface LinkPanelProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -41,7 +42,7 @@ export const LinkPanelComponent: OverridableComponent<
         className={cl("navds-link-panel", className)}
       >
         <div className="navds-link-panel__content">{children}</div>
-        <Next className="navds-link-panel__chevron" aria-hidden />
+        <ChevronRightIcon className="navds-link-panel__chevron" aria-hidden />
       </Panel>
     );
   }

package/src/list/list.stories.tsx

@@ -1,9 +1,9 @@
 import {
-  BabyChangingRoom,
-  Braille,
-  Cognition,
-  Refresh,
-} from "@navikt/ds-icons";
+  BabyWrappedIcon,
+  BrailleIcon,
+  HeadHeartIcon,
+  RecycleIcon,
+} from "@navikt/aksel-icons";
 import { Meta } from "@storybook/react";
 import React from "react";
 import { List } from "..";
@@ -97,20 +97,20 @@ export const Icons = {
       <List>
         <List.Item
           title="Lorem Ipsum Dolor Sit Amet"
-          icon={<Braille aria-hidden />}
+          icon={<BrailleIcon aria-hidden />}
         >
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
         <List.Item
           title="Consectetur Adipiscing Elit"
-          icon={<Cognition aria-hidden />}
+          icon={<HeadHeartIcon aria-hidden />}
         >
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
-        <List.Item icon={<BabyChangingRoom aria-hidden />}>
+        <List.Item icon={<BabyWrappedIcon aria-hidden />}>
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
-        <List.Item icon={<Refresh aria-hidden />}>
+        <List.Item icon={<RecycleIcon aria-hidden />}>
           Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
         </List.Item>
       </List>

package/src/modal/Modal.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef, useEffect, useMemo, useRef } from "react";
 import cl from "clsx";
 import ReactModal from "react-modal";
-import { Close } from "@navikt/ds-icons";
+
 import { Button, mergeRefs, useProvider } from "..";
 import ModalContent, { ModalContentType } from "./ModalContent";
+import { XMarkIcon } from "@navikt/aksel-icons";
 
 export interface ModalProps {
   /**
@@ -144,10 +145,10 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
               "navds-modal__button--shake": shouldCloseOnOverlayClick,
             })}
             size="small"
-            variant="tertiary"
+            variant="tertiary-neutral"
             ref={buttonRef}
             onClick={onClose}
-            icon={<Close title="Lukk modalvindu" />}
+            icon={<XMarkIcon title="Lukk modalvindu" />}
           />
         )}
       </ReactModal>

package/src/pagination/Pagination.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { Back, Next } from "@navikt/ds-icons";
+import React, { forwardRef } from "react";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { BodyShort } from "..";
 import PaginationItem, {
   PaginationItemProps,
@@ -145,7 +146,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               page={page - 1}
               size={size}
               icon={
-                <Back
+                <ChevronLeftIcon
                   className="navds-pagination__prev-next-icon"
                   {...(prevNextTexts
                     ? { "aria-hidden": true }
@@ -199,7 +200,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               page={page + 1}
               size={size}
               icon={
-                <Next
+                <ChevronRightIcon
                   className="navds-pagination__prev-next-icon"
                   {...(prevNextTexts
                     ? { "aria-hidden": true }

package/src/read-more/ReadMore.tsx

@@ -1,9 +1,7 @@
 import React, { forwardRef, useState } from "react";
 import cl from "clsx";
-import { Expand } from "@navikt/ds-icons";
 import { BodyLong } from "../typography";
-import { ExpandFilled } from "@navikt/ds-icons";
-import AnimateHeight from "../util/AnimateHeight";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -74,18 +72,23 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           }}
           aria-expanded={isOpened}
         >
-          <Expand className="navds-read-more__expand-icon" aria-hidden />
-          <ExpandFilled
-            className="navds-read-more__expand-icon navds-read-more__expand-icon--filled"
+          <ChevronDownIcon
+            className="navds-read-more__expand-icon"
             aria-hidden
           />
           <span>{header}</span>
         </button>
-        <AnimateHeight height={isOpened ? "auto" : 0} duration={250}>
-          <BodyLong as="div" className="navds-read-more__content" size={size}>
-            {children}
-          </BodyLong>
-        </AnimateHeight>
+
+        <BodyLong
+          as="div"
+          aria-hidden={!isOpened}
+          className={cl("navds-read-more__content", {
+            "navds-read-more__content--closed": !isOpened,
+          })}
+          size={size}
+        >
+          {children}
+        </BodyLong>
       </div>
     );
   }

package/src/read-more/readmore.stories.tsx

@@ -26,8 +26,11 @@ export const Default = {
         header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
         size={props.size}
       >
-        Command station, this is ST 321. Code Clearance Blue. We're starting our
-        approach. Deactivate the security shield.
+        <div style={{ maxWidth: 300 }}>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia,
+          tempore corporis exercitationem minus dignissimos eius aspernatur
+          fugiat iusto.
+        </div>
       </ReadMore>
     );
   },

package/src/stepper/Step.tsx

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

package/src/stepper/stepper.stories.tsx

@@ -175,9 +175,7 @@ export const CompletedSteps = () => {
         onStepChange={(step) => setActiveStep(step)}
       >
         <Stepper.Step completed={activeStep > 1}>Start søknad</Stepper.Step>
-        <Stepper.Step completed={activeStep > 2}>
-          Personopplysninger
-        </Stepper.Step>
+        <Stepper.Step completed>Personopplysninger</Stepper.Step>
         <Stepper.Step completed={activeStep > 3}>Saksopplysninger</Stepper.Step>
         <Stepper.Step completed={activeStep >= 4}>
           Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst