Merged in feat/SW-1711-switch-icons (pull request #1558)

Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons.

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra

apps/scandic-web/app/[lang]/(live)/layout.tsx

@@ -2,6 +2,7 @@ import "@scandic-hotels/design-system/fonts.css"
 import "@/app/globals.css"
 import "@/public/_static/css/design-system-new-deprecated.css"
 import "@scandic-hotels/design-system/style.css"
+import "react-material-symbols/rounded"
 
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import Script from "next/script"

apps/scandic-web/app/[lang]/(live-current)/layout.tsx

@@ -2,6 +2,7 @@ import "@scandic-hotels/design-system/fonts.css"
 import "@/app/globals.css"
 import "@/public/_static/css/design-system-current-deprecated.css"
 import "@scandic-hotels/design-system/style.css"
+import "react-material-symbols/rounded"
 
 import Script from "next/script"
 

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx

@@ -2,11 +2,11 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { partnerSas } from "@/constants/routes/myPages"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
@@ -18,7 +18,7 @@ export function AlreadyLinkedError() {
 
   return (
     <SASModal>
-      <ErrorCircleFilledIcon height={64} width={64} color="red" />
+      <MaterialIcon icon="cancel" isFilled size={64} />
       <Typography variant="Title/Subtitle/lg">
         <h1>{intl.formatMessage({ id: "Accounts are already linked" })}</h1>
       </Typography>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx

@@ -2,11 +2,11 @@
 import { Link } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { profile } from "@/constants/routes/myPages"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
@@ -18,7 +18,12 @@ export function DateOfBirthError() {
 
   return (
     <SASModal>
-      <ErrorCircleFilledIcon height={64} width={64} color="red" />
+      <MaterialIcon
+        icon="cancel"
+        color="Icon/Feedback/Error"
+        isFilled
+        size={64}
+      />
       <Typography variant="Title/Subtitle/lg">
         <h1>{intl.formatMessage({ id: "Date of birth not matching" })}</h1>
       </Typography>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/GenericError.tsx

@@ -1,10 +1,9 @@
 "use client"
 import Image from "next/image"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
-
 import { SASModal } from "./SASModal"
 
 import type { ReactNode } from "react"
@@ -21,7 +20,12 @@ export function GenericError({
   return (
     <SASModal>
       {variant === "error" ? (
-        <ErrorCircleFilledIcon height={64} width={64} color="red" />
+        <MaterialIcon
+          icon="cancel"
+          isFilled
+          size={64}
+          color="Icon/Feedback/Error"
+        />
       ) : (
         <Image
           src="/_static/img/scandic-loyalty-time.svg"

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx

@@ -6,11 +6,11 @@ import { useTransition } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { profileEdit } from "@/constants/routes/myPages"
 
-import { ArrowRightIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
@@ -94,7 +94,8 @@ export function LinkAccountForm({
             {intl.formatMessage({
               id: "Edit your personal details",
             })}
-            <ArrowRightIcon color="peach80" height={18} width={18} />
+
+            <MaterialIcon icon="arrow_forward" size={18} color="CurrentColor" />
           </Link>
         </div>
         <div className={styles.termsAndConditions}>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/success/page.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { partnerSas } from "@/constants/routes/myPages"
 
-import CheckCircle from "@/components/Icons/CheckCircle"
 import { Redirect } from "@/components/Redirect"
 import { getIntl } from "@/i18n"
 
@@ -20,7 +20,11 @@ export default async function SASxScandicLinkPage({
   return (
     <SASModal>
       <Redirect url={partnerSas[params.lang]} timeout={3000} />
-      <CheckCircle height={64} width={64} color="uiSemanticSuccess" />
+      <MaterialIcon
+        icon="check_circle"
+        size={64}
+        color="Icon/Feedback/Success"
+      />
       <Typography variant="Title/Subtitle/lg">
         <h1>{intl.formatMessage({ id: "Your accounts are linked" })}</h1>
       </Typography>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx

@@ -6,11 +6,11 @@ import { useParams, useRouter } from "next/navigation"
 import { type ReactNode, useState, useTransition } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { trpc } from "@/lib/trpc/client"
 
-import ErrorCircleFilledIcon from "@/components/Icons/ErrorCircleFilled"
 import Link from "@/components/TempDesignSystem/Link"
 
 import { GenericError } from "../components/GenericError"
@@ -170,7 +170,12 @@ export default function OneTimePasswordForm({
       />
       {errorMessage && (
         <div className={styles["error-message"]}>
-          <ErrorCircleFilledIcon height={20} width={20} color="red" />
+          <MaterialIcon
+            icon="cancel"
+            isFilled
+            size={20}
+            color="Icon/Feedback/Error"
+          />
           <Typography variant="Body/Supporting text (caption)/smRegular">
             <p style={{ color: "var(--Scandic-Red-60)" }}>{errorMessage}</p>
           </Typography>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx

@@ -1,13 +1,13 @@
 import Link from "next/link"
 import React, { Suspense } from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { hotelreservation } from "@/constants/routes/hotelReservation"
 import { partnerSas } from "@/constants/routes/myPages"
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
-import { CalendarAddIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Button from "@/components/TempDesignSystem/Button"
@@ -129,7 +129,11 @@ async function TransactionCard({
             {/* TODO correct link */}
             <Link href={hotelreservation(lang)} color="none">
               {intl.formatMessage({ id: "Book now" })}{" "}
-              <CalendarAddIcon width={20} height={20} color="currentColor" />
+              <MaterialIcon
+                icon="calendar_add_on"
+                size={20}
+                color="CurrentColor"
+              />
             </Link>
           </Button>
         </div>

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/unlink/success/page.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { overview } from "@/constants/routes/myPages"
 
-import CheckCircle from "@/components/Icons/CheckCircle"
 import { Redirect } from "@/components/Redirect"
 import { getIntl } from "@/i18n"
 
@@ -20,7 +20,11 @@ export default async function SASxScandicUnlinkSuccessPage({
   return (
     <SASModal>
       <Redirect url={overview[params.lang]} timeout={3000} />
-      <CheckCircle height={64} width={64} color="uiSemanticSuccess" />
+      <MaterialIcon
+        icon="check_circle"
+        size={64}
+        color="Icon/Feedback/Success"
+      />
       <Typography variant="Title/Subtitle/lg">
         <h1>{intl.formatMessage({ id: "Your accounts are now unlinked" })}</h1>
       </Typography>

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
-import { OpenInNewSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -53,7 +54,7 @@ export default function JobylonCard({ job }: JobylonCardProps) {
         >
           <a href={job.url} target="_blank" rel="noopener noreferrer">
             {intl.formatMessage({ id: "View & apply" })}
-            <OpenInNewSmallIcon />
+            <MaterialIcon icon="open_in_new" size={20} />
           </a>
         </Button>
       </div>

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,6 +1,7 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { serverClient } from "@/lib/trpc/server"
 
-import { CheckIcon } from "@/components/Icons"
 import MembershipLevelIcon from "@/components/Levels/Icon"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -84,9 +85,10 @@ async function LevelCard({ level }: LevelCardProps) {
             textAlign="center"
             color="textMediumContrast"
           >
-            <CheckIcon
+            <MaterialIcon
+              icon="check"
               className={styles.checkIcon}
-              color="primaryLightOnSurfaceAccent"
+              color="Icon/Interactive/Accent"
             />
             {reward.label}
           </Caption>

apps/scandic-web/components/Blocks/DynamicContent/Overview/Buttons/CopyButton.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import CopyIcon from "@/components/Icons/Copy"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
@@ -33,7 +34,7 @@ export default function CopyButton({ membershipNumber }: CopyButtonProps) {
       size="small"
       intent="tertiary"
     >
-      <CopyIcon color="pale" />
+      <MaterialIcon icon="content_copy" color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx

@@ -1,6 +1,6 @@
 import { Minus } from "react-feather"
 
-import CheckCircle from "@/components/Icons/CheckCircle"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 
 import styles from "./rewardValue.module.css"
 
@@ -11,7 +11,13 @@ export default function RewardValue({ reward }: RewardValueProps) {
     return <Minus color="var(--UI-Grey-40)" />
   }
   if (!reward.value) {
-    return <CheckCircle height={32} width={32} color="green" />
+    return (
+      <MaterialIcon
+        icon="check_circle"
+        size={32}
+        color="Icon/Feedback/Success"
+      />
+    )
   }
   return (
     <div className={styles.rewardValueContainer}>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx

@@ -3,7 +3,8 @@
 import { motion } from "framer-motion"
 import { useIntl } from "react-intl"
 
-import { CheckCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./redeem.module.css"
@@ -23,7 +24,7 @@ export default function ActiveRedeemedBadge() {
           ease: "easeInOut",
         }}
       >
-        <CheckCircleIcon color="uiSemanticSuccess" />
+        <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
       </motion.div>
       <Caption>{intl.formatMessage({ id: "Active" })}</Caption>
     </div>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import CopyIcon from "@/components/Icons/Copy"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -51,7 +52,7 @@ export default function Campaign({ reward }: { reward: Campaign }) {
           theme="base"
           intent="primary"
         >
-          <CopyIcon color="pale" />
+          <MaterialIcon icon="content_copy" color="CurrentColor" />
           {intl.formatMessage({ id: "Copy promotion code" })}
         </Button>
       </footer>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx

@@ -2,10 +2,11 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
 import Countdown from "@/components/Countdown"
-import { CheckCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import useRedeemFlow from "./useRedeemFlow"
@@ -20,7 +21,7 @@ export default function TimedRedeemedBadge() {
   return (
     <>
       <div className={styles.redeemed}>
-        <CheckCircleIcon color="uiSemanticSuccess" />
+        <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
         <Caption>
           {intl.formatMessage({
             id: "Redeemed & valid through:",

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx

@@ -10,9 +10,10 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { trpc } from "@/lib/trpc/client"
 
-import { CloseLargeIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
@@ -117,7 +118,7 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
                         type="button"
                         className={styles.modalClose}
                       >
-                        <CloseLargeIcon />
+                        <MaterialIcon icon="close" />
                       </button>
                     </header>
 

apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts

@@ -1,11 +1,13 @@
+import { type IconProps } from "@scandic-hotels/design-system/Icons"
+
 import { REWARD_IDS } from "@/constants/rewards"
 
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { IconName } from "@/components/Icons/iconName"
+import { IllustrationByIconName } from "@/components/Icons/IllustrationByIconName"
 import { isValidRewardId } from "@/utils/rewards"
 
 import type { FC } from "react"
 
-import { IconName, type IconProps } from "@/types/components/icon"
 import type { RewardId } from "@/types/components/myPages/rewards"
 
 function getIconForRewardId(rewardId: RewardId): IconName {
@@ -61,9 +63,9 @@ function getIconForRewardId(rewardId: RewardId): IconName {
 export function mapRewardToIcon(rewardId: string): FC<IconProps> | null {
   if (!isValidRewardId(rewardId)) {
     // TODO: Update once UX has decided on fallback icon.
-    return getIconByIconName(IconName.GiftOpen)
+    return IllustrationByIconName(IconName.GiftOpen)
   }
 
   const iconName = getIconForRewardId(rewardId)
-  return getIconByIconName(iconName)
+  return IllustrationByIconName(iconName)
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/index.tsx

@@ -11,7 +11,7 @@ const sizeMap = {
 
 export function RewardIcon({
   rewardId,
-  size = "medium",
+  iconSize = "medium",
   ...props
 }: RewardIconProps) {
   const IconComponent = mapRewardToIcon(rewardId)
@@ -20,8 +20,8 @@ export function RewardIcon({
   return (
     <IconComponent
       {...props}
-      width={sizeMap[size].width}
-      height={sizeMap[size].height}
+      width={sizeMap[iconSize].width}
+      height={sizeMap[iconSize].height}
     />
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx

@@ -3,8 +3,9 @@
 import { useParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Dialog from "@/components/Dialog"
-import { ChevronRightSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
 import type { LangParams } from "@/types/params"
@@ -27,7 +28,7 @@ export function UnlinkSAS() {
       trigger={
         <Button intent="text" theme="base">
           {intl.formatMessage({ id: "Unlink accounts" })}
-          <ChevronRightSmallIcon color="burgundy" />
+          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
         </Button>
       }
     />

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx

@@ -1,13 +1,16 @@
 import { cx } from "class-variance-authority"
 import { type ReactNode, Suspense } from "react"
 
+import {
+  DiamondAddIcon,
+  MaterialIcon,
+} from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels"
 import { env } from "@/env/server"
 import { getProfile } from "@/lib/trpc/memoizedRequests"
 
-import { DiamondIcon, InfoCircleIcon, LinkIcon } from "@/components/Icons"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
@@ -56,7 +59,7 @@ export default async function SASLinkedAccount({
       <div className={styles.mutationSection}>
         <Typography variant="Body/Supporting text (caption)/smRegular">
           <p className={styles.caption}>
-            <InfoCircleIcon height={20} width={20} />
+            <MaterialIcon icon="info" size={20} />
             {intl.formatMessage({
               id: "Changes in tier match can take up to 24 hours to be displayed.",
             })}
@@ -207,13 +210,9 @@ async function TierMatchMessage({
   }
 
   const iconMap: Record<MatchState, ReactNode> = {
-    boostedBySAS: (
-      <DiamondIcon height={20} width={20} color="uiTextMediumContrast" />
-    ),
-    boostedByScandic: (
-      <DiamondIcon height={20} width={20} color="uiTextMediumContrast" />
-    ),
-    noBoost: <LinkIcon height={20} width={20} color="uiTextMediumContrast" />,
+    boostedBySAS: <DiamondAddIcon size={20} />,
+    boostedByScandic: <DiamondAddIcon size={20} />,
+    noBoost: <MaterialIcon icon="link" size={20} />,
   }
 
   return (

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsForm.tsx

@@ -1,9 +1,8 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
-import ArrowFromIcon from "@/components/Icons/ArrowFrom"
-import ArrowToIcon from "@/components/Icons/ArrowTo"
 import Image from "@/components/Image"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import { getIntl } from "@/i18n"
@@ -77,7 +76,7 @@ async function TransferPointsFormContent({
                 <Typography variant="Tag/sm">
                   <p>{intl.formatMessage({ id: "Transfer from" })}</p>
                 </Typography>
-                <ArrowFromIcon />
+                <MaterialIcon icon="upload" />
               </div>
               <Typography variant="Title/Subtitle/md">
                 <p>{intl.formatMessage({ id: "SAS EuroBonus" })}</p>
@@ -117,7 +116,7 @@ async function TransferPointsFormContent({
           <div className={styles.transferTo}>
             <div>
               <div className={styles.labelWithIcon}>
-                <ArrowToIcon />
+                <MaterialIcon icon="download" />
                 <Typography variant="Tag/sm">
                   <p>{intl.formatMessage({ id: "Transfer to" })}</p>
                 </Typography>

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx

@@ -15,10 +15,10 @@ import {
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { SAS_TRANSFER_POINT_KEY } from "@/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/sasUtils"
-import SwipeIcon from "@/components/Icons/Swipe"
 import Image from "@/components/Image"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
@@ -77,7 +77,7 @@ export function TransferPointsFormClient({
             <SliderFill />
             <SliderThumb className={styles.sliderThumb}>
               <SliderOutput className={styles.sliderOutput} />
-              <SwipeIcon color="white" />
+              <MaterialIcon icon="swipe" color="Icon/Inverted" />
             </SliderThumb>
           </SliderTrack>
         </Slider>

apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { ChevronDownIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./button.module.css"
@@ -24,7 +25,11 @@ export default function ShowMoreButton({
         theme="base"
         intent="text"
       >
-        <ChevronDownIcon width={20} height={20} />
+        <MaterialIcon
+          icon="keyboard_arrow_down"
+          size={20}
+          color="CurrentColor"
+        />
         {intl.formatMessage({ id: "Show more" })}
       </Button>
     </div>

apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -1,7 +1,8 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
 
-import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
@@ -33,7 +34,7 @@ export default async function EmptyUpcomingStaysBlock() {
         color="peach80"
       >
         {intl.formatMessage({ id: "Get inspired" })}
-        <ArrowRightIcon color="peach80" />
+        <MaterialIcon icon="arrow_forward" color="CurrentColor" />
       </Link>
     </section>
   )

apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx

@@ -2,9 +2,10 @@
 
 import { useState } from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
-import { CalendarIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Link from "@/components/TempDesignSystem/Link"
@@ -51,7 +52,10 @@ export default function StayCard({ stay }: StayCardProps) {
             {hotelInformation.hotelName}
           </Title>
           <div className={styles.date}>
-            <CalendarIcon color="burgundy" height={24} width={24} />
+            <MaterialIcon
+              icon="calendar_month"
+              color="Icon/Interactive/Default"
+            />
             <Caption asChild>
               <time dateTime={arrivalDateTime}>{arrivalDate}</time>
             </Caption>

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -1,7 +1,8 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
 
-import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
@@ -33,7 +34,8 @@ export default async function EmptyUpcomingStaysBlock() {
         color="peach80"
       >
         {intl.formatMessage({ id: "Get inspired" })}
-        <ArrowRightIcon color="peach80" />
+
+        <MaterialIcon color="CurrentColor" icon="arrow_forward" />
       </Link>
     </section>
   )

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -1,4 +1,5 @@
-import HotelLogo from "@/components/Icons/Logos"
+import { HotelLogo } from "@scandic-hotels/design-system/Icons"
+
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"

apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx

@@ -1,5 +1,6 @@
+import { SurpriseIcon } from "@scandic-hotels/design-system/Icons"
+
 import { auth } from "@/auth"
-import { SurpriseIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"

apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx

@@ -1,4 +1,5 @@
-import { ArrowRightIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
@@ -23,7 +24,7 @@ export default function ShortcutsListItems({
             <Body textTransform="bold" color="burgundy">
               <span>{shortcut.text || shortcut.title}</span>
             </Body>
-            <ArrowRightIcon color="burgundy" width={24} height={24} />
+            <MaterialIcon color="CurrentColor" icon="arrow_forward" />
           </Link>
         </li>
       ))}

apps/scandic-web/components/Blocks/UspGrid/index.tsx

@@ -1,4 +1,4 @@
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { IconByIconName } from "@/components/Icons/IconByIconName"
 import JsonToHtml from "@/components/JsonToHtml"
 
 import { renderOptions } from "./renderOptions"
@@ -10,8 +10,9 @@ import type { UspGridProps, UspIcon } from "@/types/components/blocks/uspGrid"
 
 function UspIcon({ icon }: { icon: UspIcon }) {
   const iconName = getUspIconName(icon)
-  const Icon = iconName ? getIconByIconName(iconName) : null
-  return Icon ? <Icon color="red" /> : null
+  return iconName ? (
+    <IconByIconName iconName={iconName} color="Icon/Interactive/Accent" />
+  ) : null
 }
 
 export default function UspGrid({ usp_grid }: UspGridProps) {

apps/scandic-web/components/Blocks/UspGrid/utils.ts

@@ -1,5 +1,6 @@
+import { IconName } from "@/components/Icons/iconName"
+
 import type { UspIcon } from "@/types/components/blocks/uspGrid"
-import { IconName } from "@/types/components/icon"
 
 export function getUspIconName(icon?: UspIcon | null) {
   switch (icon) {

apps/scandic-web/components/BookingWidget/Client.tsx

@@ -4,6 +4,8 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { use, useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { REDEMPTION } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 import { trpc } from "@/lib/trpc/client"
@@ -13,7 +15,6 @@ import Form, {
   BookingWidgetFormSkeleton,
 } from "@/components/Forms/BookingWidget"
 import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
-import { CloseLargeIcon } from "@/components/Icons"
 import useLang from "@/hooks/useLang"
 import useStickyPosition from "@/hooks/useStickyPosition"
 import { debounce } from "@/utils/debounce"
@@ -211,7 +212,7 @@ export default function BookingWidgetClient({
             onClick={closeMobileSearch}
             type="button"
           >
-            <CloseLargeIcon />
+            <MaterialIcon icon="close" />
           </button>
           <Form locations={locations} type={type} onClose={closeMobileSearch} />
         </div>

apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx

@@ -3,9 +3,10 @@
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
-import { EditIcon, SearchIcon } from "@/components/Icons"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -115,7 +116,7 @@ export default function MobileToggleButton({
             </Body>
           </div>
           <div className={styles.icon}>
-            <SearchIcon color="white" />
+            <MaterialIcon icon="search" color="Icon/Inverted" />
           </div>
         </>
       )}
@@ -139,7 +140,7 @@ export default function MobileToggleButton({
             </Caption>
           </div>
           <div className={styles.icon}>
-            <EditIcon color="white" />
+            <MaterialIcon icon="edit_square" color="Icon/Inverted" />
           </div>
         </>
       )}
@@ -169,7 +170,7 @@ export function MobileToggleButtonSkeleton() {
         <SkeletonShimmer height="24px" />
       </div>
       <div className={styles.icon}>
-        <SearchIcon color="white" />
+        <MaterialIcon icon="search" color="Icon/Inverted" />
       </div>
     </div>
   )

apps/scandic-web/components/Carousel/CarouselNavigation.tsx

@@ -3,7 +3,7 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
-import { ArrowRightIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 
 import { useCarousel } from "./CarouselContext"
 
@@ -25,7 +25,7 @@ export function CarouselPrevious({ className, ...props }: CarouselButtonProps) {
       aria-label={intl.formatMessage({ id: "Previous slide" })}
       {...props}
     >
-      <ArrowRightIcon color="burgundy" className={styles.prevIcon} />
+      <MaterialIcon color="Icon/Interactive/Default" icon="arrow_back" />
     </button>
   )
 }
@@ -44,7 +44,7 @@ export function CarouselNext({ className, ...props }: CarouselButtonProps) {
       aria-label={intl.formatMessage({ id: "Next slide" })}
       {...props}
     >
-      <ArrowRightIcon color="burgundy" />
+      <MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
     </button>
   )
 }

apps/scandic-web/components/Carousel/carousel.module.css

@@ -41,10 +41,6 @@
   right: -20px;
 }
 
-.prevIcon {
-  transform: rotate(180deg);
-}
-
 .dots {
   display: flex;
   justify-content: center;

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx

@@ -4,11 +4,11 @@ import Link from "next/link"
 import { useCallback, useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { HotelLogo, TripadvisorIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
-import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import { TripAdvisorIcon } from "@/components/Icons"
-import HotelLogo from "@/components/Icons/Logos"
+import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -76,7 +76,7 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
         />
         {hotel.ratings?.tripAdvisor.rating && (
           <div className={styles.tripAdvisor}>
-            <TripAdvisorIcon color="burgundy" />
+            <TripadvisorIcon color="Icon/Interactive/Default" />
             <Caption color="burgundy">
               {hotel.ratings.tripAdvisor.rating}
             </Caption>
@@ -110,12 +110,12 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
         </div>
         <ul className={styles.amenityList}>
           {amenities.map((amenity) => {
-            const IconComponent = mapFacilityToIcon(amenity.id)
+            const Icon = (
+              <FacilityToIcon id={amenity.id} color="Icon/Default" size={20} />
+            )
             return (
               <li className={styles.amenityItem} key={amenity.id}>
-                {IconComponent && (
-                  <IconComponent color="grey80" width={20} height={20} />
-                )}
+                {Icon && Icon}
                 <span className={styles.amenityName}>{amenity.name}</span>
               </li>
             )

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/index.tsx

@@ -1,4 +1,5 @@
-import { ArrowRightIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -50,7 +51,7 @@ export default async function Destination({
               },
               { country: country }
             )}
-            <ArrowRightIcon color="burgundy" />
+            <MaterialIcon icon="arrow_forward" color="CurrentColor" />
           </Link>
         )}
       </div>

apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/index.tsx

@@ -21,7 +21,7 @@ export default function ExperienceList({ experiences }: ExperienceListProps) {
       {experienceList.map(({ Icon, name }) => (
         <li key={name}>
           <Chip variant="tag">
-            <Icon width={20} height={20} />
+            <Icon size={20} />
             {name}
           </Chip>
         </li>

apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/utils.ts

@@ -1,58 +0,0 @@
-import {
-  BikeIcon,
-  CityIcon,
-  FamilyIcon,
-  KayakingIcon,
-  MuseumIcon,
-  NightlifeIcon,
-  StarFilledIcon,
-} from "@/components/Icons"
-
-import type { FC } from "react"
-import type { IntlShape } from "react-intl"
-
-import type { IconProps } from "@/types/components/icon"
-
-export function mapExperiencesToListData(
-  experiences: string[],
-  intl: IntlShape
-): { Icon: FC<IconProps>; name: string }[] {
-  return experiences.map((experience) => {
-    switch (experience) {
-      case "Hiking":
-        return {
-          Icon: StarFilledIcon,
-          name: intl.formatMessage({ id: "Hiking" }),
-        }
-      case "Kayaking":
-        return {
-          Icon: KayakingIcon,
-          name: intl.formatMessage({ id: "Kayaking" }),
-        }
-      case "Bike friendly":
-        return {
-          Icon: BikeIcon,
-          name: intl.formatMessage({ id: "Bike friendly" }),
-        }
-      case "Museums":
-        return { Icon: MuseumIcon, name: intl.formatMessage({ id: "Museums" }) }
-      case "Family friendly":
-        return {
-          Icon: FamilyIcon,
-          name: intl.formatMessage({ id: "Family friendly" }),
-        }
-      case "City pulse":
-        return {
-          Icon: CityIcon,
-          name: intl.formatMessage({ id: "City pulse" }),
-        }
-      case "Nightlife":
-        return {
-          Icon: NightlifeIcon,
-          name: intl.formatMessage({ id: "Nightlife" }),
-        }
-      default:
-        return { Icon: StarFilledIcon, name: experience }
-    }
-  })
-}

apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/utils.tsx

@@ -0,0 +1,73 @@
+import {
+  MaterialIcon,
+  type MaterialIconSetIconProps,
+} from "@scandic-hotels/design-system/Icons"
+
+import type { FC } from "react"
+import type { IntlShape } from "react-intl"
+
+export function mapExperiencesToListData(
+  experiences: string[],
+  intl: IntlShape
+): { Icon: FC<MaterialIconSetIconProps>; name: string }[] {
+  return experiences.map((experience) => {
+    switch (experience) {
+      case "Hiking":
+        return {
+          Icon: (props: MaterialIconSetIconProps) => (
+            <MaterialIcon icon="hiking" {...props} />
+          ),
+          name: intl.formatMessage({ id: "Hiking" }),
+        }
+      case "Kayaking":
+        return {
+          Icon: (props: MaterialIconSetIconProps) => (
+            <MaterialIcon icon="kayaking" {...props} />
+          ),
+          name: intl.formatMessage({ id: "Kayaking" }),
+        }
+      case "Bike friendly":
+        return {
+          Icon: (props: MaterialIconSetIconProps) => (
+            <MaterialIcon icon="pedal_bike" {...props} />
+          ),
+          name: intl.formatMessage({ id: "Bike friendly" }),
+        }
+      case "Museums":
+        return {
+          Icon: (props: MaterialIconSetIconProps) => (
+            <MaterialIcon icon="museum" {...props} />
+          ),
+          name: intl.formatMessage({ id: "Museums" }),
+        }
+      case "Family friendly":
+        return {
+          Icon: (props: MaterialIconSetIconProps) => (
+            <MaterialIcon icon="family_restroom" {...props} />
+          ),
+          name: intl.formatMessage({ id: "Family friendly" }),
+        }
+      case "City pulse":
+        return {
+          Icon: (props: MaterialIconSetIconProps) => (
+            <MaterialIcon icon="location_city" {...props} />
+          ),
+          name: intl.formatMessage({ id: "City pulse" }),
+        }
+      case "Nightlife":
+        return {
+          Icon: (props: MaterialIconSetIconProps) => (
+            <MaterialIcon icon="nightlife" {...props} />
+          ),
+          name: intl.formatMessage({ id: "Nightlife" }),
+        }
+      default:
+        return {
+          Icon: (props: MaterialIconSetIconProps) => (
+            <MaterialIcon icon="star" isFilled {...props} />
+          ),
+          name: experience,
+        }
+    }
+  })
+}

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx

@@ -5,11 +5,15 @@ import { useParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
+import {
+  HotelLogo,
+  MaterialIcon,
+  TripadvisorIcon,
+} from "@scandic-hotels/design-system/Icons"
+
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
-import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import { ChevronRightSmallIcon, TripAdvisorIcon } from "@/components/Icons"
-import HotelLogo from "@/components/Icons/Logos"
+import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -59,7 +63,7 @@ export default function HotelListingItem({
         />
         {hotel.ratings?.tripAdvisor.rating && (
           <div className={styles.tripAdvisor}>
-            <TripAdvisorIcon color="burgundy" />
+            <TripadvisorIcon color="Icon/Interactive/Default" />
             <Caption color="burgundy">
               {hotel.ratings.tripAdvisor.rating}
             </Caption>
@@ -92,12 +96,12 @@ export default function HotelListingItem({
         <Body>{hotel.hotelContent.texts.descriptions?.short}</Body>
         <ul className={styles.amenityList}>
           {amenities.map((amenity) => {
-            const IconComponent = mapFacilityToIcon(amenity.id)
+            const Icon = (
+              <FacilityToIcon id={amenity.id} color="Icon/Default" size={20} />
+            )
             return (
               <li className={styles.amenityItem} key={amenity.id}>
-                {IconComponent && (
-                  <IconComponent color="grey80" width={20} height={20} />
-                )}
+                {Icon && Icon}
                 {amenity.name}
               </li>
             )
@@ -111,7 +115,11 @@ export default function HotelListingItem({
               onClick={() => setActiveMarker(hotel.operaId)}
             >
               {intl.formatMessage({ id: "See on map" })}
-              <ChevronRightSmallIcon />
+              <MaterialIcon
+                icon="chevron_right"
+                size={20}
+                color="CurrentColor"
+              />
             </Link>
           </Button>
         )}

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx

@@ -5,10 +5,11 @@ import { useParams } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
-import { MapIcon } from "@/components/Icons"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
@@ -66,7 +67,7 @@ export default function HotelListing() {
               theme="base"
             >
               <Link href={mapUrl}>
-                <MapIcon />
+                <MaterialIcon icon="map" color="CurrentColor" />
                 {intl.formatMessage({ id: "See on map" })}
               </Link>
             </Button>

apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx

@@ -1,4 +1,5 @@
-import { TripAdvisorIcon } from "@/components/Icons"
+import { TripadvisorIcon } from "@scandic-hotels/design-system/Icons"
+
 import Image from "@/components/Image"
 import Chip from "@/components/TempDesignSystem/Chip"
 
@@ -32,7 +33,7 @@ export default function DialogImage({
       )}
       <div className={styles.tripAdvisor}>
         <Chip className={styles.tripAdvisor}>
-          <TripAdvisorIcon color="burgundy" />
+          <TripadvisorIcon color="Icon/Interactive/Default" />
           {ratings}
         </Chip>
       </div>

apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx

@@ -3,14 +3,15 @@ import Link from "next/link"
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
-import CloseLargeIcon from "@/components/Icons/CloseLarge"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
-import { mapFacilityToIcon } from "../../HotelPage/data"
+import { FacilityToIcon } from "../../HotelPage/data"
 import { usePageType } from "../Map/PageTypeProvider"
 import DialogImage from "./DialogImage"
 
@@ -56,7 +57,12 @@ export default function HotelMapCard({
           onClick={handleClose}
           aria-label={intl.formatMessage({ id: "Close" })}
         >
-          <CloseLargeIcon className={styles.closeIcon} width={16} height={16} />
+          <MaterialIcon
+            icon="close"
+            size={16}
+            className={styles.closeIcon}
+            color="CurrentColor"
+          />
         </Button>
         {image ? (
           <DialogImage
@@ -84,12 +90,16 @@ export default function HotelMapCard({
             }
           >
             {amenities.map((facility) => {
-              const IconComponent = mapFacilityToIcon(facility.id)
+              const Icon = (
+                <FacilityToIcon
+                  id={facility.id}
+                  size={16}
+                  color="Icon/Default"
+                />
+              )
               return (
                 <div className={styles.facilitiesItem} key={facility.id}>
-                  {IconComponent && (
-                    <IconComponent width={16} height={16} color="grey80" />
-                  )}
+                  {Icon && Icon}
                   <Footnote
                     className={styles.iconFootnote}
                     color="uiTextMediumContrast"

apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx

@@ -6,10 +6,11 @@ import { Map, type MapProps, useMap } from "@vis.gl/react-google-maps"
 import { type PropsWithChildren, useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
 import ErrorBoundary from "@/components/ErrorBoundary/ErrorBoundary"
-import { CloseLargeIcon, MinusIcon, PlusIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 
@@ -118,7 +119,7 @@ export default function DynamicMap({
             className={styles.closeButton}
             onClick={onClose}
           >
-            <CloseLargeIcon color="burgundy" />
+            <MaterialIcon icon="close" color="CurrentColor" />
             <span>{intl.formatMessage({ id: "Close the map" })}</span>
           </Button>
         )}
@@ -132,7 +133,7 @@ export default function DynamicMap({
             onClick={zoomIn}
             aria-label={intl.formatMessage({ id: "Zoom out" })}
           >
-            <PlusIcon color="burgundy" width={20} height={20} />
+            <MaterialIcon icon="add" color="CurrentColor" size={20} />
           </Button>
           <Button
             theme="base"
@@ -143,7 +144,7 @@ export default function DynamicMap({
             onClick={zoomOut}
             aria-label={intl.formatMessage({ id: "Zoom in" })}
           >
-            <MinusIcon color="burgundy" width={20} height={20} />
+            <MaterialIcon icon="remove" color="CurrentColor" size={20} />
           </Button>
         </div>
       </div>

apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx

@@ -12,11 +12,12 @@ import {
 import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useDestinationDataStore } from "@/stores/destination-data"
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
-import { ChevronLeftSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import { debounce } from "@/utils/debounce"
 
@@ -154,7 +155,11 @@ export default function Map({
                 variant="icon"
                 onClick={handleClose}
               >
-                <ChevronLeftSmallIcon color="baseTextHighcontrast" />
+                <MaterialIcon
+                  icon="chevron_left"
+                  size={20}
+                  color="CurrentColor"
+                />
                 {intl.formatMessage({ id: "Back" })}
               </Button>
               <DestinationFilterAndSort

apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/index.tsx

@@ -3,7 +3,8 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { ChevronRightSmallIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import JsonToHtml from "@/components/JsonToHtml"
 import Button from "@/components/TempDesignSystem/Button"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
@@ -45,7 +46,7 @@ export default function DestinationPageSidepeek({
         wrapping
       >
         {buttonText || intl.formatMessage({ id: "Read more" })}
-        <ChevronRightSmallIcon />
+        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
       </Button>
       <SidePeek
         title={heading}

apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/index.tsx

@@ -5,7 +5,8 @@ import { useParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
-import { MapIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 
 interface MapButtonProps {
@@ -37,7 +38,7 @@ export default function MapButton({ className = "" }: MapButtonProps) {
       asChild
     >
       <Link href={mapUrl} scroll={true}>
-        <MapIcon />
+        <MaterialIcon icon="map" color="CurrentColor" />
         {intl.formatMessage({ id: "See on map" })}
       </Link>
     </Button>

apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -1,7 +1,7 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import { ChevronRightSmallIcon } from "@/components/Icons"
+import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
@@ -23,17 +23,17 @@ export default async function AmenitiesList({
       </Typography>
       <div className={styles.amenityItemList}>
         {facilities.map((facility) => {
-          const IconComponent = mapFacilityToIcon(facility.id)
+          const Icon = (
+            <FacilityToIcon
+              id={facility.id}
+              className={styles.icon}
+              color="Icon/Feedback/Neutral"
+              size={20}
+            />
+          )
           return (
             <div className={styles.amenityItem} key={facility.id}>
-              {IconComponent && (
-                <IconComponent
-                  className={styles.icon}
-                  color="grey80"
-                  width={20}
-                  height={20}
-                />
-              )}
+              {Icon && Icon}
               <Typography
                 variant="Body/Paragraph/mdRegular"
                 className={styles.facility}
@@ -53,7 +53,7 @@ export default async function AmenitiesList({
         className={styles.showAllAmenities}
       >
         {intl.formatMessage({ id: "See all amenities" })}
-        <ChevronRightSmallIcon color="burgundy" />
+        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
       </Link>
     </section>
   )

apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx

@@ -1,6 +1,9 @@
+import {
+  MaterialIcon,
+  TripadvisorIcon,
+} from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { ChevronRightSmallIcon, TripAdvisorIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -54,7 +57,7 @@ export default async function IntroSection({
         </Typography>
         {formattedTripAdvisorText && (
           <span className={styles.tripAdvisorText}>
-            <TripAdvisorIcon />
+            <TripadvisorIcon color="Icon/Interactive/Secondary" />
             {formattedTripAdvisorText}
           </span>
         )}
@@ -72,7 +75,12 @@ export default async function IntroSection({
           scroll={false}
         >
           {intl.formatMessage({ id: "Read more" })}
-          <ChevronRightSmallIcon color="burgundy" />
+          <MaterialIcon
+            icon="chevron_right"
+            size={20}
+            color="CurrentColor"
+            className={styles.introLink}
+          />
         </Link>
       </div>
     </section>

apps/scandic-web/components/ContentType/HotelPage/Map/DynamicMap/index.tsx

@@ -5,7 +5,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import CloseLargeIcon from "@/components/Icons/CloseLarge"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import Button from "@/components/TempDesignSystem/Button"
 import { debounce } from "@/utils/debounce"
@@ -92,7 +93,7 @@ export default function DynamicMap({
       className={styles.closeButton}
       onClick={handleClose}
     >
-      <CloseLargeIcon color="burgundy" />
+      <MaterialIcon icon="close" color="CurrentColor" />
       <span>{intl.formatMessage({ id: "Close the map" })}</span>
     </Button>
   )

apps/scandic-web/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx

@@ -4,9 +4,9 @@ import { useParams, useSearchParams } from "next/navigation"
 import { useEffect, useMemo, useState } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { HouseIcon, MapIcon } from "@/components/Icons"
 import { trackHotelMapClick } from "@/utils/tracking"
 
 import styles from "./mobileToggle.module.css"
@@ -36,10 +36,9 @@ export default function MobileMapToggle() {
       <span
         className={`${styles.iconWrapper} ${!isMapView ? styles.active : ""}`}
       >
-        <HouseIcon
-          color={!isMapView ? "white" : "red"}
-          height={24}
-          width={24}
+        <MaterialIcon
+          icon="home"
+          color={!isMapView ? "Icon/Inverted" : "Icon/Accent"}
         />
         <Typography variant="Body/Supporting text (caption)/smBold">
           <span>{intl.formatMessage({ id: "Hotel" })}</span>
@@ -54,7 +53,10 @@ export default function MobileMapToggle() {
           scroll={true}
           onClick={trackHotelMapClick}
         >
-          <MapIcon color={isMapView ? "white" : "red"} height={24} width={24} />
+          <MaterialIcon
+            icon="map"
+            color={isMapView ? "Icon/Inverted" : "Icon/Interactive/Accent"}
+          />
           <Typography variant="Body/Supporting text (caption)/smBold">
             <span>{intl.formatMessage({ id: "Map" })}</span>
           </Typography>

apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -3,7 +3,8 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
-import { ChevronRightSmallIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -66,7 +67,7 @@ export function RoomCard({ room }: RoomCardProps) {
         <Button intent="text" type="button" size="medium" theme="base" asChild>
           <Link scroll={false} href={`#s-room-${getRoomNameAsParam(name)}`}>
             {intl.formatMessage({ id: "See room details" })}
-            <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
+            <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
           </Link>
         </Button>
       </div>

apps/scandic-web/components/ContentType/HotelPage/Rooms/index.tsx

@@ -62,12 +62,6 @@ export function Rooms({ rooms, preamble }: RoomsProps) {
         <ShowMoreButton
           loadMoreData={handleShowMore}
           showLess={allRoomsVisible}
-          textShowMore={intl.formatMessage({
-            id: "Show more",
-          })}
-          textShowLess={intl.formatMessage({
-            id: "Show less",
-          })}
         />
       ) : null}
     </SectionContainer>

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx

@@ -1,4 +1,8 @@
-import { FacebookIcon, InstagramIcon } from "@/components/Icons"
+import {
+  FacebookIcon,
+  InstagramIcon,
+} from "@scandic-hotels/design-system/Icons"
+
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -81,12 +85,12 @@ export default async function ContactInformation({
           <div className={styles.socialIcons}>
             {socials.instagram && (
               <Link href={socials.instagram}>
-                <InstagramIcon color="burgundy" />
+                <InstagramIcon color="Icon/Interactive/Default" />
               </Link>
             )}
             {socials.facebook && (
               <Link href={socials.facebook}>
-                <FacebookIcon color="burgundy" />
+                <FacebookIcon color="Icon/Interactive/Default" />
               </Link>
             )}
           </div>

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx

@@ -1,4 +1,7 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import ButtonLink from "@/components/ButtonLink"
+import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
@@ -6,7 +9,6 @@ import { getIntl } from "@/i18n"
 import styles from "./accessibilityAmenity.module.css"
 
 import type { AccessibilityAmenityProps } from "@/types/components/hotelPage/sidepeek/accessibility"
-import { IconName } from "@/types/components/icon"
 
 export default async function AccessibilityAmenity({
   elevatorPitch,
@@ -32,6 +34,8 @@ export default async function AccessibilityAmenity({
             appendToCurrentPath
           >
             {intl.formatMessage({ id: "About accessibility" })}
+
+            <MaterialIcon icon="arrow_forward" color="CurrentColor" />
           </ButtonLink>
         )}
       </div>

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx

@@ -1,10 +1,10 @@
+import { IconName } from "@/components/Icons/iconName"
 import OpeningHours from "@/components/OpeningHours"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
 
 import type { BreakfastAmenityProps } from "@/types/components/hotelPage/sidepeek/amenities"
-import { IconName } from "@/types/components/icon"
 import { HotelTypeEnum } from "@/types/enums/hotelType"
 
 export default async function BreakfastAmenity({

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx

@@ -1,9 +1,9 @@
+import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
 
 import type { CheckInAmenityProps } from "@/types/components/hotelPage/sidepeek/checkIn"
-import { IconName } from "@/types/components/icon"
 
 export default async function CheckInAmenity({
   checkInInformation,

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx

@@ -1,4 +1,5 @@
 import ButtonLink from "@/components/ButtonLink"
+import { IconName } from "@/components/Icons/iconName"
 import ParkingInformation from "@/components/ParkingInformation"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import { getIntl } from "@/i18n"
@@ -6,7 +7,6 @@ import { getIntl } from "@/i18n"
 import styles from "./parkingAmenity.module.css"
 
 import type { ParkingAmenityProps } from "@/types/components/hotelPage/sidepeek/parking"
-import { IconName } from "@/types/components/icon"
 
 export default async function ParkingAmenity({
   parking,

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css

@@ -7,4 +7,5 @@
   display: flex;
   gap: var(--Spacing-x1);
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  align-items: center;
 }

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx

@@ -1,7 +1,8 @@
-import { HeartIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import { mapFacilityToIcon } from "../../../data"
+import { FacilityToIcon } from "../../../data"
 
 import styles from "./filteredAmenities.module.css"
 
@@ -13,14 +14,23 @@ export default function FilteredAmenities({
   return (
     <>
       {filteredAmenities?.map((amenity) => {
-        const Icon = mapFacilityToIcon(amenity.id)
+        const Icon = (
+          <FacilityToIcon
+            id={amenity.id}
+            color="Icon/Interactive/Default"
+            size={24}
+          />
+        )
         return (
           <li key={amenity.name} className={styles.wrapper}>
             <div className={styles.amenity}>
               {Icon ? (
-                <Icon color="burgundy" width={24} height={24} />
+                Icon
               ) : (
-                <HeartIcon color="burgundy" width={24} height={24} />
+                <MaterialIcon
+                  icon="favorite"
+                  color="Icon/Interactive/Default"
+                />
               )}
               <Subtitle color="burgundy" type="two">
                 {amenity.name}

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx

@@ -1,7 +1,8 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ButtonLink from "@/components/ButtonLink"
-import { OpenInNewSmallIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import OpeningHours from "@/components/OpeningHours"
 import Link from "@/components/TempDesignSystem/Link"
@@ -85,7 +86,11 @@ export default async function RestaurantBarItem({
                   color="baseTextMediumContrast"
                 >
                   {name}
-                  <OpenInNewSmallIcon />
+                  <MaterialIcon
+                    icon="open_in_new"
+                    size={20}
+                    color="CurrentColor"
+                  />
                 </Link>
               </li>
             ))}

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx

@@ -1,14 +1,15 @@
 import { cx } from "class-variance-authority"
 import Link from "next/link"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { selectRateWithParams } from "@/constants/routes/hotelReservation"
 import { dt } from "@/lib/dt"
 
 import ImageGallery from "@/components/ImageGallery"
-import { getBedIcon } from "@/components/SidePeeks/RoomSidePeek/bedIcon"
-import { getFacilityIcon } from "@/components/SidePeeks/RoomSidePeek/facilityIcon"
+import { getBedIconName } from "@/components/SidePeeks/RoomSidePeek/bedIcon"
+import { FacilityIcon } from "@/components/SidePeeks/RoomSidePeek/facilityIcon"
 import Button from "@/components/TempDesignSystem/Button"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
@@ -97,16 +98,16 @@ export default async function RoomSidePeek({
             {room.roomFacilities
               .sort((a, b) => a.sortOrder - b.sortOrder)
               .map((facility) => {
-                const Icon = getFacilityIcon(facility.icon)
+                const Icon = (
+                  <FacilityIcon
+                    name={facility.icon}
+                    size={24}
+                    color="Icon/Default"
+                  />
+                )
                 return (
                   <li className={styles.listItem} key={facility.name}>
-                    {Icon && (
-                      <Icon
-                        width={24}
-                        height={24}
-                        color="uiTextMediumContrast"
-                      />
-                    )}
+                    {Icon && Icon}
                     <Typography
                       variant="Body/Paragraph/mdRegular"
                       className={cx(styles.iconText, {
@@ -132,20 +133,14 @@ export default async function RoomSidePeek({
           </div>
           <ul className={styles.bedOptions}>
             {room.roomTypes.map((roomType) => {
-              const BedIcon = getBedIcon(roomType.mainBed.type)
+              const bedIcon = getBedIconName(roomType.mainBed.type)
               return (
                 <li className={styles.listItem} key={roomType.code}>
-                  {BedIcon && (
-                    <BedIcon
-                      color="uiTextMediumContrast"
-                      width={24}
-                      height={24}
-                    />
-                  )}
+                  <MaterialIcon color="Icon/Default" icon={bedIcon} />
                   <Typography
                     variant="Body/Paragraph/mdRegular"
                     className={cx(styles.iconText, {
-                      [styles.noIcon]: !BedIcon,
+                      [styles.noIcon]: !bedIcon,
                     })}
                   >
                     <span>{roomType.mainBed.description}</span>

apps/scandic-web/components/ContentType/HotelPage/data.tsx

@@ -1,69 +1,15 @@
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { IconByIconName } from "@/components/Icons/IconByIconName"
+import { IconName } from "@/components/Icons/iconName"
 
-import type { FC } from "react"
+import type {
+  IconProps,
+  MaterialIconSetIconProps,
+  NucleoIconProps,
+} from "@scandic-hotels/design-system/Icons"
 
-import { IconName, type IconProps } from "@/types/components/icon"
 import { FacilityEnum } from "@/types/enums/facilities"
 
 const facilityToIconMap: Record<FacilityEnum, IconName> = {
-  [FacilityEnum.Bar]: IconName.LocalBar,
-  [FacilityEnum.Skybar]: IconName.LocalBar,
-  [FacilityEnum.RooftopBar]: IconName.LocalBar,
-  [FacilityEnum.BikesForLoan]: IconName.Biking,
-  [FacilityEnum.Gym]: IconName.Fitness,
-  [FacilityEnum.GymTrainingFacilities]: IconName.Fitness,
-  [FacilityEnum.KeyAccessOnlyToHealthClubGym]: IconName.Fitness,
-  [FacilityEnum.FreeWiFi]: IconName.Wifi,
-  [FacilityEnum.MeetingArea]: IconName.Business,
-  [FacilityEnum.MeetingRooms]: IconName.Business,
-  [FacilityEnum.MeetingConferenceFacilities]: IconName.Business,
-  [FacilityEnum.PetFriendlyRooms]: IconName.Pets,
-  [FacilityEnum.Sauna]: IconName.Sauna,
-  [FacilityEnum.Restaurant]: IconName.Restaurant,
-  [FacilityEnum.ParkingGarage]: IconName.Garage,
-  [FacilityEnum.ParkingElectricCharging]: IconName.ElectricCar,
-  [FacilityEnum.ParkingFreeParking]: IconName.Parking,
-  [FacilityEnum.ParkingOutdoor]: IconName.Parking,
-  [FacilityEnum.ParkingAdditionalCost]: IconName.Parking,
-  [FacilityEnum.DisabledParking]: IconName.Parking,
-  [FacilityEnum.OutdoorTerrace]: IconName.OutdoorFurniture,
-  [FacilityEnum.RoomService]: IconName.RoomService,
-  [FacilityEnum.LateCheckOutUntil1400Guaranteed]: IconName.Business,
-  [FacilityEnum.LaundryRoom]: IconName.LaundryMachine,
-  [FacilityEnum.LaundryService]: IconName.LaundryMachine,
-  [FacilityEnum.LaundryServiceExpress]: IconName.LaundryMachine,
-  [FacilityEnum.ScandicShop24Hrs]: IconName.ConvenienceStore24h,
-  [FacilityEnum.ServesBreakfastAlwaysIncluded]: IconName.CoffeeAlt,
-  [FacilityEnum.ServesBreakfastNotAlwaysIncluded]: IconName.CoffeeAlt,
-  [FacilityEnum.ServesOrganicBreakfastAlwaysIncluded]: IconName.CoffeeAlt,
-  [FacilityEnum.ServesOrganicBreakfastNotAlwaysIncluded]: IconName.CoffeeAlt,
-  [FacilityEnum.Breakfast]: IconName.CoffeeAlt,
-  [FacilityEnum.EBikesChargingStation]: IconName.ElectricBike,
-  [FacilityEnum.Shopping]: IconName.Shopping,
-  [FacilityEnum.Golf]: IconName.Golf,
-  [FacilityEnum.GolfCourse0To30Km]: IconName.Golf,
-  [FacilityEnum.TVWithChromecast1]: IconName.TvCasting,
-  [FacilityEnum.TVWithChromecast2]: IconName.TvCasting,
-  [FacilityEnum.DJLiveMusic]: IconName.Nightlife,
-  [FacilityEnum.DiscoNightClub]: IconName.Nightlife,
-  [FacilityEnum.CoffeeInReceptionAtCharge]: IconName.CoffeeAlt,
-  [FacilityEnum.CoffeeShop]: IconName.CoffeeAlt,
-  [FacilityEnum.CoffeeTeaFacilities]: IconName.CoffeeAlt,
-  [FacilityEnum.SkateboardsForLoan]: IconName.Skateboarding,
-  [FacilityEnum.KayaksForLoan]: IconName.Kayaking,
-  [FacilityEnum.LifestyleConcierge]: IconName.Concierge,
-  [FacilityEnum.WellnessAndSaunaEntranceFeeAdmission16PlusYears]:
-    IconName.Sauna,
-  [FacilityEnum.WellnessPoolSaunaEntranceFeeAdmission16PlusYears]:
-    IconName.Sauna,
-  [FacilityEnum.Cafe]: IconName.Restaurant,
-  [FacilityEnum.Pool]: IconName.Swim,
-  [FacilityEnum.PoolSwimmingPoolJacuzziAtHotel]: IconName.Swim,
-  [FacilityEnum.VendingMachineWithNecessities]: IconName.Groceries,
-
-  [FacilityEnum.Jacuzzi]: IconName.StarFilled,
-  [FacilityEnum.JacuzziInRoom]: IconName.StarFilled,
-
   [FacilityEnum.AccessibleBathingControls]: IconName.StarFilled,
   [FacilityEnum.AccessibleBathtubs]: IconName.StarFilled,
   [FacilityEnum.AccessibleElevators]: IconName.StarFilled,
@@ -73,10 +19,10 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
   [FacilityEnum.AccessibleToilets]: IconName.StarFilled,
   [FacilityEnum.AccessibleWashBasins]: IconName.StarFilled,
   [FacilityEnum.AdaptedRoomDoors]: IconName.StarFilled,
-  [FacilityEnum.AdjoiningConventionCentre]: IconName.StarFilled,
-  [FacilityEnum.AirConAirCooling]: IconName.StarFilled,
-  [FacilityEnum.AirConditioningInRoom]: IconName.StarFilled,
-  [FacilityEnum.AirportMaxDistance8Km]: IconName.StarFilled,
+  [FacilityEnum.AdjoiningConventionCentre]: IconName.ConventionCentre,
+  [FacilityEnum.AirConAirCooling]: IconName.AirConAirCooling,
+  [FacilityEnum.AirConditioningInRoom]: IconName.AirConditioningInRoom,
+  [FacilityEnum.AirportMaxDistance8Km]: IconName.Airplane,
   [FacilityEnum.AlarmsContinuouslyMonitored]: IconName.StarFilled,
   [FacilityEnum.AlarmsHaveStrobeLightsForDeafHardHearingInAllGuestRooms]:
     IconName.StarFilled,
@@ -92,7 +38,7 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
   [FacilityEnum.AllParkingAreasPatrolled]: IconName.StarFilled,
   [FacilityEnum.AllParkingAreasWellLit]: IconName.StarFilled,
   [FacilityEnum.AllStairsWellsVentilated]: IconName.StarFilled,
-  [FacilityEnum.ArmchairBed]: IconName.StarFilled,
+  [FacilityEnum.ArmchairBed]: IconName.ArmChair,
   [FacilityEnum.AudibleAlarms]: IconName.StarFilled,
   [FacilityEnum.AudibleSmokeAlarmsInAllHalls]: IconName.StarFilled,
   [FacilityEnum.AudibleSmokeAlarmsInAllPublicAreas]: IconName.StarFilled,
@@ -105,41 +51,53 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
   [FacilityEnum.BalconiesAccessibleToAdjoiningRooms]: IconName.StarFilled,
   [FacilityEnum.Ballroom]: IconName.StarFilled,
   [FacilityEnum.Banquet]: IconName.StarFilled,
+  [FacilityEnum.Bar]: IconName.LocalBar,
   [FacilityEnum.BasicMedicalEquipmentOnSite]: IconName.StarFilled,
   [FacilityEnum.BathroomsAdaptedForDisabledGuests]: IconName.StarFilled,
-  [FacilityEnum.Beach]: IconName.StarFilled,
-  [FacilityEnum.Beach0To1Km]: IconName.StarFilled,
-  [FacilityEnum.BeautySalon]: IconName.StarFilled,
+  [FacilityEnum.Beach]: IconName.Beach,
+  [FacilityEnum.Beach0To1Km]: IconName.Beach,
+  [FacilityEnum.BeautySalon]: IconName.BeautySalon,
   [FacilityEnum.BedroomsWithWheelchairAccess]: IconName.StarFilled,
-  [FacilityEnum.Bowling]: IconName.StarFilled,
+  [FacilityEnum.BikesForLoan]: IconName.Bike,
+  [FacilityEnum.Bowling]: IconName.Bowling,
   [FacilityEnum.BrailleLargePrintHotelLiterature]: IconName.StarFilled,
   [FacilityEnum.BrailleLargePrintMenus]: IconName.StarFilled,
-  [FacilityEnum.Business1]: IconName.StarFilled,
-  [FacilityEnum.Business2]: IconName.StarFilled,
-  [FacilityEnum.BusinessCentre]: IconName.StarFilled,
-  [FacilityEnum.CashFree8pmTill6am]: IconName.StarFilled,
-  [FacilityEnum.CashFreeHotel]: IconName.StarFilled,
+  [FacilityEnum.Breakfast]: IconName.Breakfast,
+  [FacilityEnum.Business1]: IconName.BusinessCentre,
+  [FacilityEnum.Business2]: IconName.BusinessCentre,
+  [FacilityEnum.BusinessCentre]: IconName.BusinessCentre,
+  [FacilityEnum.Cafe]: IconName.Restaurant,
+  [FacilityEnum.CashFree8pmTill6am]: IconName.CashFree,
+  [FacilityEnum.CashFreeHotel]: IconName.CashFree,
   [FacilityEnum.ChildrenWelcome]: IconName.StarFilled,
-  [FacilityEnum.City]: IconName.StarFilled,
+  [FacilityEnum.City]: IconName.City,
+  [FacilityEnum.CoffeeInReceptionAtCharge]: IconName.CoffeeInReceptionAtCharge,
+  [FacilityEnum.CoffeeShop]: IconName.CoffeeShop,
+  [FacilityEnum.CoffeeTeaFacilities]: IconName.CoffeeAlt,
   [FacilityEnum.ColourTVInRoomsAllScandicHotels]: IconName.StarFilled,
-  [FacilityEnum.ComplimentaryColdRefreshments]: IconName.StarFilled,
+  [FacilityEnum.ComplimentaryColdRefreshments]:
+    IconName.ComplimentaryColdRefreshments,
   [FacilityEnum.CongressHall]: IconName.StarFilled,
-  [FacilityEnum.ConventionCentre]: IconName.StarFilled,
+  [FacilityEnum.ConventionCentre]: IconName.ConventionCentre,
   [FacilityEnum.Couples]: IconName.StarFilled,
   [FacilityEnum.DeadboltsOnConnectingDoors]: IconName.StarFilled,
   [FacilityEnum.DeadboltsSecondaryLocksOnAllGuestRoomDoors]:
     IconName.StarFilled,
   [FacilityEnum.Defibrillator]: IconName.StarFilled,
-  [FacilityEnum.Desk]: IconName.StarFilled,
-  [FacilityEnum.DirectDialPhoneInRoomsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.Desk]: IconName.Desk,
+  [FacilityEnum.DirectDialPhoneInRoomsAllScandic]: IconName.DirectDial,
   [FacilityEnum.DisabledEmergencyPlan1]: IconName.StarFilled,
   [FacilityEnum.DisabledEmergencyPlan2]: IconName.StarFilled,
+  [FacilityEnum.DisabledParking]: IconName.Wheelchair,
+  [FacilityEnum.DiscoNightClub]: IconName.Nightlife,
+  [FacilityEnum.DJLiveMusic]: IconName.Nightlife,
   [FacilityEnum.DO_NOT_USE_Restaurant]: IconName.StarFilled,
   [FacilityEnum.Downtown]: IconName.StarFilled,
   [FacilityEnum.DrinkableTapWater]: IconName.StarFilled,
   [FacilityEnum.DVDPlayer]: IconName.StarFilled,
+  [FacilityEnum.EBikesChargingStation]: IconName.ElectricBike,
   [FacilityEnum.ElectronicKeyCards]: IconName.StarFilled,
-  [FacilityEnum.Elevator]: IconName.StarFilled,
+  [FacilityEnum.Elevator]: IconName.Elevator,
   [FacilityEnum.EmergencyBackUpGenerators]: IconName.StarFilled,
   [FacilityEnum.EmergencyCallButtonOnPhone]: IconName.StarFilled,
   [FacilityEnum.EmergencyCodesOrButtonsInRooms]: IconName.StarFilled,
@@ -150,14 +108,14 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
   [FacilityEnum.EmergencyLightingAllScandic]: IconName.StarFilled,
   [FacilityEnum.EmergencyLightningInAllPublicAreas]: IconName.StarFilled,
   [FacilityEnum.EmergencyServiceResponseTimeInMinutes]: IconName.StarFilled,
-  [FacilityEnum.Entertainment]: IconName.StarFilled,
+  [FacilityEnum.Entertainment]: IconName.Theatre,
   [FacilityEnum.EventVenue]: IconName.StarFilled,
   [FacilityEnum.ExchangeFacility]: IconName.StarFilled,
   [FacilityEnum.ExitMapsInRooms]: IconName.StarFilled,
   [FacilityEnum.ExitSignsLit]: IconName.StarFilled,
-  [FacilityEnum.ExtraFamilyFriendly]: IconName.StarFilled,
-  [FacilityEnum.Families]: IconName.StarFilled,
-  [FacilityEnum.FaxFacilityInRoom]: IconName.StarFilled,
+  [FacilityEnum.ExtraFamilyFriendly]: IconName.ExtraFamilyFriendly,
+  [FacilityEnum.Families]: IconName.ExtraFamilyFriendly,
+  [FacilityEnum.FaxFacilityInRoom]: IconName.Fax,
   [FacilityEnum.Financial]: IconName.StarFilled,
   [FacilityEnum.FireDetectorsAllScandic]: IconName.StarFilled,
   [FacilityEnum.FireDetectorsInAllHalls]: IconName.StarFilled,
@@ -167,24 +125,29 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
   [FacilityEnum.FireExtinguishersInPublicAreasAllScandic]: IconName.StarFilled,
   [FacilityEnum.FireSafetyAllScandic]: IconName.StarFilled,
   [FacilityEnum.FirstAidAvailable]: IconName.StarFilled,
-  [FacilityEnum.FoodDrinks247]: IconName.StarFilled,
-  [FacilityEnum.GiftShop]: IconName.StarFilled,
+  [FacilityEnum.FoodDrinks247]: IconName.FoodDrinks247,
+  [FacilityEnum.FreeWiFi]: IconName.Wifi,
+  [FacilityEnum.GiftShop]: IconName.Gift,
+  [FacilityEnum.Golf]: IconName.Golf,
+  [FacilityEnum.GolfCourse0To30Km]: IconName.Golf,
   [FacilityEnum.GuestRoomDoorsHaveASecondLock]: IconName.StarFilled,
-  [FacilityEnum.Hairdresser]: IconName.StarFilled,
-  [FacilityEnum.HairdryerInRoomAllScandic]: IconName.StarFilled,
+  [FacilityEnum.Gym]: IconName.Fitness,
+  [FacilityEnum.GymTrainingFacilities]: IconName.Fitness,
+  [FacilityEnum.Hairdresser]: IconName.Hairdresser,
+  [FacilityEnum.HairdryerInRoomAllScandic]: IconName.HairdryerInRoomAllScandic,
   [FacilityEnum.HandicapFacilities]: IconName.StarFilled,
   [FacilityEnum.HandrailsInBathrooms]: IconName.StarFilled,
   [FacilityEnum.HearingInductionLoops]: IconName.StarFilled,
   [FacilityEnum.Highway1]: IconName.StarFilled,
   [FacilityEnum.Highway2]: IconName.StarFilled,
-  [FacilityEnum.Hiking0To3Km]: IconName.StarFilled,
+  [FacilityEnum.Hiking0To3Km]: IconName.Hiking,
   [FacilityEnum.HotelCompliesWithAAASecurityStandards]: IconName.StarFilled,
   [FacilityEnum.HotelIsFollowingScandicsSafetySecurityPolicy]:
     IconName.StarFilled,
   [FacilityEnum.HotelWorksAccordingToScandicsAccessibilityConcepts]:
     IconName.StarFilled,
-  [FacilityEnum.IceMachine]: IconName.StarFilled,
-  [FacilityEnum.IceMachineReception]: IconName.StarFilled,
+  [FacilityEnum.IceMachine]: IconName.IceMachine,
+  [FacilityEnum.IceMachineReception]: IconName.IceMachine,
   [FacilityEnum.IDRequiredToReplaceAGuestRoomKey]: IconName.StarFilled,
   [FacilityEnum.IfNoWhatAreTheHoursUse24ClockEx0000To0600]: IconName.StarFilled,
   [FacilityEnum.InCountry]: IconName.StarFilled,
@@ -192,60 +155,93 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
   [FacilityEnum.InternetHighSpeedInternetConnectionAllScandic]:
     IconName.StarFilled,
   [FacilityEnum.InternetHotSpotsAllScandic]: IconName.StarFilled,
-  [FacilityEnum.IroningRoom]: IconName.StarFilled,
-  [FacilityEnum.IronIroningBoardAllScandic]: IconName.StarFilled,
+  [FacilityEnum.IroningRoom]: IconName.Ironing,
+  [FacilityEnum.IronIroningBoardAllScandic]: IconName.Ironing,
+  [FacilityEnum.Jacuzzi]: IconName.Jacuzzi,
+  [FacilityEnum.JacuzziInRoom]: IconName.Jacuzzi,
+  [FacilityEnum.KayaksForLoan]: IconName.Kayaking,
   [FacilityEnum.KeyAccessOnlySecuredFloorsAvailable]: IconName.StarFilled,
+  [FacilityEnum.KeyAccessOnlyToHealthClubGym]: IconName.Fitness,
   [FacilityEnum.KidsPlayRoom]: IconName.StarFilled,
   [FacilityEnum.KidsUpToAndIncluding12YearsStayForFree]: IconName.StarFilled,
-  [FacilityEnum.KitchenInRoom]: IconName.StarFilled,
+  [FacilityEnum.KitchenInRoom]: IconName.Kitchen,
   [FacilityEnum.Lake0To1Km]: IconName.StarFilled,
   [FacilityEnum.LakeOrSea0To1Km]: IconName.StarFilled,
-  [FacilityEnum.LaptopSafe]: IconName.StarFilled,
+  [FacilityEnum.LaptopSafe]: IconName.LaptopSafe,
+  [FacilityEnum.LateCheckOutUntil1400Guaranteed]: IconName.Business,
+  [FacilityEnum.LaundryRoom]: IconName.LaundryMachine,
+  [FacilityEnum.LaundryService]: IconName.LaundryMachine,
+  [FacilityEnum.LaundryServiceExpress]: IconName.TshirtWash,
   [FacilityEnum.Leisure]: IconName.StarFilled,
-  [FacilityEnum.LuggageLockers]: IconName.StarFilled,
-  [FacilityEnum.LuggageStorageAdditionalCost]: IconName.StarFilled,
-  [FacilityEnum.LuggageStorageNoCost]: IconName.StarFilled,
-  [FacilityEnum.Massage]: IconName.StarFilled,
-  [FacilityEnum.MinibarInRoom]: IconName.StarFilled,
+  [FacilityEnum.LifestyleConcierge]: IconName.Concierge,
+  [FacilityEnum.LuggageLockers]: IconName.LuggageLockers,
+  [FacilityEnum.LuggageStorageAdditionalCost]: IconName.Luggage,
+  [FacilityEnum.LuggageStorageNoCost]: IconName.Luggage,
+  [FacilityEnum.Massage]: IconName.Massage,
+  [FacilityEnum.MeetingArea]: IconName.Business,
+  [FacilityEnum.MeetingConferenceFacilities]: IconName.Business,
+  [FacilityEnum.MeetingRooms]: IconName.Business,
+  [FacilityEnum.MinibarInRoom]: IconName.Minibar,
   [FacilityEnum.MobileLift]: IconName.StarFilled,
   [FacilityEnum.Mountains0To1Km]: IconName.StarFilled,
-  [FacilityEnum.MovieChannelsInRoomAllScandic]: IconName.StarFilled,
+  [FacilityEnum.MovieChannelsInRoomAllScandic]: IconName.TVRemote,
   [FacilityEnum.MultipleExitsOnEachFloor]: IconName.StarFilled,
-  [FacilityEnum.NonSmokingRoomsAllScandic]: IconName.StarFilled,
-  [FacilityEnum.OnSiteTrainingFacilities]: IconName.StarFilled,
+  [FacilityEnum.NonSmokingRoomsAllScandic]: IconName.NonSmoking,
+  [FacilityEnum.OnSiteTrainingFacilities]: IconName.Fitness,
   [FacilityEnum.OtherExplainInBriefDescription]: IconName.StarFilled,
-  [FacilityEnum.OvernightSecurity]: IconName.StarFilled,
+  [FacilityEnum.OutdoorTerrace]: IconName.Deck,
+  [FacilityEnum.OvernightSecurity]: IconName.Guard,
+  [FacilityEnum.ParkingAdditionalCost]: IconName.Parking,
   [FacilityEnum.ParkingAttendant]: IconName.StarFilled,
+  [FacilityEnum.ParkingElectricCharging]: IconName.ElectricCar,
+  [FacilityEnum.ParkingFreeParking]: IconName.Parking,
+  [FacilityEnum.ParkingGarage]: IconName.Garage,
+  [FacilityEnum.ParkingOutdoor]: IconName.ParkingOutdoor,
   [FacilityEnum.PCHookUpInRoom]: IconName.StarFilled,
+  [FacilityEnum.PetFriendlyRooms]: IconName.Pets,
   [FacilityEnum.PillowAlarmsAvailable]: IconName.StarFilled,
-  [FacilityEnum.PlayStationInPlayArea]: IconName.StarFilled,
+  [FacilityEnum.PlayStationInPlayArea]: IconName.Gaming,
+  [FacilityEnum.Pool]: IconName.Swim,
+  [FacilityEnum.PoolSwimmingPoolJacuzziAtHotel]: IconName.Swim,
   [FacilityEnum.PrintingService]: IconName.StarFilled,
   [FacilityEnum.PropertyMeetsRequirementsFireSafety]: IconName.StarFilled,
   [FacilityEnum.PublicAddressSystem]: IconName.StarFilled,
   [FacilityEnum.RelaxationSuite]: IconName.StarFilled,
+  [FacilityEnum.Restaurant]: IconName.Restaurant,
   [FacilityEnum.RestrictedRoomAccessAllScandic]: IconName.StarFilled,
+  [FacilityEnum.RooftopBar]: IconName.Deck,
   [FacilityEnum.RoomsAccessibleFromTheInterior]: IconName.StarFilled,
+  [FacilityEnum.RoomService]: IconName.RoomService,
   [FacilityEnum.RoomWindowsOpen]: IconName.StarFilled,
   [FacilityEnum.RoomWindowsThatOpenHaveLockingDevice]: IconName.StarFilled,
   [FacilityEnum.Rural1]: IconName.StarFilled,
   [FacilityEnum.Rural2]: IconName.StarFilled,
-  [FacilityEnum.SafeDepositBoxInRoomsAllScandic]: IconName.StarFilled,
-  [FacilityEnum.SafeDepositBoxInRoomsCanHoldA17InchLaptop]: IconName.StarFilled,
-  [FacilityEnum.SafeDepositBoxInRoomsCannotHoldALaptop]: IconName.StarFilled,
+  [FacilityEnum.SafeDepositBoxInRoomsAllScandic]: IconName.SafetyBox,
+  [FacilityEnum.SafeDepositBoxInRoomsCanHoldA17InchLaptop]: IconName.SafetyBox,
+  [FacilityEnum.SafeDepositBoxInRoomsCannotHoldALaptop]: IconName.SafetyBox,
   [FacilityEnum.SafetyChainsOnGuestRoomDoor]: IconName.StarFilled,
+  [FacilityEnum.Sauna]: IconName.Sauna,
+  [FacilityEnum.ScandicShop24Hrs]: IconName.ConvenienceStore24h,
   [FacilityEnum.SecondaryLocksOnSlidingGlassDoors]: IconName.StarFilled,
   [FacilityEnum.SecondaryLocksOnWindows]: IconName.StarFilled,
-  [FacilityEnum.Security24Hours]: IconName.StarFilled,
-  [FacilityEnum.SecurityEscortsAvailableOnRequest]: IconName.StarFilled,
-  [FacilityEnum.SecurityPersonnelOnSite]: IconName.StarFilled,
+  [FacilityEnum.Security24Hours]: IconName.Guard,
+  [FacilityEnum.SecurityEscortsAvailableOnRequest]: IconName.Guard,
+  [FacilityEnum.SecurityPersonnelOnSite]: IconName.Guard,
   [FacilityEnum.SeparateFloorsForWomen]: IconName.StarFilled,
+  [FacilityEnum.ServesBreakfastAlwaysIncluded]: IconName.Breakfast,
+  [FacilityEnum.ServesBreakfastNotAlwaysIncluded]: IconName.Breakfast,
+  [FacilityEnum.ServesOrganicBreakfastAlwaysIncluded]: IconName.Breakfast,
+  [FacilityEnum.ServesOrganicBreakfastNotAlwaysIncluded]: IconName.Breakfast,
   [FacilityEnum.ServiceGuideDogsAllowed]: IconName.StarFilled,
-  [FacilityEnum.ServiceSecurity24Hrs]: IconName.StarFilled,
-  [FacilityEnum.Skiing0To1Km]: IconName.StarFilled,
+  [FacilityEnum.ServiceSecurity24Hrs]: IconName.Guard,
+  [FacilityEnum.Shopping]: IconName.Shopping,
+  [FacilityEnum.SkateboardsForLoan]: IconName.Skateboarding,
+  [FacilityEnum.Skiing0To1Km]: IconName.Skiing,
+  [FacilityEnum.Skybar]: IconName.LocalBar,
   [FacilityEnum.SmokeDetectorsAllScandic]: IconName.StarFilled,
   [FacilityEnum.Solarium]: IconName.StarFilled,
   [FacilityEnum.SpecialNeedsMenus]: IconName.StarFilled,
-  [FacilityEnum.Sports]: IconName.StarFilled,
+  [FacilityEnum.Sports]: IconName.Sports,
   [FacilityEnum.SprinklersAllScandic]: IconName.StarFilled,
   [FacilityEnum.SprinklersInAllHalls]: IconName.StarFilled,
   [FacilityEnum.SprinklersInAllPublicAreas]: IconName.StarFilled,
@@ -264,13 +260,16 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
   [FacilityEnum.SwingboltLock]: IconName.StarFilled,
   [FacilityEnum.TeleConferencingFacilitiesAvailable]: IconName.StarFilled,
   [FacilityEnum.TelevisionsWithSubtitlesOrClosedCaptions]: IconName.StarFilled,
-  [FacilityEnum.Tennis1]: IconName.StarFilled,
-  [FacilityEnum.Tennis2]: IconName.StarFilled,
-  [FacilityEnum.TennisPadel]: IconName.StarFilled,
-  [FacilityEnum.Theatre]: IconName.StarFilled,
-  [FacilityEnum.TrouserPress]: IconName.StarFilled,
+  [FacilityEnum.Tennis1]: IconName.Sports,
+  [FacilityEnum.Tennis2]: IconName.Sports,
+  [FacilityEnum.TennisPadel]: IconName.Sports,
+  [FacilityEnum.Theatre]: IconName.Theatre,
+  [FacilityEnum.TrouserPress]: IconName.Ironing,
+  [FacilityEnum.TVWithChromecast1]: IconName.TvCasting,
+  [FacilityEnum.TVWithChromecast2]: IconName.TvCasting,
   [FacilityEnum.UniformSecurityOnPremises]: IconName.StarFilled,
-  [FacilityEnum.UtilityRoomForIroning]: IconName.StarFilled,
+  [FacilityEnum.UtilityRoomForIroning]: IconName.Ironing,
+  [FacilityEnum.VendingMachineWithNecessities]: IconName.Dining,
   [FacilityEnum.VideoSurveillanceInHallways]: IconName.StarFilled,
   [FacilityEnum.VideoSurveillanceInPublicAreas]: IconName.StarFilled,
   [FacilityEnum.VideoSurveillanceMonitored24HrsADay]: IconName.StarFilled,
@@ -278,16 +277,29 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
   [FacilityEnum.VideoSurveillanceOfExteriorFrontEntrance]: IconName.StarFilled,
   [FacilityEnum.VideoSurveillanceRecorded24HrsADayParkingArea]:
     IconName.StarFilled,
-  [FacilityEnum.WallMountedCycleRack]: IconName.StarFilled,
+  [FacilityEnum.WallMountedCycleRack]: IconName.Bike,
   [FacilityEnum.WellLitWalkways]: IconName.StarFilled,
-  [FacilityEnum.WheelchairAccess]: IconName.StarFilled,
+  [FacilityEnum.WellnessAndSaunaEntranceFeeAdmission16PlusYears]: IconName.Spa,
+  [FacilityEnum.WellnessPoolSaunaEntranceFeeAdmission16PlusYears]: IconName.Spa,
+  [FacilityEnum.WheelchairAccess]: IconName.Wheelchair,
   [FacilityEnum.WideCorridors]: IconName.StarFilled,
   [FacilityEnum.WideEntrance]: IconName.StarFilled,
   [FacilityEnum.WideRestaurantEntrance]: IconName.StarFilled,
   [FacilityEnum.WiFiWirelessInternetAccessAllScandic]: IconName.StarFilled,
 }
 
-export function mapFacilityToIcon(id: FacilityEnum): FC<IconProps> | null {
-  const iconName = facilityToIconMap[id]
-  return getIconByIconName(iconName) || null
+interface mapFacilityToIconProps {
+  id: FacilityEnum
+}
+export function FacilityToIcon({
+  id,
+  ...props
+}: mapFacilityToIconProps &
+  (
+    | MaterialIconSetIconProps
+    | NucleoIconProps
+    | IconProps
+  )): JSX.Element | null {
+  const iconName = facilityToIconMap[id]
+  return <IconByIconName iconName={iconName} {...props} />
 }

apps/scandic-web/components/ContentType/HotelSubpage/AdditionalContent/Meetings/index.tsx

@@ -1,6 +1,5 @@
 "use client"
 import { useRef, useState } from "react"
-import { useIntl } from "react-intl"
 
 import Grids from "@/components/TempDesignSystem/Grids"
 import MeetingRoomCard from "@/components/TempDesignSystem/MeetingRoomCard"
@@ -17,7 +16,6 @@ interface MeetingsAdditionalContentProps {
 export default function MeetingsAdditionalContent({
   rooms,
 }: MeetingsAdditionalContentProps) {
-  const intl = useIntl()
   const showToggleButton = rooms.length > 3
   const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
 
@@ -43,12 +41,6 @@ export default function MeetingsAdditionalContent({
         <ShowMoreButton
           loadMoreData={handleShowMore}
           showLess={allRoomsVisible}
-          textShowMore={intl.formatMessage({
-            id: "Show more",
-          })}
-          textShowLess={intl.formatMessage({
-            id: "Show less",
-          })}
         />
       ) : null}
     </div>

apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/index.tsx

@@ -95,6 +95,7 @@ function renderNode(domNode: Node, idx: number) {
         return <br key={domNode.name + idx} />
 
       case NodeNames.a:
+        console.log(domNode.attribs.target)
         return (
           <Link
             key={domNode.name + idx}

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx

@@ -1,6 +1,6 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { OpenInNewSmallIcon } from "@/components/Icons"
 import OpeningHours from "@/components/OpeningHours"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
@@ -66,7 +66,11 @@ export default async function RestaurantSidebar({
                   variant="icon"
                 >
                   {name}
-                  <OpenInNewSmallIcon color="peach80" />
+                  <MaterialIcon
+                    icon="open_in_new"
+                    size={20}
+                    color="CurrentColor"
+                  />
                 </Link>
               </li>
             ))}

apps/scandic-web/components/DatePicker/Range/Desktop.tsx

@@ -4,10 +4,11 @@ import { useState } from "react"
 import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
-import { ChevronLeftIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -88,10 +89,10 @@ export default function DatePickerRangeDesktop({
       components={{
         Chevron(props) {
           return (
-            <ChevronLeftIcon
+            <MaterialIcon
+              icon="chevron_left"
               className={props.className}
-              height={20}
-              width={20}
+              size={20}
             />
           )
         },

apps/scandic-web/components/DatePicker/Range/Mobile.tsx

@@ -2,10 +2,11 @@
 import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
-import { CloseLargeIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -38,7 +39,7 @@ export default function DatePickerRangeMobile({
     <div className={styles.container}>
       <header className={styles.header}>
         <button className={styles.close} onClick={close} type="button">
-          <CloseLargeIcon />
+          <MaterialIcon icon="close" />
         </button>
       </header>
       <DayPicker

apps/scandic-web/components/DatePicker/Single/Desktop.tsx

@@ -4,10 +4,11 @@ import { useState } from "react"
 import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
-import { ChevronLeftIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -89,10 +90,10 @@ export default function DatePickerSingleDesktop({
       components={{
         Chevron(props) {
           return (
-            <ChevronLeftIcon
+            <MaterialIcon
+              icon="chevron_left"
               className={props.className}
-              height={20}
-              width={20}
+              size={20}
             />
           )
         },

apps/scandic-web/components/DatePicker/Single/Mobile.tsx

@@ -2,6 +2,8 @@
 import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 

apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/index.tsx

@@ -2,7 +2,8 @@
 
 import { Checkbox as AriaCheckbox } from "react-aria-components"
 
-import CheckIcon from "@/components/Icons/Check"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import styles from "./checkbox.module.css"
@@ -29,7 +30,7 @@ export default function Checkbox({
       {({ isSelected }) => (
         <>
           <span className={styles.checkbox}>
-            {isSelected && <CheckIcon color="white" />}
+            {isSelected && <MaterialIcon icon="check" color="Icon/Inverted" />}
           </span>
           <Body asChild>
             <span>{name}</span>

apps/scandic-web/components/DestinationFilterAndSort/index.tsx

@@ -10,9 +10,10 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useDestinationDataStore } from "@/stores/destination-data"
 
-import { CloseLargeIcon, FilterIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -114,7 +115,7 @@ export default function DestinationFilterAndSort({
       <DialogTrigger onOpenChange={handleClose}>
         <div className={styles.buttonWrapper}>
           <Button intent="text" theme="base" variant="icon">
-            <FilterIcon color="baseTextHighcontrast" />
+            <MaterialIcon icon="filter_alt" color="CurrentColor" />
             {intl.formatMessage({ id: "Filter and sort" })}
           </Button>
           {activeFilters.length > 0 && (
@@ -145,7 +146,7 @@ export default function DestinationFilterAndSort({
                       type="button"
                       className={styles.close}
                     >
-                      <CloseLargeIcon />
+                      <MaterialIcon icon="close" />
                     </button>
                   </header>
                   <div className={styles.content}>

apps/scandic-web/components/Footer/Details/SocialLink/index.tsx

@@ -1,15 +1,17 @@
 "use client"
 
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { IconByIconName } from "@/components/Icons/IconByIconName"
 import { trackSocialMediaClick } from "@/utils/tracking"
 
 import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
 import type { SocialLinkProps } from "@/types/components/footer/socialLink"
-import type { IconName } from "@/types/components/icon"
+import type { IconName } from "@/components/Icons/iconName"
 
 function SocialIcon({ iconName }: SocialIconsProps) {
-  const SocialIcon = getIconByIconName(iconName as IconName)
-  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
+  const SocialIcon = (
+    <IconByIconName iconName={iconName} color="Icon/Inverted" />
+  )
+  return SocialIcon ? SocialIcon : <span>{iconName}</span>
 }
 
 export default function SocialLink({ link }: SocialLinkProps) {
@@ -23,7 +25,7 @@ export default function SocialLink({ link }: SocialLinkProps) {
       aria-label={title}
       onClick={() => trackSocialMediaClick(title)}
     >
-      <SocialIcon iconName={title} />
+      <SocialIcon iconName={title as IconName} />
     </a>
   )
 }

apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { ArrowRightIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -25,7 +26,10 @@ export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
                 onClick={() => trackFooterClick("main", link.title)}
               >
                 {link.title}
-                <ArrowRightIcon color="peach80" />
+                <MaterialIcon
+                  icon="arrow_forward"
+                  color="Icon/Interactive/Secondary"
+                />
               </Link>
             </Subtitle>
           </li>
@@ -46,7 +50,10 @@ export function FooterMainNavSkeleton() {
             <Subtitle color="baseTextHighContrast" type="two" asChild>
               <span className={styles.mainNavigationLink}>
                 <SkeletonShimmer width="80%" />
-                <ArrowRightIcon color="peach80" />
+                <MaterialIcon
+                  icon="arrow_forward"
+                  color="Icon/Interactive/Secondary"
+                />
               </span>
             </Subtitle>
           </li>

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx

@@ -4,9 +4,10 @@ import { type FieldError, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { REDEMPTION } from "@/constants/booking"
 
-import { ErrorCircleIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
@@ -212,7 +213,11 @@ function CodeRulesModal() {
     <Modal
       trigger={
         <Button intent="text">
-          <InfoCircleIcon color="uiTextPlaceholder" height={20} width={20} />
+          <MaterialIcon
+            icon="info"
+            color="Icon/Interactive/Placeholder"
+            size={20}
+          />
         </Button>
       }
       title={codeVoucher}
@@ -257,8 +262,11 @@ function BookingCodeError({ codeError }: { codeError: FieldError }) {
   return (
     <div className={styles.errorContainer}>
       <Caption color={isInvalidErr ? "red" : "blue"} className={styles.error}>
-        <ErrorCircleIcon
-          color={isInvalidErr ? "red" : "blue"}
+        <MaterialIcon
+          icon="error"
+          color={
+            isInvalidErr ? "Icon/Feedback/Information" : "Icon/Feedback/Error"
+          }
           className={styles.errorIcon}
         />
         {intl.formatMessage({ id: codeError.message })}

apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx

@@ -4,9 +4,10 @@ import { useCallback, useEffect, useRef } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { REDEMPTION } from "@/constants/booking"
 
-import { InfoCircleIcon } from "@/components/Icons"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -87,7 +88,12 @@ export default function RewardNight() {
       {redemptionErr && (
         <div className={styles.errorContainer}>
           <Caption className={styles.error} type="regular" color="blue">
-            <InfoCircleIcon color="blue" className={styles.errorIcon} />
+            <MaterialIcon
+              icon="error"
+              size={24}
+              color="Icon/Feedback/Information"
+              className={styles.errorIcon}
+            />
             {intl.formatMessage({ id: redemptionErr.message })}
           </Caption>
           {isMultiRoomError ? <RemoveExtraRooms /> : null}

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx

@@ -1,7 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { DeleteIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { buttonVariants } from "./variants"
@@ -32,7 +33,7 @@ export default function ClearSearchButton({
       tabIndex={0}
       type="button"
     >
-      <DeleteIcon color="burgundy" height={20} width={20} />
+      <MaterialIcon icon="delete" color="Icon/Interactive/Default" size={20} />
       <Caption color="burgundy" type="bold" asChild>
         <span>{intl.formatMessage({ id: "Clear searches" })}</span>
       </Caption>

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx

@@ -3,7 +3,8 @@ import { useEffect, useState } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { ErrorCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -71,7 +72,7 @@ export default function SearchList({
               variant="error"
             >
               <Caption className={styles.heading} color="red">
-                <ErrorCircleIcon color="red" />
+                <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
                 {intl.formatMessage({ id: "Enter destination or hotel" })}
               </Caption>
               <Body>
@@ -89,7 +90,7 @@ export default function SearchList({
               variant="error"
             >
               <Caption className={styles.heading} color="red">
-                <ErrorCircleIcon color="red" />
+                <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
                 {intl.formatMessage({ id: "No results" })}
               </Caption>
               <Body>

apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx

@@ -2,11 +2,12 @@
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
 import DatePicker from "@/components/DatePicker"
 import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
-import { SearchIcon } from "@/components/Icons"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -77,7 +78,7 @@ export default function FormContent({
             type="submit"
           >
             <span className={styles.icon}>
-              <SearchIcon color="white" width={28} height={28} />
+              <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
             </span>
           </Button>
         </div>
@@ -109,7 +110,7 @@ export default function FormContent({
               <span>{intl.formatMessage({ id: "Search" })}</span>
             </Caption>
             <span className={styles.icon}>
-              <SearchIcon color="white" width={28} height={28} />
+              <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
             </span>
           </Button>
         </div>
@@ -163,7 +164,7 @@ export function BookingWidgetFormContentSkeleton() {
             <span>{intl.formatMessage({ id: "Search" })}</span>
           </Caption>
           <span className={styles.icon}>
-            <SearchIcon color="white" width={28} height={28} />
+            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
           </span>
         </Button>
       </div>

apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -3,7 +3,8 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { ErrorCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Select from "@/components/TempDesignSystem/Select"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -120,14 +121,14 @@ export default function ChildInfoSelector({
 
       {roomErrors && roomErrors.message ? (
         <Caption color="red" className={styles.error}>
-          <ErrorCircleIcon color="red" />
+          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
           {roomErrors.message}
         </Caption>
       ) : null}
 
       {ageError || bedError ? (
         <Caption color="red" className={styles.error}>
-          <ErrorCircleIcon color="red" />
+          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
           {errorMessage}
         </Caption>
       ) : null}

apps/scandic-web/components/GuestsRoomsPicker/Counter/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { MinusIcon, PlusIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
@@ -27,7 +28,7 @@ export default function Counter({
         wrapping={true}
         disabled={disableDecrease}
       >
-        <MinusIcon color="burgundy" />
+        <MaterialIcon icon="remove" color="CurrentColor" />
       </Button>
       <Body color="baseTextHighContrast" textAlign="center">
         {count}
@@ -42,7 +43,7 @@ export default function Counter({
         size="small"
         disabled={disableIncrease}
       >
-        <PlusIcon color="burgundy" />
+        <MaterialIcon icon="add" color="CurrentColor" />
       </Button>
     </div>
   )

apps/scandic-web/components/GuestsRoomsPicker/Form.tsx

@@ -4,9 +4,10 @@ import { useCallback, useEffect } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { REDEMPTION } from "@/constants/booking"
 
-import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
 import Button from "../TempDesignSystem/Button"
 import { Tooltip } from "../TempDesignSystem/Tooltip"
 import { GuestsRoom } from "./GuestsRoom"
@@ -83,7 +84,7 @@ export default function GuestsRoomsPickerDialog({
       <section className={styles.contentWrapper}>
         <header className={styles.header}>
           <button type="button" className={styles.close} onClick={onClose}>
-            <CloseLargeIcon />
+            <MaterialIcon icon="close" />
           </button>
         </header>
 
@@ -113,7 +114,7 @@ export default function GuestsRoomsPickerDialog({
                   onPress={handleAddRoom}
                   disabled
                 >
-                  <PlusIcon />
+                  <MaterialIcon icon="add" color="CurrentColor" />
                   {addRoomLabel}
                 </Button>
               </Tooltip>
@@ -129,7 +130,7 @@ export default function GuestsRoomsPickerDialog({
                   fullWidth
                   onPress={handleAddRoom}
                 >
-                  <PlusIcon />
+                  <MaterialIcon icon="add" color="CurrentColor" />
                   {addRoomLabel}
                 </Button>
               </div>
@@ -153,7 +154,7 @@ export default function GuestsRoomsPickerDialog({
                 disabled
                 onPress={handleAddRoom}
               >
-                <PlusCircleIcon />
+                <MaterialIcon icon="add_circle" color="CurrentColor" />
                 {addRoomLabel}
               </Button>
             </Tooltip>
@@ -168,7 +169,7 @@ export default function GuestsRoomsPickerDialog({
                 theme="base"
                 onPress={handleAddRoom}
               >
-                <PlusCircleIcon />
+                <MaterialIcon icon="add_circle" color="CurrentColor" />
                 {addRoomLabel}
               </Button>
             </div>

apps/scandic-web/components/GuestsRoomsPicker/GuestsRoom/index.tsx

@@ -1,6 +1,7 @@
 import { useIntl } from "react-intl"
 
-import { DeleteIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -63,7 +64,7 @@ export function GuestsRoom({
               size="small"
               className={styles.roomActionsButton}
             >
-              <DeleteIcon color="red" />
+              <MaterialIcon icon="delete" color="CurrentColor" />
               <span className={styles.roomActionsLabel}>
                 {intl.formatMessage({ id: "Remove room" })}
               </span>

apps/scandic-web/components/Header/HeaderLink/index.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link"
 
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { IconByIconName } from "@/components/Icons/IconByIconName"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./headerLink.module.css"
@@ -16,12 +16,15 @@ export default function HeaderLink({
   iconSize = 20,
   onClick = () => undefined,
 }: HeaderLinkProps) {
-  const Icon = getIconByIconName(iconName)
   return (
     <Caption type="regular" color="textMediumContrast" asChild>
       <Link href={href} className={styles.headerLink} onClick={onClick}>
-        {Icon ? (
-          <Icon className={styles.icon} width={iconSize} height={iconSize} />
+        {iconName ? (
+          <IconByIconName
+            iconName={iconName}
+            className={styles.icon}
+            size={iconSize}
+          />
         ) : null}
         {children}
       </Link>

apps/scandic-web/components/Header/MainMenu/Avatar/index.tsx

@@ -1,4 +1,5 @@
-import { PersonIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Image from "@/components/Image"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
@@ -8,7 +9,7 @@ import type { AvatarProps } from "@/types/components/header/avatar"
 
 export default function Avatar({ image, initials }: AvatarProps) {
   let classNames = [styles.avatar]
-  let element = <PersonIcon color="white" />
+  let element = <MaterialIcon icon="person" color="Icon/Inverted" />
   if (image) {
     classNames.push(styles.image)
     element = <Image src={image.src} alt={image.alt} width={28} height={28} />

apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx

@@ -2,9 +2,10 @@
 import NextLink from "next/link"
 import { useIntl } from "react-intl"
 
+import { ScandicLogoIcon } from "@scandic-hotels/design-system/Icons"
+
 import useDropdownStore from "@/stores/main-menu"
 
-import { ScandicLogoIcon } from "@/components/Icons"
 import useLang from "@/hooks/useLang"
 
 import styles from "./logoLink.module.css"
@@ -29,7 +30,11 @@ export function LogoLink() {
       onClick={handleNavigate}
       aria-label={intl.formatMessage({ id: "Back to scandichotels.com" })}
     >
-      <ScandicLogoIcon width="103px" height="22px" color="red" />
+      <ScandicLogoIcon
+        width="103px"
+        height="22px"
+        color="Icon/Interactive/Accent"
+      />
     </NextLink>
   )
 }

apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx

@@ -9,6 +9,7 @@ import { customerService } from "@/constants/currentWebHrefs"
 import { findMyBooking } from "@/constants/routes/findMyBooking"
 import useDropdownStore from "@/stores/main-menu"
 
+import { IconName } from "@/components/Icons/iconName"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
@@ -20,7 +21,6 @@ import styles from "./mobileMenu.module.css"
 
 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
-import { IconName } from "@/types/components/icon"
 
 export default function MobileMenu({
   children,

apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -3,9 +3,10 @@
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownSmallIcon } from "@/components/Icons"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useClickOutside from "@/hooks/useClickOutside"
@@ -65,9 +66,11 @@ export default function MyPagesMenu({
             )}
           </span>
         </Body>
-        <ChevronDownSmallIcon
+        <MaterialIcon
+          icon="keyboard_arrow_down"
+          size={20}
           className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
-          color="red"
+          color="Icon/Interactive/Accent"
         />
       </MainMenuButton>
       {isMyPagesMenuOpen ? (
@@ -92,7 +95,12 @@ export function MyPagesMenuSkeleton() {
       <MainMenuButton>
         <Avatar />
         <SkeletonShimmer width="10ch" />
-        <ChevronDownSmallIcon className={`${styles.chevron}`} color="red" />
+        <MaterialIcon
+          icon="keyboard_arrow_down"
+          size={20}
+          className={`${styles.chevron}`}
+          color="Icon/Interactive/Accent"
+        />
       </MainMenuButton>
     </div>
   )

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -3,10 +3,11 @@
 import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { logout } from "@/constants/routes/handleAuth"
 import { trpc } from "@/lib/trpc/client"
 
-import { ArrowRightIcon } from "@/components/Icons"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -100,7 +101,11 @@ function PrimaryLinks({
             className={styles.link}
           >
             {link.text}
-            <ArrowRightIcon className={styles.arrow} color="burgundy" />
+            <MaterialIcon
+              icon="arrow_forward"
+              className={styles.arrow}
+              color="CurrentColor"
+            />
           </Link>
         </li>
       ))}
@@ -130,7 +135,11 @@ function SecondaryLinks({
             className={styles.link}
           >
             {link.text}
-            <ArrowRightIcon className={styles.arrow} color="burgundy" />
+            <MaterialIcon
+              icon="arrow_forward"
+              className={styles.arrow}
+              color="Icon/Interactive/Default"
+            />
           </Link>
         </li>
       ))}

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -2,9 +2,10 @@
 
 import FocusLock from "react-focus-lock"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useDropdownStore from "@/stores/main-menu"
 
-import { ArrowRightIcon, ChevronLeftIcon } from "@/components/Icons"
 import Card from "@/components/TempDesignSystem/Card"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -43,7 +44,11 @@ export default function MegaMenu({
               className={styles.backButton}
               onClick={() => toggleMegaMenu(false)}
             >
-              <ChevronLeftIcon color="red" height={20} width={20} />
+              <MaterialIcon
+                icon="chevron_left"
+                size={20}
+                color="Icon/Interactive/Accent"
+              />
               <Subtitle type="one" color="burgundy" asChild>
                 <span>{title}</span>
               </Subtitle>
@@ -61,7 +66,7 @@ export default function MegaMenu({
                 onClick={handleNavigate}
               >
                 {seeAllLink.title}
-                <ArrowRightIcon color="burgundy" />
+                <MaterialIcon icon="arrow_forward" color="CurrentColor" />
               </Link>
             ) : null}
           </div>
@@ -87,8 +92,9 @@ export default function MegaMenu({
                           onClick={handleNavigate}
                         >
                           {title}
-                          <ArrowRightIcon
-                            color="burgundy"
+                          <MaterialIcon
+                            icon="arrow_forward"
+                            color="Icon/Interactive/Default"
                             className={styles.arrow}
                           />
                         </Link>

apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -2,9 +2,10 @@
 
 import { useRef } from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownSmallIcon, ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
@@ -49,16 +50,18 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
       >
         {title}
         {isMobile ? (
-          <ChevronRightIcon
+          <MaterialIcon
+            icon="chevron_right"
+            size={20}
             className={`${styles.chevron}`}
-            color="red"
-            height={20}
-            width={20}
+            color="Icon/Interactive/Accent"
           />
         ) : (
-          <ChevronDownSmallIcon
+          <MaterialIcon
+            icon="keyboard_arrow_down"
+            size={20}
             className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
-            color="red"
+            color="Icon/Interactive/Accent"
           />
         )}
       </MainMenuButton>

apps/scandic-web/components/Header/TopLink/index.tsx

@@ -1,7 +1,8 @@
+import { IconName } from "@/components/Icons/iconName"
+
 import HeaderLink from "../HeaderLink"
 
 import type { TopLinkProps } from "@/types/components/header/topLink"
-import { IconName } from "@/types/components/icon"
 
 export default function TopLink({
   isLoggedIn,

apps/scandic-web/components/Header/TopMenu/index.tsx

@@ -2,6 +2,7 @@ import { findMyBooking } from "@/constants/routes/findMyBooking"
 import { getHeader } from "@/lib/trpc/memoizedRequests"
 
 import { auth } from "@/auth"
+import { IconName } from "@/components/Icons/iconName"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -14,8 +15,6 @@ import TopLink from "../TopLink"
 
 import styles from "./topMenu.module.css"
 
-import { IconName } from "@/types/components/icon"
-
 export default async function TopMenu() {
   // cached
   const intl = await getIntl()

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx

@@ -1,7 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { CalendarAddIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 
 export default function AddToCalendarButton({
@@ -13,7 +14,7 @@ export default function AddToCalendarButton({
 
   return (
     <Button intent="text" size="small" theme="base" wrapping onPress={onPress}>
-      <CalendarAddIcon />
+      <MaterialIcon icon="calendar_add_on" color="CurrentColor" />
       {intl.formatMessage({ id: "Add to calendar" })}
     </Button>
   )

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx

@@ -2,7 +2,8 @@
 import { useIntl } from "react-intl"
 import { useReactToPrint } from "react-to-print"
 
-import { DownloadIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 
 import type { DownloadInvoiceProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice"
@@ -24,7 +25,7 @@ export default function DownloadInvoice({ mainRef }: DownloadInvoiceProps) {
       variant="icon"
       wrapping
     >
-      <DownloadIcon />
+      <MaterialIcon icon="download" color="CurrentColor" />
       {intl.formatMessage({ id: "Download invoice" })}
     </Button>
   )

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx

@@ -1,7 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { EditIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 
@@ -20,7 +21,7 @@ export default function ManageBooking({ bookingUrl }: ManageBookingProps) {
       wrapping
     >
       <Link color="none" href={bookingUrl} weight="bold">
-        <EditIcon />
+        <MaterialIcon icon="edit_square" color="CurrentColor" />
         {intl.formatMessage({ id: "Manage booking" })}
       </Link>
     </Button>

apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx

@@ -2,11 +2,11 @@
 import React from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
-import { PriceTagIcon } from "@/components/Icons"
-import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -106,7 +106,7 @@ export default function PriceDetailsModal() {
           <Caption color="burgundy">
             {intl.formatMessage({ id: "Price details" })}
           </Caption>
-          <ChevronRightSmallIcon color="burgundy" height="20px" width="20px" />
+          <MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
         </Button>
       }
     >
@@ -220,7 +220,7 @@ export default function PriceDetailsModal() {
           {bookingCode && (
             <tr className={styles.row}>
               <td>
-                <PriceTagIcon />
+                <MaterialIcon icon="sell" />
                 {bookingCode}
               </td>
               <td></td>