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/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>

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx

@@ -2,10 +2,11 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { CancellationRuleEnum, ChildBedTypeEnum } from "@/constants/booking"
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
-import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
@@ -77,7 +78,7 @@ export default function ReceiptRoom({
                 variant="icon"
               >
                 {intl.formatMessage({ id: "Reservation policy" })}
-                <InfoCircleIcon color="peach80" />
+                <MaterialIcon icon="info" color="CurrentColor" />
               </Link>
             </Button>
           }
@@ -96,12 +97,12 @@ export default function ReceiptRoom({
                 color="uiTextHighContrast"
                 className={styles.termsText}
               >
-                <CheckIcon
-                  color="uiSemanticSuccess"
-                  width={20}
-                  height={20}
+                <MaterialIcon
+                  icon="check"
+                  color="Icon/Feedback/Success"
+                  size={20}
                   className={styles.termsIcon}
-                ></CheckIcon>
+                />
                 {info}
               </Body>
             ))}

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx

@@ -2,16 +2,12 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { CancellationRuleEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 
-import {
-  CheckCircleIcon,
-  ChevronRightSmallIcon,
-  CrossCircle,
-} from "@/components/Icons"
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -42,14 +38,22 @@ export default function Room({ booking, img, roomName }: RoomProps) {
         <div className={styles.benefits}>
           {booking.rateDefinition.isMemberRate ? (
             <>
-              <CheckCircleIcon color="green" height={20} width={20} />
+              <MaterialIcon
+                color="Icon/Feedback/Success"
+                icon="check_circle"
+                size={20}
+              />
               <Caption>
                 {intl.formatMessage({ id: "Membership benefits applied" })}
               </Caption>
             </>
           ) : (
             <>
-              <CrossCircle color="red" height={20} width={20} />
+              <MaterialIcon
+                color="Icon/Interactive/Accent"
+                icon="cancel"
+                size={20}
+              />
               <Caption>
                 {intl.formatMessage({ id: "No membership benefits applied" })}
               </Caption>
@@ -58,7 +62,11 @@ export default function Room({ booking, img, roomName }: RoomProps) {
         </div>
         {booking.guaranteeInfo && (
           <div className={styles.benefits}>
-            <CheckCircleIcon color="green" height={20} width={20} />
+            <MaterialIcon
+              icon="check"
+              color="Icon/Feedback/Success"
+              size={20}
+            />
             <Typography variant="Body/Supporting text (caption)/smRegular">
               <p>
                 <strong>
@@ -90,7 +98,11 @@ export default function Room({ booking, img, roomName }: RoomProps) {
             </Subtitle>
             <Link color="burgundy" href="" variant="icon">
               {intl.formatMessage({ id: "View room details" })}
-              <ChevronRightSmallIcon color="burgundy" />
+              <MaterialIcon
+                icon="chevron_right"
+                size={20}
+                color="CurrentColor"
+              />
             </Link>
           </div>
           <ul className={styles.details}>

apps/scandic-web/components/HotelReservation/Contact/index.tsx

@@ -2,7 +2,11 @@
 
 import { useIntl } from "react-intl"
 
-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"
@@ -64,12 +68,12 @@ export default function Contact({ hotel }: ContactProps) {
                 <div className={styles.soMeIcons}>
                   {hotel.socialMedia.instagram && (
                     <Link href={hotel.socialMedia.instagram} target="_blank">
-                      <InstagramIcon color="burgundy" />
+                      <InstagramIcon color="Icon/Interactive/Default" />
                     </Link>
                   )}
                   {hotel.socialMedia.facebook && (
                     <Link href={hotel.socialMedia.facebook} target="_blank">
-                      <FacebookIcon color="burgundy" />
+                      <FacebookIcon color="Icon/Interactive/Default" />
                     </Link>
                   )}
                 </div>

apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -18,8 +18,9 @@ import { bedTypeFormSchema } from "./schema"
 
 import styles from "./bedOptions.module.css"
 
+import type { IconProps } from "@scandic-hotels/design-system/Icons"
+
 import type { BedTypeFormSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
-import type { IconProps } from "@/types/components/icon"
 
 export default function BedType() {
   const {
@@ -113,10 +114,8 @@ function BedIconRenderer({
 
   return (
     <div className={`${props.className} ${styles.iconContainer}`}>
-      <MainBedIcon height={32} color="uiTextMediumContrast" />
-      {ExtraBedIcon && (
-        <ExtraBedIcon height={32} color="uiTextMediumContrast" />
-      )}
+      <MainBedIcon size={32} />
+      {ExtraBedIcon && <ExtraBedIcon size={32} />}
     </div>
   )
 }

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx

@@ -5,11 +5,11 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { PaymentMethodEnum } from "@/constants/booking"
 
-import { InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
@@ -56,11 +56,7 @@ export default function ConfirmBooking({
             className={styles.infoButton}
             onPress={() => setModalOpen(true)}
           >
-            <InfoCircleIcon
-              width={20}
-              height={20}
-              color="uiTextMediumContrast"
-            />
+            <MaterialIcon icon="info" size={20} color="CurrentColor" />
             {intl.formatMessage({ id: "How does it work" })}
           </Button>
 

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { CheckIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { useRoomContext } from "@/contexts/Details/Room"
@@ -65,7 +66,12 @@ export default function JoinScandicFriendsCard({
             className={styles.listItem}
             color="uiTextPlaceholder"
           >
-            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
+            <MaterialIcon
+              icon="check"
+              size={20}
+              color="Icon/Interactive/Placeholder"
+            />
+            {item.title}
           </Caption>
         ))}
       </div>

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { privacyPolicy } from "@/constants/currentWebHrefs"
 
-import { CheckIcon } from "@/components/Icons"
 import LoginButton from "@/components/LoginButton"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
@@ -85,7 +86,12 @@ export default function JoinScandicFriendsCard({
             color="uiTextPlaceholder"
             className={styles.listItem}
           >
-            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
+            <MaterialIcon
+              icon="check"
+              color="Icon/Interactive/Placeholder"
+              size={20}
+            />
+            {item.title}
           </Caption>
         ))}
       </div>

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/MemberPriceModal/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { MagicWandIcon } from "@/components/Icons"
+import { MagicWandIcon } from "@scandic-hotels/design-system/Icons"
+
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"

apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/index.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { ChevronDownIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Divider from "@/components/TempDesignSystem/Divider"
 import TextArea from "@/components/TempDesignSystem/Form/TextArea"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -28,7 +29,7 @@ export default function SpecialRequests() {
         >
           {intl.formatMessage({ id: "Special requests" })}
         </Footnote>
-        <ChevronDownIcon className={styles.chevron} />
+        <MaterialIcon icon="keyboard_arrow_down" className={styles.chevron} />
         <Divider className={styles.divider} color="subtle" />
       </button>
       <div className={styles.content}>

apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx

@@ -1,9 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useSidePeekStore from "@/stores/sidepeek"
 
-import ChevronRight from "@/components/Icons/ChevronRight"
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./header.module.css"
@@ -29,7 +30,7 @@ export default function ToggleSidePeek({
       className={styles.toggle}
     >
       {intl.formatMessage({ id: "See hotel details" })}
-      <ChevronRight height="14" color="white" />
+      <MaterialIcon icon="chevron_right" size={14} color="Icon/Inverted" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx

@@ -1,6 +1,7 @@
 import { useIntl } from "react-intl"
 
-import ChevronDown from "@/components/Icons/ChevronDown"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -13,7 +14,11 @@ export default function GuaranteeDetails() {
       <Caption color="burgundy" type="bold" asChild>
         <summary className={styles.summary}>
           {intl.formatMessage({ id: "How it works" })}
-          <ChevronDown color="burgundy" height={16} />
+          <MaterialIcon
+            icon="keyboard_arrow_down"
+            color="Icon/Interactive/Default"
+            size={16}
+          />
         </summary>
       </Caption>
       <section className={styles.content}>

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

@@ -9,7 +9,8 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import { ChevronRightSmallIcon, CloseLargeIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -50,7 +51,7 @@ export default function PriceChangeSummary({
         onClick={() => toggleOpen((isOpen) => !isOpen)}
       >
         {intl.formatMessage({ id: "See price details" })}
-        <ChevronRightSmallIcon />
+        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
       </Button>
       <ModalOverlay isOpen={isOpen} onOpenChange={toggleOpen}>
         <Modal>
@@ -66,7 +67,7 @@ export default function PriceChangeSummary({
                     variant="clean"
                     className={styles.closeButton}
                   >
-                    <CloseLargeIcon height={20} width={20} />
+                    <MaterialIcon icon="close" size={20} color="CurrentColor" />
                   </Button>
                 </header>
                 <section>

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx

@@ -1,9 +1,10 @@
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import { InfoCircleIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -75,7 +76,11 @@ export default function PriceChangeDialog({
         <Dialog aria-label={title} className={styles.dialog}>
           <header className={styles.header}>
             <div className={styles.titleContainer}>
-              <InfoCircleIcon height={48} width={48} color="burgundy" />
+              <MaterialIcon
+                icon="info"
+                size={48}
+                color="Icon/Interactive/Default"
+              />
               <Title
                 level="h1"
                 as="h3"

apps/scandic-web/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -2,7 +2,8 @@
 import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
-import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/Details/Room"
@@ -108,7 +109,7 @@ export default function SectionAccordion({
       <div className={styles.iconWrapper}>
         <div className={styles.circle} data-checked={isStepComplete}>
           {isStepComplete ? (
-            <CheckIcon color="white" height="16" width="16" />
+            <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
           ) : null}
         </div>
       </div>
@@ -131,9 +132,10 @@ export default function SectionAccordion({
             {title}
           </Subtitle>
           {isStepComplete && (
-            <ChevronDownIcon
+            <MaterialIcon
+              icon="keyboard_arrow_down"
               className={`${styles.button} ${isOpen ? styles.buttonOpen : ""}`}
-              color="burgundy"
+              color="Icon/Interactive/Default"
             />
           )}
         </button>

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useSidePeekStore from "@/stores/sidepeek"
 
-import ChevronRight from "@/components/Icons/ChevronRight"
 import Button from "@/components/TempDesignSystem/Button"
 
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
@@ -31,7 +32,7 @@ export default function ToggleSidePeek({
       wrapping
     >
       {title ? title : intl.formatMessage({ id: "See room details" })}
-      <ChevronRight height="14" />
+      <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -4,10 +4,11 @@ import { useRouter } from "next/navigation"
 import { useTransition } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { selectRate } from "@/constants/routes/hotelReservation"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import { CheckIcon, EditIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -43,7 +44,7 @@ export default function SelectedRoom() {
     <div className={styles.wrapper} data-available={room.isAvailable}>
       <div className={styles.iconWrapper}>
         <div className={styles.circle}>
-          <CheckIcon color="white" height="16" width="16" />
+          <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
         </div>
       </div>
       <div className={styles.main}>
@@ -80,7 +81,7 @@ export default function SelectedRoom() {
             onClick={changeRoom}
             disabled={isPending}
           >
-            <EditIcon color="burgundy" />
+            <MaterialIcon icon="edit_square" color="CurrentColor" />
             <Caption color="burgundy" type="bold">
               {intl.formatMessage({ id: "Change room" })}
             </Caption>

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx

@@ -3,9 +3,10 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
-import { PriceTagIcon } from "@/components/Icons"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
@@ -299,7 +300,7 @@ export default function PriceDetailsTable({
         {bookingCode && totalPrice.local.regularPrice && (
           <tr className={styles.row}>
             <td>
-              <PriceTagIcon />
+              <MaterialIcon icon="sell" />
               {bookingCode}
             </td>
             <td></td>

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -3,16 +3,12 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
-import {
-  ArrowRightIcon,
-  CheckIcon,
-  ChevronDownSmallIcon,
-  PriceTagIcon,
-} from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -92,7 +88,11 @@ export default function SummaryUI({
         </Subtitle>
         <Body className={styles.date} color="baseTextMediumContrast">
           {dt(booking.fromDate).locale(lang).format("ddd, D MMM")}
-          <ArrowRightIcon color="peach80" height={15} width={15} />
+          <MaterialIcon
+            icon="arrow_right"
+            color="Icon/Interactive/Secondary"
+            size={15}
+          />
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
         <Button
@@ -101,7 +101,11 @@ export default function SummaryUI({
           className={styles.chevronButton}
           onClick={handleToggleSummary}
         >
-          <ChevronDownSmallIcon height="20" width="20" />
+          <MaterialIcon
+            icon="keyboard_arrow_down"
+            size={20}
+            color="CurrentColor"
+          />
         </Button>
       </header>
       <Divider color="primaryLightSubtle" />
@@ -216,12 +220,12 @@ export default function SummaryUI({
                         color="uiTextHighContrast"
                         className={styles.termsText}
                       >
-                        <CheckIcon
-                          color="uiSemanticSuccess"
-                          width={20}
-                          height={20}
+                        <MaterialIcon
+                          icon="check"
+                          color="Icon/Feedback/Success"
+                          size={20}
                           className={styles.termsIcon}
-                        ></CheckIcon>
+                        />
                         {info}
                       </Body>
                     ))}
@@ -434,7 +438,7 @@ export default function SummaryUI({
         </div>
         {booking.bookingCode && (
           <div>
-            <PriceTagIcon />
+            <MaterialIcon icon="sell" />
             {booking.bookingCode}
           </div>
         )}

apps/scandic-web/components/HotelReservation/HotelCard/NoPriceAvailableCard/index.tsx

@@ -1,6 +1,7 @@
 import { useIntl } from "react-intl"
 
-import { ErrorCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./noPriceAvailable.module.css"
@@ -11,7 +12,7 @@ export default function NoPriceAvailableCard() {
     <div className={styles.priceCard}>
       <div className={styles.noRooms}>
         <div>
-          <ErrorCircleIcon color="red" />
+          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
         </div>
         <Caption color="uiTextHighContrast">
           {intl.formatMessage({

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -4,12 +4,12 @@ import { useParams } from "next/dist/client/components/navigation"
 import { memo, useCallback } from "react"
 import { useIntl } from "react-intl"
 
+import { HotelLogo, MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { selectRate } from "@/constants/routes/hotelReservation"
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
-import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import { PriceTagIcon } 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"
@@ -135,10 +135,12 @@ function HotelCard({
           </Body>
           <div className={styles.facilities}>
             {amenities.map((facility) => {
-              const IconComponent = mapFacilityToIcon(facility.id)
+              const Icon = (
+                <FacilityToIcon id={facility.id} color="Icon/Default" />
+              )
               return (
                 <div className={styles.facilitiesItem} key={facility.id}>
-                  {IconComponent && <IconComponent color="grey80" />}
+                  {Icon && Icon}
                   <Caption color="uiTextMediumContrast">
                     {facility.name}
                   </Caption>
@@ -162,7 +164,7 @@ function HotelCard({
                 <span className={`${fullPrice ? styles.strikedText : ""}`}>
                   <IconChip
                     color="blue"
-                    icon={<PriceTagIcon height={20} width={20} />}
+                    icon={<MaterialIcon icon="sell" size={20} />}
                   >
                     {bookingCode}
                   </IconChip>

apps/scandic-web/components/HotelReservation/HotelCardDialog/HotelCardDialogImage/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 HotelCardDialogImage({
       )}
       <div className={styles.tripAdvisor}>
         <Chip className={styles.tripAdvisor}>
-          <TripAdvisorIcon color="burgundy" />
+          <TripadvisorIcon color="Icon/Interactive/Default" />
           {ratings}
         </Chip>
       </div>

apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { selectRate } from "@/constants/routes/hotelReservation"
 
-import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -68,12 +68,16 @@ export default function ListingHotelCardDialog({
           </div>
           <div className={styles.facilities}>
             {amenities.map((facility) => {
-              const IconComponent = mapFacilityToIcon(facility.id)
+              const Icon = (
+                <FacilityToIcon
+                  id={facility.id}
+                  size={20}
+                  color="Icon/Default"
+                />
+              )
               return (
                 <div className={styles.facilitiesItem} key={facility.id}>
-                  {IconComponent && (
-                    <IconComponent width={20} height={20} color="grey80" />
-                  )}
+                  {Icon && Icon}
                   <Caption color="uiTextMediumContrast">
                     {facility.name}
                   </Caption>

apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { selectRate } from "@/constants/routes/hotelReservation"
 
-import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -73,12 +73,12 @@ export default function StandaloneHotelCardDialog({
         </div>
         <div className={styles.facilities}>
           {amenities.slice(0, 3).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 color="uiTextMediumContrast">
                   {facility.name}
                 </Footnote>

apps/scandic-web/components/HotelReservation/HotelCardDialog/index.tsx

@@ -3,7 +3,7 @@
 import { useParams } from "next/navigation"
 import { useState } from "react"
 
-import { CloseLargeIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 
 import ListingHotelCardDialog from "./ListingHotelCardDialog"
 import StandaloneHotelCardDialog from "./StandaloneHotelCardDialog"
@@ -30,12 +30,10 @@ export default function HotelCardDialog({
   return (
     <dialog open={isOpen} className={styles.dialog}>
       <div className={styles.dialogContainer} data-type={type}>
-        <CloseLargeIcon
-          onClick={handleClose}
-          className={styles.closeIcon}
-          width={16}
-          height={16}
-        />
+        <div onClick={handleClose}>
+          <MaterialIcon icon="close" className={styles.closeIcon} size={16} />
+        </div>
+
         {type === "standalone" ? (
           <StandaloneHotelCardDialog
             data={data}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/index.tsx

@@ -3,15 +3,14 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 
 import {
   AncillaryStepEnum,
   useAddAncillaryStore,
 } from "@/stores/my-stay/add-ancillary-flow"
 
-import { ChevronDownSmallIcon, ChevronUpSmallIcon } from "@/components/Icons"
-
-import { type  AncillaryFormData,quantitySchema } from "../../schema"
+import { type AncillaryFormData, quantitySchema } from "../../schema"
 
 import styles from "./actionButtons.module.css"
 
@@ -81,16 +80,16 @@ export default function ActionButtons({
         >
           {intl.formatMessage({ id: "Price details" })}
           {isPriceDetailsOpen ? (
-            <ChevronUpSmallIcon
-              width={20}
-              height={20}
-              color="baseButtonTextOnFillNormal"
+            <MaterialIcon
+              icon="keyboard_arrow_up"
+              size={20}
+              color="Icon/Interactive/Accent"
             />
           ) : (
-            <ChevronDownSmallIcon
-              width={20}
-              height={20}
-              color="baseButtonTextOnFillNormal"
+            <MaterialIcon
+              icon="keyboard_arrow_down"
+              size={20}
+              color="Icon/Interactive/Accent"
             />
           )}
         </Button>

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx

@@ -1,11 +1,11 @@
 import { useFormContext } 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 { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
-import { DiamondIcon } from "@/components/Icons"
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
 import Select from "@/components/TempDesignSystem/Form/Select"
 
@@ -63,7 +63,7 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
           </Typography>
           <div className={styles.totalPointsContainer}>
             <div className={styles.totalPoints}>
-              <DiamondIcon />
+              <MaterialIcon icon="diamond" />
               <Typography variant="Title/Overline/sm">
                 <h2>{intl.formatMessage({ id: "Total points" })}</h2>
               </Typography>

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx

@@ -1,9 +1,10 @@
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { trpc } from "@/lib/trpc/client"
 
 import Dialog from "@/components/Dialog"
-import { DeleteIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
@@ -34,7 +35,7 @@ export default function RemoveButton({
       titleText={`${intl.formatMessage({ id: "Remove" })} ${title}`}
       trigger={
         <Button intent="text" size="small" variant="icon" theme="base">
-          <DeleteIcon />
+          <MaterialIcon icon="delete" color="CurrentColor" />
           {intl.formatMessage({ id: "Remove" })}
         </Button>
       }

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx

@@ -1,7 +1,8 @@
 import { useRouter } from "next/navigation"
 import { useIntl } from "react-intl"
 
-import { CheckCircleIcon, EditIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Button from "@/components/TempDesignSystem/Button"
@@ -48,7 +49,12 @@ export function AddedAncillaries({
             <Accordion className={styles.ancillaryMobile}>
               <AccordionItem
                 title={ancillaryTitle}
-                icon={<CheckCircleIcon color="uiSemanticSuccess" />}
+                icon={
+                  <MaterialIcon
+                    icon="check_circle"
+                    color="Icon/Feedback/Success"
+                  />
+                }
               >
                 <div>
                   {ancillary.comment && (
@@ -84,7 +90,7 @@ export function AddedAncillaries({
                         variant="icon"
                         theme="base"
                       >
-                        <EditIcon />
+                        <MaterialIcon icon="edit_square" color="CurrentColor" />
                         {intl.formatMessage({ id: "Modify" })}
                       </Button>
                       <Divider
@@ -105,7 +111,10 @@ export function AddedAncillaries({
             <div className={styles.ancillaryDesktop}>
               <div className={styles.specification}>
                 <div className={styles.name}>
-                  <CheckCircleIcon color="uiSemanticSuccess" />
+                  <MaterialIcon
+                    icon="check_circle"
+                    color="Icon/Feedback/Success"
+                  />
                   <Body textTransform="bold">{ancillaryTitle}</Body>
                   <Body textTransform="bold">{`X${ancillary.totalUnit}`}</Body>
                 </div>
@@ -140,7 +149,7 @@ export function AddedAncillaries({
                       variant="icon"
                       theme="base"
                     >
-                      <EditIcon />
+                      <MaterialIcon icon="edit_square" color="CurrentColor" />
                       {intl.formatMessage({ id: "Modify" })}
                     </Button>
                     <Divider

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ViewAllAncillaries/index.tsx

@@ -1,8 +1,9 @@
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
-import { ChevronRightSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
 export default function ViewAllAncillaries() {
@@ -17,11 +18,7 @@ export default function ViewAllAncillaries() {
       onClick={openModal}
     >
       {intl.formatMessage({ id: "View all" })}
-      <ChevronRightSmallIcon
-        width={20}
-        height={20}
-        color="baseButtonTextOnFillNormal"
-      />
+      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx

@@ -2,19 +2,13 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { CancellationRuleEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 
-import {
-  CheckCircleIcon,
-  DirectionsIcon,
-  EmailIcon,
-  LinkIcon,
-} from "@/components/Icons"
-import CrossCircleIcon from "@/components/Icons/CrossCircle"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import { Toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
@@ -81,8 +75,14 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
           chip={
             isCancelled ? (
               <IconChip
-                color={"red"}
-                icon={<CrossCircleIcon width={20} height={20} color="red" />}
+                color="red"
+                icon={
+                  <MaterialIcon
+                    icon="cancel"
+                    size={20}
+                    color="Icon/Feedback/Error"
+                  />
+                }
               >
                 <Typography variant="Body/Supporting text (caption)/smBold">
                   <span>{intl.formatMessage({ id: "Cancelled" })}</span>
@@ -93,9 +93,17 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
                 color={isPaid ? "green" : "red"}
                 icon={
                   isPaid ? (
-                    <CheckCircleIcon width={20} height={20} color="green" />
+                    <MaterialIcon
+                      icon="check_circle"
+                      size={20}
+                      color="Icon/Feedback/Success"
+                    />
                   ) : (
-                    <CrossCircleIcon width={20} height={20} color="red" />
+                    <MaterialIcon
+                      icon="cancel"
+                      size={20}
+                      color="Icon/Interactive/Accent"
+                    />
                   )
                 }
               >
@@ -136,19 +144,37 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
             {
               href: directionsUrl,
               text: intl.formatMessage({ id: "Directions" }),
-              icon: <DirectionsIcon width={20} height={20} color="burgundy" />,
+              icon: (
+                <MaterialIcon
+                  icon="directions"
+                  size={20}
+                  color="Icon/Interactive/Default"
+                />
+              ),
               onClick: () => trackMyStayPageLink("see on map"),
             },
             {
               href: `mailto:${hotel.contactInformation.email}`,
               text: intl.formatMessage({ id: "Email" }),
-              icon: <EmailIcon width={20} height={20} color="burgundy" />,
+              icon: (
+                <MaterialIcon
+                  icon="mail"
+                  size={20}
+                  color="Icon/Interactive/Default"
+                />
+              ),
               onClick: () => trackMyStayPageLink("email us"),
             },
             {
               href: hotel.contactInformation.websiteUrl,
               text: intl.formatMessage({ id: "Homepage" }),
-              icon: <LinkIcon width={20} height={20} color="burgundy" />,
+              icon: (
+                <MaterialIcon
+                  icon="link"
+                  size={20}
+                  color="Icon/Interactive/Default"
+                />
+              ),
               onClick: () => trackMyStayPageLink("hotel homepage"),
             },
           ]}

apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx

@@ -6,12 +6,12 @@ import { Dialog } from "react-aria-components"
 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 { trpc } from "@/lib/trpc/client"
 import { type Room } from "@/stores/my-stay/myStayRoomDetailsStore"
 
-import { DiamondIcon, EditIcon } from "@/components/Icons"
 import MembershipLevelIcon from "@/components/Levels/Icon"
 import Modal from "@/components/Modal"
 import { ModalContentWithActions } from "@/components/Modal/ModalContentWithActions"
@@ -140,7 +140,7 @@ export default function GuestDetails({
           </div>
           <div className={styles.totalPoints}>
             <div className={styles.totalPointsText}>
-              <DiamondIcon color="uiTextHighContrast" />
+              <MaterialIcon icon="diamond" color="Icon/Intense" />
 
               <Typography variant="Title/Overline/sm">
                 <p>{intl.formatMessage({ id: "Total points" })}</p>
@@ -197,7 +197,11 @@ export default function GuestDetails({
           disabled={booking.isCancelled}
           size="small"
         >
-          <EditIcon color="burgundy" width={20} height={20} />
+          <MaterialIcon
+            icon="edit"
+            color="Icon/Interactive/Default"
+            size={20}
+          />
           <Typography variant="Body/Paragraph/mdRegular">
             <span>{intl.formatMessage({ id: "Modify guest details" })}</span>
           </Typography>
@@ -214,7 +218,11 @@ export default function GuestDetails({
             disabled={booking.isCancelled}
             size="small"
           >
-            <EditIcon color="burgundy" width={20} height={20} />
+            <MaterialIcon
+              icon="edit"
+              color="Icon/Interactive/Default"
+              size={20}
+            />
             <Typography variant="Body/Paragraph/mdRegular">
               <span>{intl.formatMessage({ id: "Modify guest details" })}</span>
             </Typography>

apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/AddToCalendarButton.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { CalendarAddIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import { trackMyStayPageLink } from "@/utils/tracking"
 
@@ -29,7 +30,7 @@ export default function AddToCalendarButton({
       onPress={handleAddToCalendar}
     >
       {intl.formatMessage({ id: "Add to calendar" })}
-      <CalendarAddIcon width={24} height={24} color="burgundy" />
+      <MaterialIcon icon="calendar_add_on" color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/NewDates/CalendarButton/index.tsx

@@ -2,10 +2,9 @@
 
 import { Button as ButtonRAC } from "react-aria-components"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { CalendarIcon } from "@/components/Icons"
-
 import styles from "./calendarButton.module.css"
 
 interface CalendarButtonProps {
@@ -19,7 +18,7 @@ export default function CalendarButton({ text, onClick }: CalendarButtonProps) {
       <Typography variant="Body/Paragraph/mdRegular">
         <span>{text}</span>
       </Typography>
-      <CalendarIcon />
+      <MaterialIcon icon="calendar_today" />
     </ButtonRAC>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx

@@ -2,20 +2,15 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { customerService } from "@/constants/currentWebHrefs"
+import { preliminaryReceipt } from "@/constants/routes/myStay"
 import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
-import { preliminaryReceipt } from "@/constants/routes/myStay"
 
 import AddToCalendar from "@/components/HotelReservation/AddToCalendar"
 import { generateDateTime } from "@/components/HotelReservation/BookingConfirmation/Header/Actions/helpers"
-import {
-  CalendarIcon,
-  ChevronRightIcon,
-  CreditCard,
-  CrossCircleOutlineIcon,
-  DownloadIcon,
-} from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -109,7 +104,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
           className={styles.button}
         >
           {intl.formatMessage({ id: "Modify dates" })}
-          <CalendarIcon width={24} height={24} color="burgundy" />
+          <MaterialIcon icon="calendar_month" color="CurrentColor" />
         </Button>
         {showGuaranteeButton && (
           <Button
@@ -119,7 +114,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
             className={styles.button}
           >
             {intl.formatMessage({ id: "Guarantee late arrival" })}
-            <CreditCard width={24} height={24} color="burgundy" />
+            <MaterialIcon icon="credit_card" color="CurrentColor" />
           </Button>
         )}
         <AddToCalendar
@@ -136,7 +131,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
           onClick={handleDownloadInvoice}
         >
           {intl.formatMessage({ id: "Download invoice" })}
-          <DownloadIcon width={24} height={24} color="burgundy" />
+          <MaterialIcon icon="download" color="CurrentColor" />
         </Link>
         {showCancelStayButton && (
           <Button
@@ -146,7 +141,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
             className={styles.button}
           >
             {intl.formatMessage({ id: "Cancel stay" })}
-            <CrossCircleOutlineIcon width={24} height={24} color="burgundy" />
+            <MaterialIcon icon="cancel" color="CurrentColor" />
           </Button>
         )}
       </div>
@@ -184,7 +179,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
           <Caption color="burgundy">
             {intl.formatMessage({ id: "Customer support" })}
           </Caption>
-          <ChevronRightIcon width={20} height={20} color="burgundy" />
+          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
         </Link>
       </div>
     </div>

apps/scandic-web/components/HotelReservation/MyStay/ManageStay/index.tsx

@@ -2,10 +2,11 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 
-import { ChevronDownIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 
@@ -74,7 +75,7 @@ export default function ManageStay({
         disabled={allRoomsCancelled}
       >
         {intl.formatMessage({ id: "Manage stay" })}
-        <ChevronDownIcon width={24} height={24} color="burgundy" />
+        <MaterialIcon icon="keyboard_arrow_down" color="Icon/Inverted" />
       </Button>
       {isOpen && (
         <Modal

apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/ToggleSidePeek.tsx

@@ -1,8 +1,9 @@
 "use client"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useSidePeekStore from "@/stores/sidepeek"
 
-import { ExpandIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./toggleSidePeek.module.css"
@@ -36,7 +37,7 @@ export default function ToggleSidePeek({
       wrapping
     >
       <div className={styles.iconContainer}>
-        <ExpandIcon />
+        <MaterialIcon icon="pan_zoom" color="CurrentColor" />
       </div>
     </Button>
   )

apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/index.tsx

@@ -2,6 +2,7 @@
 import { use, useEffect } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { BookingStatusEnum } from "@/constants/booking"
@@ -9,13 +10,12 @@ import { dt } from "@/lib/dt"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"
 
-import CrossCircleIcon from "@/components/Icons/CrossCircle"
 import Image from "@/components/Image"
 import Divider from "@/components/TempDesignSystem/Divider"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import useLang from "@/hooks/useLang"
 
-import { getIconForFeatureCode } from "../../utils"
+import { IconForFeatureCode } from "../../utils"
 import Price from "../Price"
 import { hasBreakfastPackage } from "../utils/hasBreakfastPackage"
 import { mapRoomDetails } from "../utils/mapRoomDetails"
@@ -156,7 +156,13 @@ export default function MultiRoom({
         {isCancelled ? (
           <IconChip
             color={"red"}
-            icon={<CrossCircleIcon width={20} height={20} color="red" />}
+            icon={
+              <MaterialIcon
+                icon="cancel"
+                size={20}
+                color="Icon/Feedback/Error"
+              />
+            }
           >
             <Typography variant="Body/Supporting text (caption)/smBold">
               <span>{intl.formatMessage({ id: "Cancelled" })}</span>
@@ -216,10 +222,13 @@ export default function MultiRoom({
                 )
               )
               .map((item) => {
-                const Icon = getIconForFeatureCode(item.code)
                 return (
                   <span className={styles.package} key={item.code}>
-                    <Icon width={16} height={16} color="burgundy" />
+                    <IconForFeatureCode
+                      featureCode={item.code}
+                      size={16}
+                      color="Icon/Interactive/Default"
+                    />
                   </span>
                 )
               })}

apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/PriceDetailsTable/index.tsx

@@ -3,11 +3,11 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { dt } from "@/lib/dt"
 
-import { PriceTagIcon } from "@/components/Icons"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
@@ -286,7 +286,7 @@ export default function PriceDetailsTable({
         {bookingCode && totalPrice.local.regularPrice && (
           <tr className={styles.row}>
             <td>
-              <PriceTagIcon />
+              <MaterialIcon icon="sell" />
               {bookingCode}
             </td>
             <td></td>

apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx

@@ -1,6 +1,7 @@
 import { cookies } from "next/headers"
 import { notFound } from "next/navigation"
 
+import { ScandicLogoIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { dt } from "@/lib/dt"
@@ -11,7 +12,6 @@ import {
 } from "@/lib/trpc/memoizedRequests"
 import { decrypt } from "@/server/routers/utils/encryption"
 
-import { ScandicLogoIcon } from "@/components/Icons"
 import { getIntl } from "@/i18n"
 
 import AdditionalInfoForm from "../../FindMyBooking/AdditionalInfoForm"
@@ -60,7 +60,7 @@ export async function Receipt({ refId }: { refId: string }) {
     return (
       <main className={styles.main}>
         <div>
-          <ScandicLogoIcon width="89px" height="19px" color="red" />
+          <ScandicLogoIcon width="89px" height="19px" color="Icon/Accent" />
           <div className={styles.addresses}>
             <div>
               <Typography variant="Body/Supporting text (caption)/smRegular">

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx

@@ -3,6 +3,10 @@
 import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
+import {
+  Discount22Icon,
+  MaterialIcon,
+} from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { BookingStatusEnum } from "@/constants/booking"
@@ -10,7 +14,6 @@ import { dt } from "@/lib/dt"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"
 
-import { BookingCodeIcon, CheckCircleIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import IconChip from "@/components/TempDesignSystem/IconChip"
@@ -244,7 +247,11 @@ export function ReferenceCard({
       {booking.guaranteeInfo && !allRoomsCancelled && (
         <>
           <div className={styles.guaranteed}>
-            <CheckCircleIcon color="green" height={20} width={20} />
+            <MaterialIcon
+              icon="check_circle"
+              color="Icon/Feedback/Success"
+              size={20}
+            />
             <Typography variant="Body/Supporting text (caption)/smRegular">
               <p className={styles.guaranteedText}>
                 <strong>
@@ -271,7 +278,10 @@ export function ReferenceCard({
           <Typography variant="Title/Overline/sm">
             <p>{intl.formatMessage({ id: "Booking code" })}</p>
           </Typography>
-          <IconChip color={"blue"} icon={<BookingCodeIcon color="blue" />}>
+          <IconChip
+            color="blue"
+            icon={<Discount22Icon color="Icon/Feedback/Information" />}
+          >
             <Typography variant="Body/Supporting text (caption)/smBold">
               <p className={styles.bookingCode}>
                 <strong>{intl.formatMessage({ id: "Booking code" })}</strong>:{" "}
@@ -281,7 +291,6 @@ export function ReferenceCard({
           </IconChip>
         </div>
       )}
-
       <div className={styles.actionArea}>
         <ManageStay
           hotel={hotel}

apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/ToggleSidePeek.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useSidePeekStore from "@/stores/sidepeek"
 
-import ChevronRight from "@/components/Icons/ChevronRight"
 import Button from "@/components/TempDesignSystem/Button"
 
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
@@ -35,7 +36,7 @@ export default function ToggleSidePeek({
       wrapping
     >
       {title ? title : intl.formatMessage({ id: "See room details" })}
-      <ChevronRight height="14" />
+      <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx

@@ -2,21 +2,16 @@
 
 import { useIntl } from "react-intl"
 
+import {
+  Discount22Icon,
+  MaterialIcon,
+} from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { dt } from "@/lib/dt"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 
-import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
-import {
-  BedDoubleIcon,
-  BookingCodeIcon,
-  CoffeeIcon,
-  ContractIcon,
-  DoorOpenIcon,
-  PersonIcon,
-} from "@/components/Icons"
-import Refresh from "@/components/Icons/Refresh"
+import { IconForFeatureCode } from "@/components/HotelReservation/utils"
 import Image from "@/components/Image"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import IconChip from "@/components/TempDesignSystem/IconChip"
@@ -168,10 +163,13 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                     )
                   )
                   .map((item) => {
-                    const Icon = getIconForFeatureCode(item.code)
                     return (
                       <span className={styles.package} key={item.code}>
-                        <Icon width={16} height={16} color="burgundy" />
+                        <IconForFeatureCode
+                          featureCode={item.code}
+                          size={16}
+                          color="Icon/Interactive/Default"
+                        />
                       </span>
                     )
                   })}
@@ -191,7 +189,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
               <div className={styles.bookingDetails}>
                 <div className={styles.row}>
                   <span className={styles.rowTitle}>
-                    <PersonIcon color="grey80" width={20} height={20} />
+                    <MaterialIcon
+                      icon="person"
+                      color="Icon/Default"
+                      size={20}
+                    />
                     <Typography variant="Body/Paragraph/mdBold">
                       <p>{intl.formatMessage({ id: "Guests" })}</p>
                     </Typography>
@@ -208,7 +210,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                 </div>
                 <div className={styles.row}>
                   <span className={styles.rowTitle}>
-                    <ContractIcon color="grey80" width={20} height={20} />
+                    <MaterialIcon
+                      icon="contract"
+                      color="Icon/Default"
+                      size={20}
+                    />
                     <Typography variant="Body/Paragraph/mdBold">
                       <p>{intl.formatMessage({ id: "Terms" })}</p>
                     </Typography>
@@ -223,7 +229,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                 </div>
                 <div className={styles.row}>
                   <span className={styles.rowTitle}>
-                    <Refresh color="grey80" width={20} height={20} />
+                    <MaterialIcon
+                      icon="refresh"
+                      color="Icon/Default"
+                      size={20}
+                    />
                     <Typography variant="Body/Paragraph/mdBold">
                       <p>{intl.formatMessage({ id: "Modify By" })}</p>
                     </Typography>
@@ -241,7 +251,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                 </div>
                 <div className={styles.row}>
                   <span className={styles.rowTitle}>
-                    <CoffeeIcon color="grey80" width={20} height={20} />
+                    <MaterialIcon
+                      icon="coffee"
+                      color="Icon/Default"
+                      size={20}
+                    />
                     <Typography variant="Body/Paragraph/mdBold">
                       <p>{intl.formatMessage({ id: "Breakfast" })}</p>
                     </Typography>
@@ -263,7 +277,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                 {hasPackages && (
                   <div className={styles.row}>
                     <span className={styles.rowTitle}>
-                      <DoorOpenIcon color="grey80" width={20} height={20} />
+                      <MaterialIcon
+                        icon="meeting_room"
+                        color="Icon/Default"
+                        size={20}
+                      />
                       <Typography variant="Body/Paragraph/mdBold">
                         <p>
                           {intl.formatMessage({ id: "Room classification" })}
@@ -289,7 +307,7 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
 
                 <div className={styles.row}>
                   <span className={styles.rowTitle}>
-                    <BedDoubleIcon color="grey80" width={20} height={20} />
+                    <MaterialIcon icon="bed" color="Icon/Default" size={20} />
                     <Typography variant="Body/Paragraph/mdBold">
                       <p>{intl.formatMessage({ id: "Bed preference" })}</p>
                     </Typography>
@@ -318,7 +336,10 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
           </div>
           <div className={styles.bookingInformation}>
             {bookingCode && (
-              <IconChip color={"blue"} icon={<BookingCodeIcon color="blue" />}>
+              <IconChip
+                color="blue"
+                icon={<Discount22Icon color="Icon/Feedback/Information" />}
+              >
                 <Typography variant="Body/Supporting text (caption)/smBold">
                   <p className={styles.bookingCode}>
                     <strong>

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

@@ -1,7 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -19,7 +20,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>
       }
     >

apps/scandic-web/components/HotelReservation/ReadMore/index.tsx

@@ -1,8 +1,9 @@
 "use client"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useSidePeekStore from "@/stores/sidepeek"
 
-import { ChevronRightIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./readMore.module.css"
@@ -23,11 +24,7 @@ export default function ReadMore({ label, hotelId, showCTA }: ReadMoreProps) {
       className={styles.detailsButton}
     >
       {label}
-      <ChevronRightIcon
-        color="baseButtonTextOnFillNormal"
-        height={20}
-        width={20}
-      />
+      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/SelectHotel/BookingCodeFilter/index.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
 
-import { PriceTagIcon } from "@/components/Icons"
 import Select from "@/components/TempDesignSystem/Select"
 
 import styles from "./bookingCodeFilter.module.css"
@@ -50,7 +51,7 @@ export default function BookingCodeFilter() {
           label=""
           items={bookingCodeFilterItems}
           defaultSelectedKey={activeCodeFilter}
-          optionsIcon={<PriceTagIcon />}
+          optionsIcon={<MaterialIcon icon="sell" />}
         />
       </div>
     </>

apps/scandic-web/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx

@@ -13,9 +13,10 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
-import { CloseLargeIcon, FilterIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Select from "@/components/TempDesignSystem/Select"
@@ -95,7 +96,7 @@ export default function FilterAndSortModal({
     <>
       <DialogTrigger>
         <Button intent="secondary" size="small" theme="base" variant="icon">
-          <FilterIcon color="baseTextHighcontrast" />
+          <MaterialIcon icon="filter_alt" color="Icon/Intense" />
           {intl.formatMessage({ id: "Filter and sort" })}
           {activeFilters.length > 0 && (
             <Footnote className={styles.badge}>{activeFilters.length}</Footnote>
@@ -112,7 +113,7 @@ export default function FilterAndSortModal({
                       type="button"
                       className={styles.close}
                     >
-                      <CloseLargeIcon />
+                      <MaterialIcon icon="close" />
                     </button>
                     <Subtitle
                       type="two"

apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx

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

apps/scandic-web/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx

@@ -2,12 +2,13 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import {
   alternativeHotelsMap,
   selectHotelMap,
 } from "@/constants/routes/hotelReservation"
 
-import { MapIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
@@ -45,7 +46,7 @@ export default function MobileMapButtonContainer({
           keepSearchParams
           weight="bold"
         >
-          <MapIcon color="baseTextHighcontrast" />
+          <MaterialIcon icon="map" color="Icon/Intense" />
           {intl.formatMessage({ id: "See on map" })}
         </Link>
       </Button>

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -4,13 +4,14 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { selectHotel } from "@/constants/routes/hotelReservation"
 import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
-import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
@@ -134,7 +135,7 @@ export default function SelectHotelContent({
       asChild
     >
       <Link href={selectHotel(lang)} keepSearchParams prefetch>
-        <CloseIcon color="burgundy" />
+        <MaterialIcon icon="close" size={20} color="CurrentColor" />
         {intl.formatMessage({ id: "Close the map" })}
       </Link>
     </Button>
@@ -153,7 +154,7 @@ export default function SelectHotelContent({
             asChild
           >
             <Link href={selectHotel(lang)} keepSearchParams>
-              <CloseLargeIcon />
+              <MaterialIcon icon="close" color="CurrentColor" />
             </Link>
           </Button>
           <FilterAndSortModal

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -2,6 +2,8 @@ import stringify from "json-stable-stringify-without-jsonify"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import {
   alternativeHotels,
   alternativeHotelsMap,
@@ -9,7 +11,6 @@ import {
   selectHotelMap,
 } from "@/constants/routes/hotelReservation"
 
-import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
 import Button from "@/components/TempDesignSystem/Button"
@@ -217,10 +218,10 @@ export default async function SelectHotel({
                 />
                 <Button wrapping size="medium" intent="text" theme="base">
                   {intl.formatMessage({ id: "See map" })}
-                  <ChevronRightIcon
-                    color="baseButtonTextOnFillNormal"
-                    width={20}
-                    height={20}
+                  <MaterialIcon
+                    icon="chevron_right"
+                    size={20}
+                    color="CurrentColor"
                   />
                 </Button>
               </div>

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -1,4 +1,4 @@
-import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Alert from "@/components/TempDesignSystem/Alert"
@@ -67,15 +67,16 @@ export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
                 {intl.formatMessage({ id: "At the hotel" })}
               </Body>
               {sortedFacilities?.map((facility) => {
-                const IconComponent = mapFacilityToIcon(facility.id)
+                const Icon = (
+                  <FacilityToIcon
+                    id={facility.id}
+                    className={styles.facilitiesIcon}
+                    color="Icon/Default"
+                  />
+                )
                 return (
                   <div className={styles.facilitiesItem} key={facility.id}>
-                    {IconComponent && (
-                      <IconComponent
-                        className={styles.facilitiesIcon}
-                        color="grey80"
-                      />
-                    )}
+                    {Icon && Icon}
                     <Body color="uiTextHighContrast">{facility.name}</Body>
                   </div>
                 )

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/index.tsx

@@ -3,9 +3,10 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
-import { PriceTagIcon } from "@/components/Icons"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
@@ -177,7 +178,7 @@ export default function PriceDetailsTable({
         {bookingCode && totalPrice.local.regularPrice && (
           <tr className={styles.row}>
             <td>
-              <PriceTagIcon />
+              <MaterialIcon icon="sell" />
               {bookingCode}
             </td>
             <td></td>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx

@@ -2,15 +2,12 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
-import {
-  ArrowRightIcon,
-  CheckIcon,
-  ChevronDownSmallIcon,
-} from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -75,7 +72,11 @@ export default function Summary({
         </Subtitle>
         <Body className={styles.date} color="baseTextMediumContrast">
           {dt(booking.fromDate).locale(lang).format("ddd, D MMM")}
-          <ArrowRightIcon color="peach80" height={15} width={15} />
+          <MaterialIcon
+            icon="arrow_forward"
+            size={15}
+            color="Icon/Interactive/Secondary"
+          />
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
         <Button
@@ -84,7 +85,11 @@ export default function Summary({
           className={styles.chevronButton}
           onClick={toggleSummaryOpen}
         >
-          <ChevronDownSmallIcon height="20" width="20" />
+          <MaterialIcon
+            icon="keyboard_arrow_down"
+            size={20}
+            color="CurrentColor"
+          />
         </Button>
       </header>
       <Divider color="primaryLightSubtle" />
@@ -186,12 +191,12 @@ export default function Summary({
                         color="uiTextHighContrast"
                         className={styles.termsText}
                       >
-                        <CheckIcon
-                          color="uiSemanticSuccess"
-                          width={20}
-                          height={20}
+                        <MaterialIcon
+                          icon="check"
+                          color="Icon/Feedback/Success"
+                          size={20}
                           className={styles.termsIcon}
-                        ></CheckIcon>
+                        />
                         {info}
                       </Body>
                     ))}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -1,9 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useRatesStore } from "@/stores/select-rate"
 
-import { EditIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
@@ -96,7 +97,7 @@ export default function SelectedRoomPanel() {
         <div className={styles.modifyButtonContainer}>
           <Button clean onClick={modifyRate}>
             <Chip size="small" variant="uiTextHighContrast">
-              <EditIcon />
+              <MaterialIcon icon="edit_square" />
               {intl.formatMessage({ id: "Modify" })}
             </Chip>
           </Button>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx

@@ -1,9 +1,10 @@
 import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useRatesStore } from "@/stores/select-rate"
 
-import { ChevronUpIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
@@ -93,7 +94,11 @@ export default function MultiRoomWrapper({
               variant="icon"
             >
               {intl.formatMessage({ id: "Close" })}
-              <ChevronUpIcon height={20} width={20} />
+              <MaterialIcon
+                icon="keyboard_arrow_up"
+                size={20}
+                color="CurrentColor"
+              />
             </Button>
           ) : null}
         </div>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/index.tsx

@@ -1,9 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useRatesStore } from "@/stores/select-rate"
 
-import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Label from "@/components/TempDesignSystem/Form/Label"
@@ -57,7 +58,11 @@ export default function FlexibilityOption({
     return (
       <div className={styles.noPricesCard}>
         <div className={styles.header}>
-          <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
+          <MaterialIcon
+            icon="info"
+            size={16}
+            color="Icon/Interactive/Placeholder"
+          />
           <div className={styles.priceType}>
             <Caption>{title}</Caption>
             <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
@@ -108,10 +113,10 @@ export default function FlexibilityOption({
           <Modal
             trigger={
               <Button intent="text">
-                <InfoCircleIcon
-                  width={16}
-                  height={16}
-                  color="uiTextMediumContrast"
+                <MaterialIcon
+                  icon="info"
+                  size={16}
+                  color="Icon/Interactive/Placeholder"
                 />
               </Button>
             }
@@ -125,12 +130,12 @@ export default function FlexibilityOption({
                   color="uiTextHighContrast"
                   className={styles.termsText}
                 >
-                  <CheckIcon
-                    color="uiSemanticSuccess"
-                    width={20}
-                    height={20}
+                  <MaterialIcon
+                    icon="check"
+                    color="Icon/Feedback/Success"
+                    size={20}
                     className={styles.termsIcon}
-                  ></CheckIcon>
+                  />
                   {info}
                 </Body>
               ))}
@@ -149,7 +154,7 @@ export default function FlexibilityOption({
         />
 
         <div className={styles.checkIcon}>
-          <CheckIcon color="white" height="16" width="16" />
+          <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
         </div>
       </div>
     </label>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOptionCheque/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -71,11 +72,7 @@ export default function FlexibilityOptionCheque({
           <Modal
             trigger={
               <Button intent="text">
-                <InfoCircleIcon
-                  width={16}
-                  height={16}
-                  color="uiTextMediumContrast"
-                />
+                <MaterialIcon icon="info" size={16} color="Icon/Default" />
               </Button>
             }
             title={chequeRateName}
@@ -88,12 +85,12 @@ export default function FlexibilityOptionCheque({
                   color="uiTextHighContrast"
                   className={styles.termsText}
                 >
-                  <CheckIcon
-                    color="uiSemanticSuccess"
-                    width={20}
-                    height={20}
+                  <MaterialIcon
+                    icon="check"
+                    color="Icon/Feedback/Success"
+                    size={20}
                     className={styles.termsIcon}
-                  ></CheckIcon>
+                  />
                   {info}
                 </Body>
               ))}
@@ -110,7 +107,7 @@ export default function FlexibilityOptionCheque({
         />
 
         <div className={styles.checkIcon}>
-          <CheckIcon color="white" height="16" width="16" />
+          <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
         </div>
       </div>
     </label>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOptionPoints/index.tsx

@@ -1,7 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Label from "@/components/TempDesignSystem/Form/Label"
@@ -38,7 +39,7 @@ export default function FlexibilityOptionPoints({
     return (
       <div className={styles.noPricesCard}>
         <div className={styles.header}>
-          <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
+          <MaterialIcon icon="info" size={16} />
           <div className={styles.priceType}>
             <Caption>{title}</Caption>
             <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
@@ -79,11 +80,7 @@ export default function FlexibilityOptionPoints({
           <Modal
             trigger={
               <Button intent="text">
-                <InfoCircleIcon
-                  width={16}
-                  height={16}
-                  color="uiTextMediumContrast"
-                />
+                <MaterialIcon icon="info" size={16} />
               </Button>
             }
             title={rewardNightTitle}
@@ -97,10 +94,10 @@ export default function FlexibilityOptionPoints({
                     color="uiTextHighContrast"
                     className={styles.termsText}
                   >
-                    <CheckIcon
-                      color="uiSemanticSuccess"
-                      width={20}
-                      height={20}
+                    <MaterialIcon
+                      icon="check"
+                      color="Icon/Feedback/Success"
+                      size={20}
                       className={styles.termsIcon}
                     />
                     {info}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOptionVoucher/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -70,11 +71,7 @@ export default function FlexibilityOptionVoucher({
           <Modal
             trigger={
               <Button intent="text">
-                <InfoCircleIcon
-                  width={16}
-                  height={16}
-                  color="uiTextMediumContrast"
-                />
+                <MaterialIcon icon="info" size={16} color="Icon/Default" />
               </Button>
             }
             title={voucherRateName}
@@ -87,12 +84,12 @@ export default function FlexibilityOptionVoucher({
                   color="uiTextHighContrast"
                   className={styles.termsText}
                 >
-                  <CheckIcon
-                    color="uiSemanticSuccess"
-                    width={20}
-                    height={20}
+                  <MaterialIcon
+                    icon="check"
+                    color="Icon/Feedback/Success"
+                    size={20}
                     className={styles.termsIcon}
-                  ></CheckIcon>
+                  />
                   {info}
                 </Body>
               ))}
@@ -109,7 +106,7 @@ export default function FlexibilityOptionVoucher({
         />
 
         <div className={styles.checkIcon}>
-          <CheckIcon color="white" height="16" width="16" />
+          <MaterialIcon icon="check" color="Icon/Inverted" size={16} />
         </div>
       </div>
     </label>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx

@@ -4,12 +4,13 @@ import { useSearchParams } from "next/navigation"
 import { createElement } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { REDEMPTION } from "@/constants/booking"
 import { useRatesStore } from "@/stores/select-rate"
 
 import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
-import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
-import { ErrorCircleIcon, PriceTagIcon } from "@/components/Icons"
+import { IconForFeatureCode } from "@/components/HotelReservation/utils"
 import ImageGallery from "@/components/ImageGallery"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -19,8 +20,8 @@ import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import { cardVariants } from "./cardVariants"
 import FlexibilityOption from "./FlexibilityOption"
-import FlexibilityOptionPoints from "./FlexibilityOptionPoints"
 import FlexibilityOptionCheque from "./FlexibilityOptionCheque"
+import FlexibilityOptionPoints from "./FlexibilityOptionPoints"
 import FlexibilityOptionVoucher from "./FlexibilityOptionVoucher"
 import RoomSize from "./RoomSize"
 
@@ -211,11 +212,12 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
             .filter((feature) => selectedPackage === feature.code)
             .map((feature) => (
               <span className={styles.chip} key={feature.code}>
-                {createElement(getIconForFeatureCode(feature.code), {
-                  color: "burgundy",
-                  height: 16,
-                  width: 16,
-                })}
+                {createElement(() => (
+                  <IconForFeatureCode
+                    featureCode={feature.code}
+                    color={"Icon/Interactive/Default"}
+                  />
+                ))}
               </span>
             ))}
         </div>
@@ -271,7 +273,11 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
             <div></div>
             <div className={styles.noRoomsContainer}>
               <div className={styles.noRooms}>
-                <ErrorCircleIcon color="red" width={16} />
+                <MaterialIcon
+                  icon="error"
+                  color="Icon/Interactive/Accent"
+                  size={16}
+                />
                 <Caption color="uiTextHighContrast" type="bold">
                   {intl.formatMessage({
                     id: "This room is not available",
@@ -288,7 +294,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
               )}
               {bookingCode ? (
                 <span className={!isBookingCodeRate ? styles.strikedText : ""}>
-                  <PriceTagIcon />
+                  <MaterialIcon icon="sell" />
                   {bookingCode}
                 </span>
               ) : null}
@@ -315,15 +321,18 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
                 roomTypeCode: roomConfiguration.roomTypeCode,
                 title: rateTitle,
                 rateName:
-                  isBookingCodeRate || isRedemption ||
+                  isBookingCodeRate ||
+                  isRedemption ||
                   product.voucher ||
                   product.bonusCheque
                     ? rateDefinition?.title
                     : undefined,
               }
-              return (<>
-                  {isRedemption &&
-                  <FlexibilityOptionPoints key={product.rate} {...props} />}
+              return (
+                <>
+                  {isRedemption && (
+                    <FlexibilityOptionPoints key={product.rate} {...props} />
+                  )}
                   {product.voucher ? (
                     <FlexibilityOptionVoucher
                       key={product.rate}

apps/scandic-web/components/HotelReservation/TripAdvisorChip/index.tsx

@@ -1,4 +1,5 @@
-import { TripAdvisorIcon } from "@/components/Icons"
+import { TripadvisorIcon } from "@scandic-hotels/design-system/Icons"
+
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./tripAdvisorChip.module.css"
@@ -10,7 +11,7 @@ export default function TripAdvisorChip({ rating }: TripAdvisorProps) {
     // Wrapping the chip in a transparent container with some padding to increase the touch target
     <div className={styles.container}>
       <div className={styles.tripAdvisor}>
-        <TripAdvisorIcon color="burgundy" />
+        <TripadvisorIcon color="Icon/Interactive/Default" />
         <Caption color="burgundy">{rating}</Caption>
       </div>
     </div>

apps/scandic-web/components/HotelReservation/utils.tsx

@@ -1,6 +1,9 @@
-import { ChildBedTypeEnum } from "@/constants/booking"
+import {
+  MaterialIcon,
+  type MaterialIconSetIconProps,
+} from "@scandic-hotels/design-system/Icons"
 
-import { AllergyIcon, PetsIcon, WheelchairIcon } from "@/components/Icons"
+import { ChildBedTypeEnum } from "@/constants/booking"
 
 import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
 import {
@@ -9,15 +12,21 @@ import {
 } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
 
-export function getIconForFeatureCode(featureCode: RoomPackageCodes) {
+interface IconForFeatureCodeProps {
+  featureCode: RoomPackageCodes
+}
+export function IconForFeatureCode({
+  featureCode,
+  ...props
+}: IconForFeatureCodeProps & MaterialIconSetIconProps): JSX.Element {
   switch (featureCode) {
     case RoomPackageCodeEnum.ACCESSIBILITY_ROOM:
-      return WheelchairIcon
+      return <MaterialIcon icon="accessible" {...props} />
     case RoomPackageCodeEnum.ALLERGY_ROOM:
-      return AllergyIcon
+      return <MaterialIcon icon="mode_fan" {...props} />
     case RoomPackageCodeEnum.PET_ROOM:
     default:
-      return PetsIcon
+      return <MaterialIcon icon="pets" {...props} />
   }
 }