@ndla/ui 56.0.2-alpha.0 → 56.0.3-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.2-alpha.0",
+  "version": "56.0.3-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,13 +33,13 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^15.0.2-alpha.0",
+    "@ndla/button": "^15.0.3-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/hooks": "^2.1.8",
-    "@ndla/icons": "^8.0.2-alpha.0",
+    "@ndla/icons": "^8.0.3-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
-    "@ndla/primitives": "^1.0.2-alpha.0",
-    "@ndla/safelink": "^7.0.2-alpha.0",
+    "@ndla/primitives": "^1.0.3-alpha.0",
+    "@ndla/safelink": "^7.0.3-alpha.0",
     "@ndla/styled-system": "^0.0.10",
     "@ndla/typography": "^0.4.23",
     "@ndla/util": "^4.1.0",
@@ -73,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "45fb10125bc642d020ed37c03b9492976ef7f0d6"
+  "gitHead": "72e6aeb8c306996655995cd2471e080704b7c928"
 }

package/src/Article/ArticleByline.tsx

@@ -10,7 +10,7 @@ import { TFunction } from "i18next";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
-import { ChevronDown } from "@ndla/icons/common";
+import { ArrowDownShortLine } from "@ndla/icons/common";
 import { getLicenseByAbbreviation } from "@ndla/licenses";
 import {
   AccordionItem,
@@ -195,7 +195,7 @@ const ArticleByline = ({
                 <h2>{t("article.useContent")}</h2>
               </Heading>
               <AccordionItemIndicator asChild>
-                <ChevronDown />
+                <ArrowDownShortLine />
               </AccordionItemIndicator>
             </AccordionItemTrigger>
             <AccordionItemContent>{licenseBox}</AccordionItemContent>
@@ -209,7 +209,7 @@ const ArticleByline = ({
                 <h2>{t("article.footnotes")}</h2>
               </Heading>
               <AccordionItemIndicator asChild>
-                <ChevronDown />
+                <ArrowDownShortLine />
               </AccordionItemIndicator>
             </AccordionItemTrigger>
             <AccordionItemContent>

package/src/AudioPlayer/Controls.tsx

@@ -9,9 +9,9 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { SliderValueChangeDetails } from "@ark-ui/react";
-import { Back15, Forward15 } from "@ndla/icons/action";
-import { Play, Pause, VolumeUp } from "@ndla/icons/common";
-import { Done } from "@ndla/icons/editor";
+import { Replay15Line, Forward15Line } from "@ndla/icons/action";
+import { PlayFill, PauseLine, VolumeUpFill } from "@ndla/icons/common";
+import { CheckLine } from "@ndla/icons/editor";
 import {
   Button,
   IconButton,
@@ -234,10 +234,10 @@ const Controls = ({ src, title }: Props) => {
           aria-label={t("audio.controls.rewind15sec")}
           onClick={() => onSeekSeconds(-15)}
         >
-          <Back15 />
+          <Replay15Line />
         </Back15SecButton>
         <PlayButton aria-label={t(playing ? t("audio.pause") : t("audio.play"))} variant="primary" onClick={togglePlay}>
-          {playing ? <Pause /> : <Play />}
+          {playing ? <PauseLine /> : <PlayFill />}
         </PlayButton>
         <Forward15SecButton
           variant="tertiary"
@@ -245,7 +245,7 @@ const Controls = ({ src, title }: Props) => {
           aria-label={t("audio.controls.forward15sec")}
           onClick={() => onSeekSeconds(15)}
         >
-          <Forward15 />
+          <Forward15Line />
         </Forward15SecButton>
         <ProgressWrapper>
           <Text textStyle="label.medium" asChild consumeCss>
@@ -301,7 +301,7 @@ const Controls = ({ src, title }: Props) => {
                 <SelectItem key={speed} item={speed}>
                   <SelectItemText>{speed}x</SelectItemText>
                   <SelectItemIndicator>
-                    <Done />
+                    <CheckLine />
                   </SelectItemIndicator>
                 </SelectItem>
               ))}
@@ -311,7 +311,7 @@ const Controls = ({ src, title }: Props) => {
         <PopoverRoot positioning={{ placement: "top" }}>
           <PopoverTrigger asChild>
             <VolumeButton variant="tertiary" aria-label={t("audio.controls.adjustVolume")}>
-              <VolumeUp />
+              <VolumeUpFill />
             </VolumeButton>
           </PopoverTrigger>
           <PopoverContent>

package/src/AudioPlayer/SpeechControl.tsx

@@ -8,7 +8,7 @@
 
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { VolumeUp } from "@ndla/icons/common";
+import { VolumeUpFill } from "@ndla/icons/common";
 import { TooltipRoot, TooltipTrigger, TooltipContent, IconButton } from "@ndla/primitives";
 
 type Props = {
@@ -38,7 +38,7 @@ const SpeechControl = ({ src, title, type = "audio" }: Props) => {
       <TooltipRoot>
         <TooltipTrigger asChild>
           <IconButton variant="tertiary" aria-label={t(`${type}.play`)} onClick={togglePlay}>
-            <VolumeUp />
+            <VolumeUpFill />
           </IconButton>
         </TooltipTrigger>
         <TooltipContent>{t(`${type}.play`)}</TooltipContent>

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useRef, useImperativeHandle, ReactNode, forwardRef } from "react";
-import { ChevronRight } from "@ndla/icons/common";
+import { ArrowRightShortLine } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 
@@ -67,7 +67,7 @@ const BreadcrumbItem = forwardRef<any, Props>(({ renderItem, renderSeparator, it
           <span>{name}</span>
         </SafeLink>
       )}
-      {renderSeparator ? renderSeparator(item, totalCount) : !isLast && <ChevronRight />}
+      {renderSeparator ? renderSeparator(item, totalCount) : !isLast && <ArrowRightShortLine />}
     </StyledListItem>
   );
 });

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ChevronRight, Home } from "@ndla/icons/common";
+import { ArrowRightShortLine, HomeFill } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import Breadcrumb from "./Breadcrumb";
@@ -25,7 +25,7 @@ const StyledSafeLink = styled(SafeLink, {
   },
 });
 
-const StyledChevronRight = styled(ChevronRight, {
+const StyledArrowRight = styled(ArrowRightShortLine, {
   base: {
     tabletDown: {
       display: "none",
@@ -51,7 +51,7 @@ const HomeBreadcrumb = ({ items }: Props) => {
     if (item.index === 0 && typeof item.name === "string") {
       return (
         <IconSafeLink aria-label={item.name} to={item.to}>
-          <Home title={item.name} />
+          <HomeFill title={item.name} />
         </IconSafeLink>
       );
     }
@@ -63,9 +63,9 @@ const HomeBreadcrumb = ({ items }: Props) => {
       return null;
     }
     if (item.index === 0) {
-      return <StyledChevronRight />;
+      return <StyledArrowRight />;
     }
-    return <ChevronRight />;
+    return <ArrowRightShortLine />;
   };
 
   return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;

package/src/CampaignBlock/CampaignBlock.tsx

@@ -8,7 +8,7 @@
 
 import parse from "html-react-parser";
 import { ReactNode } from "react";
-import { Forward } from "@ndla/icons/common";
+import { ArrowRightLine } from "@ndla/icons/common";
 import { Text } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
@@ -136,7 +136,7 @@ const CampaignBlock = ({
           <MaybeLinkText url={url.url} path={path}>
             <LinkText textStyle="body.medium">
               {parse(url.text ?? "")}
-              <Forward />
+              <ArrowRightLine />
             </LinkText>
           </MaybeLinkText>
         )}

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -9,19 +9,10 @@
 import { CSSProperties, ComponentPropsWithoutRef, useMemo } from "react";
 
 import { colors } from "@ndla/core";
-import { Minus, MenuBook } from "@ndla/icons/action";
-import { Audio } from "@ndla/icons/common";
-import {
-  AssessmentResource,
-  ExternalLearningResource,
-  LearningPath,
-  MultidisciplinaryTopic,
-  SharedResource,
-  Subject,
-  SubjectMaterial,
-  TasksAndActivities,
-} from "@ndla/icons/contentType";
-import { Concept, Media, Video } from "@ndla/icons/editor";
+import { BookmarkLine, SubtractLine } from "@ndla/icons/action";
+import { BookReadFill, ShareFill, VoicePrintLine } from "@ndla/icons/common";
+import { MenuSearchLine, LearningPath, SharedResource, TasksAndActivities } from "@ndla/icons/contentType";
+import { ChatLine, FileListLine, LinkMedium, ImageLine, MovieLine } from "@ndla/icons/editor";
 import { styled } from "@ndla/styled-system/jsx";
 
 import * as contentTypes from "../model/ContentType";
@@ -106,7 +97,7 @@ const StyledContentTypeBadge = styled("div", {
 
 const iconMap = {
   [contentTypes.SUBJECT_MATERIAL]: {
-    icon: SubjectMaterial,
+    icon: FileListLine,
     iconColor: colors.subjectMaterial.dark,
     backgroundColor: colors.subjectMaterial.light,
   },
@@ -116,12 +107,12 @@ const iconMap = {
     backgroundColor: colors.tasksAndActivities.light,
   },
   [contentTypes.ASSESSMENT_RESOURCES]: {
-    icon: AssessmentResource,
+    icon: MenuSearchLine,
     iconColor: colors.assessmentResource.dark,
     backgroundColor: colors.assessmentResource.light,
   },
   [contentTypes.SUBJECT]: {
-    icon: MenuBook,
+    icon: BookReadFill,
     iconColor: colors.subject.dark,
     backgroundColor: colors.subject.light,
   },
@@ -136,41 +127,41 @@ const iconMap = {
     backgroundColor: colors.learningPath.light,
   },
   [contentTypes.TOPIC]: {
-    icon: Subject,
+    icon: BookmarkLine,
     iconColor: colors.subject.dark,
     backgroundColor: colors.subject.light,
   },
   [contentTypes.MULTIDISCIPLINARY_TOPIC]: {
-    icon: MultidisciplinaryTopic,
+    icon: ShareFill,
     backgroundColor: "#b9b37b",
   },
   [contentTypes.CONCEPT]: {
-    icon: Concept,
+    icon: ChatLine,
     iconColor: colors.concept.text,
     backgroundColor: colors.concept.light,
   },
   [contentTypes.EXTERNAL]: {
-    icon: ExternalLearningResource,
+    icon: LinkMedium,
     iconColor: colors.external.dark,
     backgroundColor: colors.external.light,
   },
   [contentTypes.resourceEmbedTypeMapping.image]: {
-    icon: Media,
+    icon: ImageLine,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight,
   },
   [contentTypes.resourceEmbedTypeMapping.audio]: {
-    icon: Audio,
+    icon: VoicePrintLine,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight,
   },
   [contentTypes.resourceEmbedTypeMapping.video]: {
-    icon: Video,
+    icon: MovieLine,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight,
   },
   [contentTypes.MISSING]: {
-    icon: Minus,
+    icon: SubtractLine,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight,
   },

package/src/ContentTypeBadge/ContentTypeBadgeNew.stories.tsx

@@ -8,7 +8,7 @@
 
 import { useTranslation } from "react-i18next";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { Video } from "@ndla/icons/editor";
+import { MovieLine } from "@ndla/icons/editor";
 import { HStack, styled } from "@ndla/styled-system/jsx";
 import { ContentTypeBadge } from "./ContentTypeBadgeNew";
 
@@ -63,7 +63,7 @@ export const ContentOverride: StoryFn<typeof ContentTypeBadge> = () => {
   const { t } = useTranslation();
   return (
     <StyledContentTypeBadge contentType="video">
-      <Video size="small" />
+      <MovieLine size="small" />
       {t("contentTypes.video")}
     </StyledContentTypeBadge>
   );

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -10,7 +10,7 @@ import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { colors, stackOrder } from "@ndla/core";
-import { Link } from "@ndla/icons/common";
+import { LinkMedium } from "@ndla/icons/editor";
 import { copyTextToClipboard } from "@ndla/util";
 
 const ContainerDiv = styled.div`
@@ -77,7 +77,7 @@ const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
   return (
     <ContainerDiv data-embed-type="copy-heading">
       <IconButton data-copy-button="" onClick={onCopyClick} title={tooltip} aria-label={`${tooltip}: ${copyText}`}>
-        <Link />
+        <LinkMedium />
       </IconButton>
       <h2 id={sanitizedTitle} tabIndex={-1} lang={lang}>
         {children}

package/src/Embed/CodeEmbed.tsx

@@ -8,8 +8,8 @@
 
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Copy } from "@ndla/icons/action";
-import { Done } from "@ndla/icons/editor";
+import { FileCopyLine } from "@ndla/icons/action";
+import { CheckLine } from "@ndla/icons/editor";
 import { Button, Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { CodeMetaData } from "@ndla/types-embed";
@@ -75,7 +75,7 @@ const CodeEmbed = ({ embed }: Props) => {
           setIsCopied(true);
         }}
       >
-        {isCopied ? <Done /> : <Copy />}
+        {isCopied ? <CheckLine /> : <FileCopyLine />}
         {isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")}
       </Button>
     </StyledFigure>

package/src/Embed/EmbedErrorPlaceholder.tsx

@@ -7,7 +7,7 @@
  */
 
 import { ReactNode } from "react";
-import { WarningOutline } from "@ndla/icons/common";
+import { AlertLine } from "@ndla/icons/common";
 import { Figure, type FigureFloat, type FigureSize } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { EmbedByline } from "../LicenseByline";
@@ -51,7 +51,7 @@ const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) =>
     <StyledFigure size={figureType} float={float} data-embed-type={type}>
       {children ?? (
         <ErrorPlaceholder data-embed-type={type}>
-          <WarningOutline />
+          <AlertLine />
         </ErrorPlaceholder>
       )}
       <EmbedByline error type={type} />

package/src/Embed/ImageEmbed.tsx

@@ -9,8 +9,8 @@
 import parse from "html-react-parser";
 import { ReactNode, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Plus } from "@ndla/icons/action";
-import { ChevronDown, ChevronUp } from "@ndla/icons/common";
+import { AddLine } from "@ndla/icons/action";
+import { ArrowDownShortLine, ArrowUpShortLine } from "@ndla/icons/common";
 import { Figure, FigureSize, FigureVariantProps, Image } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { ImageEmbedData, ImageMetaData } from "@ndla/types-embed";
@@ -273,7 +273,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
             onClick={toggleImageSize}
             data-expanded={!!imageSizes}
           >
-            <Plus />
+            <AddLine />
           </ExpandButton>
         )}
         {(embedData.size?.endsWith("-hide-byline") || embedData.hideByline === "true") && (
@@ -282,7 +282,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
             aria-label={t(`license.images.itemImage.${isBylineHidden ? "expandByline" : "minimizeByline"}`)}
             onClick={() => setIsBylineHidden((p) => !p)}
           >
-            {isBylineHidden ? <ChevronDown /> : <ChevronUp />}
+            {isBylineHidden ? <ArrowDownShortLine /> : <ArrowUpShortLine />}
           </BylineButton>
         )}
       </ImageWrapper>

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -8,7 +8,7 @@
 
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { InformationOutline } from "@ndla/icons/common";
+import { InformationLine } from "@ndla/icons/common";
 import { MessageBox } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
@@ -52,7 +52,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   return (
     <div role="region" data-embed-type="uu-disclaimer">
       <StyledMessageBox variant="warning" contentEditable={false}>
-        <InformationOutline />
+        <InformationLine />
         <Disclaimer>
           {embedData.disclaimer}
           {disclaimerLink}

package/src/ErrorMessage/ErrorResourceAccessDenied.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { HumanMaleBoard, LogIn } from "@ndla/icons/common";
+import { PresentationLine, LoginBoxLine } from "@ndla/icons/common";
 import { Button } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import ErrorMessage from "./ErrorMessage";
@@ -32,12 +32,12 @@ const ErrorResourceAccessDenied = ({ onAuthenticateClick }: Props) => {
         back: t("errorMessage.back"),
         goToFrontPage: t("errorMessage.goToFrontPage"),
       }}
-      illustrationElement={<HumanMaleBoard size="medium" />}
+      illustrationElement={<PresentationLine size="medium" />}
       customElement={
         <Button onClick={onAuthenticateClick}>
           {t("user.buttonLogIn")}
           <StyledLogInIconWrapper aria-hidden>
-            <LogIn size="medium" />
+            <LoginBoxLine size="medium" />
           </StyledLogInIconWrapper>
         </Button>
       }

package/src/FactBox/FactBox.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentProps, ReactNode, forwardRef, useCallback, useEffect, useId, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ChevronDown } from "@ndla/icons/common";
+import { ArrowDownShortLine } from "@ndla/icons/common";
 import { IconButton } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 
@@ -141,7 +141,7 @@ const FactBox = forwardRef<HTMLElement, Props>(
           aria-controls={contentId}
           aria-label={t(`factbox.${state === "open" ? "close" : "open"}`)}
         >
-          <ChevronDown />
+          <ArrowDownShortLine />
         </StyledIconButton>
         <StyledContent id={contentId} data-state={state} aria-hidden={state === "closed"} {...inertAttribute}>
           {children}

package/src/FileList/Format.tsx

@@ -8,7 +8,7 @@
 
 import styled from "@emotion/styled";
 import { colors, spacing } from "@ndla/core";
-import { Download } from "@ndla/icons/common";
+import { DownloadLine } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
 import { Text } from "@ndla/typography";
 import { FileFormat } from "./File";
@@ -39,7 +39,7 @@ const FileLink = styled(SafeLink)`
   overflow-wrap: anywhere;
 `;
 
-const StyledDownload = styled(Download)`
+const StyledDownload = styled(DownloadLine)`
   margin-top: 3px;
   flex-shrink: 0;
   margin-right: ${spacing.small};

package/src/Gloss/Gloss.tsx

@@ -9,7 +9,7 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { AccordionItemTrigger } from "@ark-ui/react";
-import { ChevronDown } from "@ndla/icons/common";
+import { ArrowDownShortLine } from "@ndla/icons/common";
 import {
   AccordionItem,
   AccordionItemContent,
@@ -170,7 +170,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: P
             <AccordionItemTrigger asChild>
               <IconButton variant="tertiary" aria-label={t("gloss.showExamples")} title={t("gloss.showExamples")}>
                 <AccordionItemIndicator asChild>
-                  <ChevronDown size="medium" />
+                  <ArrowDownShortLine size="medium" />
                 </AccordionItemIndicator>
               </IconButton>
             </AccordionItemTrigger>

package/src/LicenseByline/EmbedByline.tsx

@@ -8,7 +8,7 @@
 
 import { ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { WarningOutline } from "@ndla/icons/common";
+import { AlertLine } from "@ndla/icons/common";
 import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
 import { Button, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
@@ -122,7 +122,7 @@ export const EmbedByline = ({ type, description, children, visibleAlt, ...props
     return (
       <ErrorBylineWrapper>
         <ContentWrapper>
-          <WarningOutline />
+          <AlertLine />
           <BaseDescription>
             <span>{t("embed.embedError", { type: typeString })}</span>
           </BaseDescription>

package/src/LinkBlock/LinkBlock.tsx

@@ -10,7 +10,8 @@ import { format } from "date-fns";
 import { enGB, nb, nn } from "date-fns/locale";
 import parse from "html-react-parser";
 import { useMemo } from "react";
-import { Forward, CalendarEd } from "@ndla/icons/common";
+import { ArrowRightLine } from "@ndla/icons/common";
+import { CalendarLine } from "@ndla/icons/editor";
 import { Heading } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
@@ -63,7 +64,7 @@ const StyledDateContainer = styled("div", {
   },
 });
 
-const StyledCalendarEd = styled(CalendarEd, {
+const StyledCalendarEd = styled(CalendarLine, {
   base: {
     color: "icon.strong",
   },
@@ -94,7 +95,7 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {
           </StyledDateContainer>
         )}
       </InfoWrapper>
-      <Forward data-forward />
+      <ArrowRightLine data-forward />
     </StyledSafeLink>
   );
 };

package/src/Messages/MessageBox.stories.tsx

@@ -8,7 +8,7 @@
 
 import { useTranslation } from "react-i18next";
 import { Meta, StoryFn } from "@storybook/react";
-import { Alarm, HumanMaleBoard, InformationOutline, WarningOutline } from "@ndla/icons/common";
+import { NotificationLine, PresentationLine, InformationLine, AlertLine } from "@ndla/icons/common";
 import MessageBox from "./MessageBox";
 
 export default {
@@ -27,7 +27,7 @@ export const Default: StoryFn<typeof MessageBox> = ({ ...args }) => {
   const { t } = useTranslation();
   return (
     <MessageBox {...args}>
-      <InformationOutline />
+      <InformationLine />
       {t("messageBoxInfo.noContent")}
     </MessageBox>
   );
@@ -37,7 +37,7 @@ export const WithoutCloseButton: StoryFn<typeof MessageBox> = () => {
   const { t } = useTranslation();
   return (
     <MessageBox>
-      <InformationOutline />
+      <InformationLine />
       {t("messageBoxInfo.subjectOutdated")}
     </MessageBox>
   );
@@ -53,7 +53,7 @@ export const WithLinks: StoryFn<typeof MessageBox> = () => {
         { text: "link 3", href: "#" },
       ]}
     >
-      <InformationOutline />
+      <InformationLine />
       {t("messageBoxInfo.newVersion")}
     </MessageBox>
   );
@@ -63,7 +63,7 @@ export const Ghost: StoryFn<typeof MessageBox> = () => {
   const { t } = useTranslation();
   return (
     <MessageBox type="ghost">
-      <HumanMaleBoard />
+      <PresentationLine />
       {t("messageBoxInfo.feide")}
     </MessageBox>
   );
@@ -73,7 +73,7 @@ export const Danger: StoryFn<typeof MessageBox> = () => {
   const { t } = useTranslation();
   return (
     <MessageBox type="danger">
-      <WarningOutline />
+      <AlertLine />
       {t("messageBoxInfo.feide")}
     </MessageBox>
   );
@@ -83,7 +83,7 @@ export const WithCustomIcon: StoryFn<typeof MessageBox> = () => {
   const { t } = useTranslation();
   return (
     <MessageBox type="danger">
-      <Alarm />
+      <NotificationLine />
       {t("messageBoxInfo.feide")}
     </MessageBox>
   );

package/src/Messages/MessageBox.tsx

@@ -11,8 +11,8 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { IconButtonV2 } from "@ndla/button";
 import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
-import { Cross } from "@ndla/icons/action";
-import { Forward } from "@ndla/icons/common";
+import { CloseLine } from "@ndla/icons/action";
+import { ArrowRightLine } from "@ndla/icons/common";
 
 type MessageBoxType = "ghost" | "danger" | "info";
 
@@ -107,7 +107,7 @@ export const MessageBox = ({ type, children, links, showCloseButton, onClose, co
               {links.map((x) => (
                 <Link href={x.href} key={x.href}>
                   <span>{x.text}</span>
-                  <Forward />
+                  <ArrowRightLine />
                 </Link>
               ))}
             </LinkWrapper>
@@ -116,7 +116,7 @@ export const MessageBox = ({ type, children, links, showCloseButton, onClose, co
       </InfoWrapper>
       {showCloseButton && (
         <StyledCloseButton variant="ghost" aria-label={t("close")} title={t("close")} onClick={onClose}>
-          <Cross />
+          <CloseLine />
         </StyledCloseButton>
       )}
     </MessageBoxWrapper>