Merged in feat/sw-3145-move-iconbyiconname-to-design-system (pull request #2589)

Move icon components to design-system * Move icon components to design-system Approved-by: Hrishikesh Vaipurkar
2025-08-04 11:32:00 +00:00
parent b7f2afb5e4
commit b52a3f5847
29 changed files with 374 additions and 382 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts
@@ -1,9 +1,9 @@
 // import { REWARD_IDS } from "@scandic-hotels/trpc/types/rewards"

+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
+import { IllustrationByIconName } from "@scandic-hotels/design-system/Icons/IllustrationByIconName"
 import { REWARD_IDS, type RewardId } from "@scandic-hotels/trpc/types/rewards"

-import { IconName } from "@/components/Icons/iconName"
-import { IllustrationByIconName } from "@/components/Icons/IllustrationByIconName"
 import { isValidRewardId } from "@/utils/rewards"

 import type { IconProps } from "@scandic-hotels/design-system/Icons"
--- a/apps/scandic-web/components/Blocks/Essentials/index.tsx
+++ b/apps/scandic-web/components/Blocks/Essentials/index.tsx
@@ -1,9 +1,8 @@
 import { cx } from "class-variance-authority"

+import IconByCSSelect from "@scandic-hotels/design-system/Icons/IconByCSSelect"
 import { Typography } from "@scandic-hotels/design-system/Typography"

-import IconByCSSelect from "@/components/Icons/IconByCSSelect"
-
 import styles from "./essentials.module.css"

 import type { EssentialsBlock } from "@scandic-hotels/trpc/types/campaignPage"
--- a/apps/scandic-web/components/Blocks/UspGrid/index.tsx
+++ b/apps/scandic-web/components/Blocks/UspGrid/index.tsx
@@ -1,4 +1,5 @@
-import { IconByIconName } from "@/components/Icons/IconByIconName"
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
+
 import JsonToHtml from "@/components/JsonToHtml"

 import { renderOptions } from "./renderOptions"
--- a/apps/scandic-web/components/Blocks/UspGrid/utils.ts
+++ b/apps/scandic-web/components/Blocks/UspGrid/utils.ts
@@ -1,4 +1,4 @@
-import { IconName } from "@/components/Icons/iconName"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"

 import type { UspIcon } from "@/types/components/blocks/uspGrid"

--- a/apps/scandic-web/components/ContentType/HotelPage/data.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/data.tsx
@@ -1,8 +1,7 @@
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { FacilityEnum } from "@scandic-hotels/trpc/enums/facilities"

-import { IconByIconName } from "@/components/Icons/IconByIconName"
-import { IconName } from "@/components/Icons/iconName"
-
 import type {
  IconProps,
  NucleoIconProps,
--- a/apps/scandic-web/components/Footer/Details/SocialLink/index.tsx
+++ b/apps/scandic-web/components/Footer/Details/SocialLink/index.tsx
@@ -1,11 +1,13 @@
 "use client"

-import { IconByIconName } from "@/components/Icons/IconByIconName"
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
+
 import { trackSocialMediaClick } from "@/utils/tracking"

+import type { IconName } from "@scandic-hotels/design-system/Icons/iconName"
+
 import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
 import type { SocialLinkProps } from "@/types/components/footer/socialLink"
-import type { IconName } from "@/components/Icons/iconName"

 function SocialIcon({ iconName }: SocialIconsProps) {
  const SocialIcon = (
--- a/apps/scandic-web/components/Header/HeaderLink/index.tsx
+++ b/apps/scandic-web/components/Header/HeaderLink/index.tsx
@@ -2,10 +2,9 @@

 import Link from "next/link"

+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"

-import { IconByIconName } from "@/components/Icons/IconByIconName"
-
 import styles from "./headerLink.module.css"

 import type { HeaderLinkProps } from "@/types/components/header/headerLink"
--- a/apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx
@@ -6,11 +6,11 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"

 import { findMyBooking } from "@scandic-hotels/common/constants/routes/findMyBooking"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"

 import { customerService } from "@/constants/webHrefs"
 import useDropdownStore from "@/stores/main-menu"

-import { IconName } from "@/components/Icons/iconName"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
--- a/apps/scandic-web/components/Header/TopLink/index.tsx
+++ b/apps/scandic-web/components/Header/TopLink/index.tsx
@@ -1,4 +1,4 @@
-import { IconName } from "@/components/Icons/iconName"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"

 import HeaderLink from "../HeaderLink"

--- a/apps/scandic-web/components/Header/TopMenu/index.tsx
+++ b/apps/scandic-web/components/Header/TopMenu/index.tsx
@@ -1,9 +1,9 @@
 import { findMyBooking } from "@scandic-hotels/common/constants/routes/findMyBooking"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"

 import { getHeader } from "@/lib/trpc/memoizedRequests"

-import { IconName } from "@/components/Icons/iconName"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
--- a/apps/scandic-web/components/Icons/IconByCSSelect.tsx
+++ b/apps/scandic-web/components/Icons/IconByCSSelect.tsx
@@ -1,92 +0,0 @@
-import BouquetIcon from "@scandic-hotels/design-system/Icons/BouquetIcon"
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
-import {
-  MaterialIcon,
-  type MaterialIconProps,
-} from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import PalmTreeIcon from "@scandic-hotels/design-system/Icons/PalmTreeIcon"
-
-import type { IconProps } from "@scandic-hotels/design-system/Icons"
-
-interface IconByCSSelectProps extends IconProps {
-  identifier: string
-}
-
-export default function IconByCSSelect({
-  identifier,
-  color = "CurrentColor",
-  size = 24,
-  ...props
-}: IconByCSSelectProps) {
-  switch (identifier) {
-    // These are custom icons
-    case "discount-2-2":
-      return <DiscountIcon size={size} color={color} {...props} />
-    case "bouquet":
-      return <BouquetIcon size={size} color={color} {...props} />
-    case "palm_tree":
-      return <PalmTreeIcon size={size} color={color} {...props} />
-
-    // These are all Material Icons
-    case "electric_car":
-    case "golf_course":
-    case "museum":
-    case "spa":
-    case "airplane_ticket":
-    case "apartment":
-    case "attractions":
-    case "award_star":
-    case "beach_access":
-    case "box":
-    case "deck":
-    case "directions_run":
-    case "directions_subway":
-    case "downhill_skiing":
-    case "emoji_transportation":
-    case "exercise":
-    case "family_restroom":
-    case "festival":
-    case "forest":
-    case "garage":
-    case "hiking":
-    case "houseboat":
-    case "kayaking":
-    case "landscape":
-    case "location_city":
-    case "location_on":
-    case "loyalty":
-    case "music_note":
-    case "night_shelter":
-    case "nightlife":
-    case "pedal_bike":
-    case "pets":
-    case "pool":
-    case "recommend":
-    case "redeem":
-    case "restaurant":
-    case "sauna":
-    case "sell":
-    case "shopping_bag":
-    case "sports_handball":
-    case "sports_tennis":
-    case "theater_comedy":
-    case "things_to_do":
-    case "tram":
-    case "transit_ticket":
-    case "travel":
-    case "travel_luggage_and_bags":
-    case "favorite":
-      return (
-        <MaterialIcon
-          icon={identifier as MaterialIconProps["icon"]}
-          size={size}
-          color={color}
-          {...props}
-        />
-      )
-    default:
-      return (
-        <MaterialIcon size={size} icon="favorite" color={color} {...props} />
-      )
-  }
-}
--- a/apps/scandic-web/components/Icons/IllustrationByIconName.ts
+++ b/apps/scandic-web/components/Icons/IllustrationByIconName.ts
@@ -1,48 +0,0 @@
-import BedIcon from "@scandic-hotels/design-system/Icons/BedIcon"
-import CoinIcon from "@scandic-hotels/design-system/Icons/CoinIcon"
-import CroissantCoffeeEggIcon from "@scandic-hotels/design-system/Icons/CroissantCoffeeEggIcon"
-import CutleryOneIcon from "@scandic-hotels/design-system/Icons/CutleryOneIcon"
-import CutleryTwoIcon from "@scandic-hotels/design-system/Icons/CutleryTwoIcon"
-import GiftOpenIcon from "@scandic-hotels/design-system/Icons/GiftOpenIcon"
-import HandKeyIcon from "@scandic-hotels/design-system/Icons/HandKeyIcon"
-import HotelNightIcon from "@scandic-hotels/design-system/Icons/HotelNightIcon"
-import KidsIcon from "@scandic-hotels/design-system/Icons/KidsIcon"
-import KidsMocktailIcon from "@scandic-hotels/design-system/Icons/KidsMocktailIcon"
-import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
-import MoneyHandIcon from "@scandic-hotels/design-system/Icons/MoneyHandIcon"
-import VoucherIcon from "@scandic-hotels/design-system/Icons/VoucherIcon"
-
-import { IconName } from "./iconName"
-
-export function IllustrationByIconName(iconName: IconName | null) {
-  switch (iconName) {
-    case IconName.Kids:
-      return KidsIcon
-    case IconName.KidsMocktail:
-      return KidsMocktailIcon
-    case IconName.MagicWand:
-      return MagicWandIcon
-    case IconName.MoneyHand:
-      return MoneyHandIcon
-    case IconName.HandKey:
-      return HandKeyIcon
-    case IconName.HotelNight:
-      return HotelNightIcon
-    case IconName.GiftOpen:
-      return GiftOpenIcon
-    case IconName.CutleryOne:
-      return CutleryOneIcon
-    case IconName.CutleryTwo:
-      return CutleryTwoIcon
-    case IconName.CroissantCoffeeEgg:
-      return CroissantCoffeeEggIcon
-    case IconName.Coin:
-      return CoinIcon
-    case IconName.Bed:
-      return BedIcon
-    case IconName.Voucher:
-      return VoucherIcon
-    default:
-      return null
-  }
-}
--- a/apps/scandic-web/components/Icons/iconName.ts
+++ b/apps/scandic-web/components/Icons/iconName.ts
@@ -1,181 +0,0 @@
-export enum IconName {
-  Accesories = "Accesories",
-  Accessibility = "Accessibility",
-  AccountCircle = "AccountCircle",
-  Air = "Air",
-  AirConAirCooling = "AirConAirCooling",
-  AirConditioningInRoom = "AirConditioningInRoom",
-  Airplane = "Airplane",
-  ArmChair = "ArmChair",
-  ArrowLeft = "ArrowLeft",
-  ArrowLeftSmall = "ArrowLeftSmall",
-  ArrowFrom = "ArrowFrom",
-  ArrowRight = "ArrowRight",
-  ArrowRightSmall = "ArrowRightSmall",
-  ArrowTo = "ArrowTo",
-  AwardStar = "AwardStar",
-  Bar = "Bar",
-  BathroomCabinet = "BathroomCabinet",
-  Beach = "Beach",
-  BeautySalon = "BeautySalon",
-  Bed = "Bed",
-  Bike = "Bike",
-  Bouquet = "Bouquet",
-  Bowling = "Bowling",
-  Business = "Business",
-  BusinessCentre = "BusinessCentre",
-  Calendar = "Calendar",
-  Camera = "Camera",
-  CashFree = "CashFree",
-  Cellphone = "Cellphone",
-  Check = "Check",
-  CheckCircle = "CheckCircle",
-  ChevronDown = "ChevronDown",
-  ChevronDownSmall = "ChevronDownSmall",
-  ChevronLeft = "ChevronLeft",
-  ChevronLeftSmall = "ChevronLeftSmall",
-  ChevronRight = "ChevronRight",
-  ChevronRightSmall = "ChevronRightSmall",
-  ChevronUp = "ChevronUp",
-  ChevronUpSmall = "ChevronUpSmall",
-  Chips = "Chips",
-  City = "City",
-  Close = "Close",
-  CloseLarge = "CloseLarge",
-  CoffeeAlt = "CoffeeAlt",
-  CoffeeInReceptionAtCharge = "CoffeeInReceptionAtCharge",
-  CoffeeShop = "CoffeeShop",
-  Coin = "Coin",
-  ComplimentaryColdRefreshments = "ComplimentaryColdRefreshments",
-  Concierge = "Concierge",
-  ConferenceRoom = "ConferenceRoom",
-  ConvenienceStore24h = "ConvenienceStore24h",
-  ConventionCentre = "ConventionCentre",
-  CroissantCoffeeEgg = "CroissantCoffeeEgg",
-  CrossCircle = "CrossCircle",
-  CrossCircleOutline = "CrossCircleOutline",
-  Cultural = "Cultural",
-  CutleryOne = "CutleryOne",
-  CutleryTwo = "CutleryTwo",
-  Deck = "Deck",
-  Desk = "Desk",
-  Diamond = "Diamond",
-  Dining = "Dining",
-  DirectDial = "DirectDial",
-  Directions = "Directions",
-  DoorOpen = "DoorOpen",
-  Dresser = "Dresser",
-  ElectricBike = "ElectricBike",
-  ElectricCar = "ElectricCar",
-  Elevator = "Elevator",
-  Email = "Email",
-  ExternalLink = "ExternalLink",
-  ExtraFamilyFriendly = "ExtraFamilyFriendly",
-  EyeHide = "EyeHide",
-  EyeShow = "EyeShow",
-  Facebook = "Facebook",
-  Fan = "Fan",
-  Fax = "Fax",
-  Fitness = "Fitness",
-  FoodDrinks247 = "FoodDrinks247",
-  Footstool = "Footstool",
-  Gallery = "Gallery",
-  Gaming = "Gaming",
-  Garage = "Garage",
-  Gift = "Gift",
-  GiftOpen = "GiftOpen",
-  Globe = "Globe",
-  Golf = "Golf",
-  Guard = "Guard",
-  Hairdresser = "Hairdresser",
-  HairdryerInRoomAllScandic = "HairdryerInRoomAllScandic",
-  HandKey = "HandKey",
-  Hanger = "Hanger",
-  HangerAlt = "HangerAlt",
-  Heat = "Heat",
-  Heart = "Heart",
-  Hiking = "Hiking",
-  HotelNight = "HotelNight",
-  House = "House",
-  Houseboat = "Houseboat",
-  IceMachine = "IceMachine",
-  Image = "Image",
-  InfoCircle = "InfoCircle",
-  Instagram = "Instagram",
-  Ironing = "Ironing",
-  Jacuzzi = "Jaccuzzi",
-  Kayaking = "Kayaking",
-  Kettle = "Kettle",
-  Kids = "Kids",
-  KidsMocktail = "KidsMocktail",
-  Landscape = "Landscape",
-  Lamp = "Lamp",
-  LaptopSafe = "LaptopSafe",
-  LaundryMachine = "LaundryMachine",
-  Link = "Link",
-  LocalBar = "LocalBar",
-  Location = "Location",
-  Lock = "Lock",
-  Breakfast = "Breakfast",
-  Luggage = "Luggage",
-  LuggageLockers = "LuggageLockers",
-  MagicWand = "MagicWand",
-  Map = "Map",
-  Massage = "Massage",
-  Minibar = "Minibar",
-  Minus = "Minus",
-  MoneyHand = "MoneyHand",
-  Museum = "Museum",
-  Nature = "Nature",
-  Nightlife = "Nightlife",
-  NightShelter = "NightShelter",
-  NonSmoking = "NonSmoking",
-  NoSmoking = "NoSmoking",
-  OpenInNew = "OpenInNew",
-  OpenInNewSmall = "OpenInNewSmall",
-  OutdoorFurniture = "OutdoorFurniture",
-  PalmTree = "Palmtree",
-  Parking = "Parking",
-  ParkingOutdoor = "ParkingOutdoor",
-  Person = "Person",
-  Pets = "Pets",
-  Phone = "Phone",
-  Plus = "Plus",
-  PlusCircle = "PlusCircle",
-  Popcorn = "Popcorn",
-  PriceTag = "PriceTag",
-  RecordPlayer = "RecordPlayer",
-  Restaurant = "Restaurant",
-  RoomService = "RoomService",
-  SafetyBox = "SafetyBox",
-  Sauna = "Sauna",
-  Search = "Search",
-  Service = "Service",
-  Shopping = "Shopping",
-  Skateboarding = "Skateboarding",
-  Skiing = "Skiing",
-  Smoking = "Smoking",
-  Snowflake = "Snowflake",
-  Spa = "Spa",
-  Sports = "Sports",
-  Star = "Star",
-  StarFilled = "StarFilled",
-  Street = "Street",
-  Swim = "Swim",
-  Theatre = "Theatre",
-  Swipe = "Swipe",
-  Thermostat = "Thermostat",
-  Toilet = "Toilet",
-  Ticket = "Ticket",
-  Train = "Train",
-  Tripadvisor = "Tripadvisor",
-  Tshirt = "Tshirt",
-  TshirtWash = "TshirtWash",
-  TvCasting = "TvCasting",
-  TVRemote = "TVRemote",
-  Voucher = "Voucher",
-  WarningTriangle = "WarningTriangle",
-  Wheelchair = "Wheelchair",
-  Wifi = "Wifi",
-  Kitchen = "Kitchen",
-}
--- a/apps/scandic-web/components/Maps/Markers/Poi/index.tsx
+++ b/apps/scandic-web/components/Maps/Markers/Poi/index.tsx
@@ -1,4 +1,4 @@
-import { IconByIconName } from "@/components/Icons/IconByIconName"
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"

 import { getIconByPoiGroupAndCategory } from "../utils"
 import { poiVariants } from "./variants"
--- a/apps/scandic-web/components/Maps/Markers/utils.ts
+++ b/apps/scandic-web/components/Maps/Markers/utils.ts
@@ -1,7 +1,6 @@
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { PointOfInterestGroupEnum } from "@scandic-hotels/trpc/enums/pointOfInterest"

-import { IconName } from "@/components/Icons/iconName"
-
 export function getIconByPoiGroupAndCategory(
  group: PointOfInterestGroupEnum,
  category?: string
--- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx
+++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx
@@ -2,10 +2,10 @@

 import { useIntl } from "react-intl"

+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import ButtonLink from "@/components/ButtonLink"
-import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"

 import styles from "./sidePeekAccordion.module.css"
--- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx
+++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx
@@ -3,10 +3,10 @@
 import { useIntl } from "react-intl"

 import { isDefined } from "@scandic-hotels/common/utils/isDefined"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"

-import { IconName } from "@/components/Icons/iconName"
 import OpeningHours from "@/components/OpeningHours"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"

--- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx
+++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx
@@ -3,9 +3,9 @@
 import { useIntl } from "react-intl"

 import { Divider } from "@scandic-hotels/design-system/Divider"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"

-import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"

 import styles from "./sidePeekAccordion.module.css"
--- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx
+++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx
@@ -2,10 +2,10 @@

 import { useIntl } from "react-intl"

+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import ButtonLink from "@/components/ButtonLink"
-import { IconName } from "@/components/Icons/iconName"
 import ParkingInformation from "@/components/ParkingInformation"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"

--- a/apps/scandic-web/components/TabFilters/index.tsx
+++ b/apps/scandic-web/components/TabFilters/index.tsx
@@ -3,11 +3,10 @@
 import { cx } from "class-variance-authority"

 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
+import IconByCSSelect from "@scandic-hotels/design-system/Icons/IconByCSSelect"

 import useScrollShadows from "@/hooks/useScrollShadows"

-import IconByCSSelect from "../Icons/IconByCSSelect"
-
 import styles from "./tabFilters.module.css"

 interface Filter {
--- a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts
+++ b/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts
@@ -1,7 +1,7 @@
+import type { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import type { VariantProps } from "class-variance-authority"
 import type { ReactNode } from "react"

-import type { IconName } from "@/components/Icons/iconName"
 import type { accordionItemVariants } from "./variants"

 export interface AccordionItemProps
--- a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
@@ -3,10 +3,10 @@
 import { useRef } from "react"

 import Body from "@scandic-hotels/design-system/Body"
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"

-import { IconByIconName } from "@/components/Icons/IconByIconName"
 import { trackAccordionClick } from "@/utils/tracking"

 import { accordionItemVariants } from "./variants"
--- a/apps/scandic-web/types/components/footer/socialIcons.ts
+++ b/apps/scandic-web/types/components/footer/socialIcons.ts
@@ -1,4 +1,4 @@
-import type { IconName } from "@/components/Icons/iconName"
+import type { IconName } from "@scandic-hotels/design-system/Icons/iconName"

 export type SocialIconsProps = {
  iconName: IconName
--- a/apps/scandic-web/types/components/header/headerLink.ts
+++ b/apps/scandic-web/types/components/header/headerLink.ts
@@ -1,7 +1,6 @@
+import type { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import type { LinkProps } from "next/link"

-import type { IconName } from "@/components/Icons/iconName"
-
 export interface HeaderLinkProps extends React.PropsWithChildren {
  href: LinkProps["href"]
  iconName: IconName | null
--- a/packages/design-system/lib/components/Icons/IconByCSSelect.tsx
+++ b/packages/design-system/lib/components/Icons/IconByCSSelect.tsx
@@ -0,0 +1,89 @@
+import BouquetIcon from './Nucleo/Benefits/bouquet'
+import DiscountIcon from './Nucleo/Benefits/discount-2-2'
+import { MaterialIcon, type MaterialIconProps } from './MaterialIcon'
+import PalmTreeIcon from './Nucleo/Experiences/palm-tree-2'
+
+import type { IconProps } from './icon'
+
+interface IconByCSSelectProps extends IconProps {
+  identifier: string
+}
+
+export default function IconByCSSelect({
+  identifier,
+  color = 'CurrentColor',
+  size = 24,
+  ...props
+}: IconByCSSelectProps) {
+  switch (identifier) {
+    // These are custom icons
+    case 'discount-2-2':
+      return <DiscountIcon size={size} color={color} {...props} />
+    case 'bouquet':
+      return <BouquetIcon size={size} color={color} {...props} />
+    case 'palm_tree':
+      return <PalmTreeIcon size={size} color={color} {...props} />
+
+    // These are all Material Icons
+    case 'electric_car':
+    case 'golf_course':
+    case 'museum':
+    case 'spa':
+    case 'airplane_ticket':
+    case 'apartment':
+    case 'attractions':
+    case 'award_star':
+    case 'beach_access':
+    case 'box':
+    case 'deck':
+    case 'directions_run':
+    case 'directions_subway':
+    case 'downhill_skiing':
+    case 'emoji_transportation':
+    case 'exercise':
+    case 'family_restroom':
+    case 'festival':
+    case 'forest':
+    case 'garage':
+    case 'hiking':
+    case 'houseboat':
+    case 'kayaking':
+    case 'landscape':
+    case 'location_city':
+    case 'location_on':
+    case 'loyalty':
+    case 'music_note':
+    case 'night_shelter':
+    case 'nightlife':
+    case 'pedal_bike':
+    case 'pets':
+    case 'pool':
+    case 'recommend':
+    case 'redeem':
+    case 'restaurant':
+    case 'sauna':
+    case 'sell':
+    case 'shopping_bag':
+    case 'sports_handball':
+    case 'sports_tennis':
+    case 'theater_comedy':
+    case 'things_to_do':
+    case 'tram':
+    case 'transit_ticket':
+    case 'travel':
+    case 'travel_luggage_and_bags':
+    case 'favorite':
+      return (
+        <MaterialIcon
+          icon={identifier as MaterialIconProps['icon']}
+          size={size}
+          color={color}
+          {...props}
+        />
+      )
+    default:
+      return (
+        <MaterialIcon size={size} icon="favorite" color={color} {...props} />
+      )
+  }
+}
--- a/packages/design-system/lib/components/Icons/IconByIconName.tsx
+++ b/packages/design-system/lib/components/Icons/IconByIconName.tsx
@@ -1,36 +1,30 @@
-import BathroomCabinetIcon from "@scandic-hotels/design-system/Icons/BathroomCabinetIcon"
-import BouquetIcon from "@scandic-hotels/design-system/Icons/BouquetIcon"
-import BowlingPinsIcon from "@scandic-hotels/design-system/Icons/BowlingPinsIcon"
-import ChipsIcon from "@scandic-hotels/design-system/Icons/ChipsIcon"
-import ConferenceRoomIcon from "@scandic-hotels/design-system/Icons/ConferenceRoomIcon"
-import DoorIcon from "@scandic-hotels/design-system/Icons/DoorIcon"
-import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
-import FootStoolIcon from "@scandic-hotels/design-system/Icons/FootStoolIcon"
-import HairdresserIcon from "@scandic-hotels/design-system/Icons/HairdresserIcon"
-import HairdryerIcon from "@scandic-hotels/design-system/Icons/HairdryerIcon"
-import IceMachineIcon from "@scandic-hotels/design-system/Icons/IceMachineIcon"
-import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
-import MassageIcon from "@scandic-hotels/design-system/Icons/MassageIcon"
-import {
-  MaterialIcon,
-  type MaterialIconSetIconProps,
-} from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import PalmTreeIcon from "@scandic-hotels/design-system/Icons/PalmTreeIcon"
-import PopcornIcon from "@scandic-hotels/design-system/Icons/PopcornIcon"
-import RecordPlayerIcon from "@scandic-hotels/design-system/Icons/RecordPlayerIcon"
-import RoadIcon from "@scandic-hotels/design-system/Icons/RoadIcon"
-import SafetyBoxIcon from "@scandic-hotels/design-system/Icons/SafetyBoxIcon"
-import ToiletIcon from "@scandic-hotels/design-system/Icons/ToiletIcon"
-import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
-import UserPoliceIcon from "@scandic-hotels/design-system/Icons/UserPoliceIcon"
+import BathroomCabinetIcon from './Nucleo/Amenities_Facilities/bathroom-cabinet-2'
+import BouquetIcon from './Nucleo/Benefits/bouquet'
+import BowlingPinsIcon from './Nucleo/Experiences/bowling-pins'
+import ChipsIcon from './Nucleo/Food/chips-3'
+import ConferenceRoomIcon from './Nucleo/Amenities_Facilities/conference-room'
+import DoorIcon from './Nucleo/Amenities_Facilities/door-2'
+import FacebookIcon from './Customised/Socials/Facebook'
+import FootStoolIcon from './Customised/Amenities_Facilities/FootStool'
+import HairdresserIcon from './Nucleo/Amenities_Facilities/hairdresser-1'
+import HairdryerIcon from './Customised/Amenities_Facilities/Hairdryer'
+import IceMachineIcon from './Customised/Amenities_Facilities/IceMachine'
+import InstagramIcon from './Customised/Socials/Instagram'
+import MassageIcon from './Customised/Amenities_Facilities/Massage'
+import { MaterialIcon, type MaterialIconSetIconProps } from './MaterialIcon'
+import PalmTreeIcon from './Nucleo/Experiences/palm-tree-2'
+import PopcornIcon from './Nucleo/Food/popcorn-2'
+import RecordPlayerIcon from './Nucleo/Amenities_Facilities/record-player-3'
+import RoadIcon from './Customised/Amenities_Facilities/Road'
+import SafetyBoxIcon from './Customised/Amenities_Facilities/SafetyBox'
+import ToiletIcon from './Nucleo/Amenities_Facilities/toilet-2'
+import TripadvisorIcon from './Customised/Socials/Tripadvisor'
+import UserPoliceIcon from './Nucleo/Amenities_Facilities/user-police-2'

-import { IconName } from "./iconName"
+import { IconName } from './iconName'

-import type {
-  IconProps,
-  NucleoIconProps,
-} from "@scandic-hotels/design-system/Icons"
-import type { JSX } from "react"
+import type { IconProps, NucleoIconProps } from './icon'
+import type { JSX } from 'react'

 interface IconByIconNameProps {
  iconName: IconName | null
--- a/packages/design-system/lib/components/Icons/IllustrationByIconName.ts
+++ b/packages/design-system/lib/components/Icons/IllustrationByIconName.ts
@@ -0,0 +1,48 @@
+import BedIcon from './Illustrations/Bed'
+import CoinIcon from './Illustrations/Coin'
+import CroissantCoffeeEggIcon from './Illustrations/CroissantCoffeeEgg'
+import CutleryOneIcon from './Illustrations/CutleryOne'
+import CutleryTwoIcon from './Illustrations/CutleryTwo'
+import GiftOpenIcon from './Illustrations/GiftOpen'
+import HandKeyIcon from './Illustrations/HandKey'
+import HotelNightIcon from './Illustrations/HotelNight'
+import KidsIcon from './Illustrations/Kids'
+import KidsMocktailIcon from './Illustrations/KidsMocktail'
+import MagicWandIcon from './Illustrations/MagicWand'
+import MoneyHandIcon from './Illustrations/MoneyHand'
+import VoucherIcon from './Illustrations/Voucher'
+
+import { IconName } from './iconName'
+
+export function IllustrationByIconName(iconName: IconName | null) {
+  switch (iconName) {
+    case IconName.Kids:
+      return KidsIcon
+    case IconName.KidsMocktail:
+      return KidsMocktailIcon
+    case IconName.MagicWand:
+      return MagicWandIcon
+    case IconName.MoneyHand:
+      return MoneyHandIcon
+    case IconName.HandKey:
+      return HandKeyIcon
+    case IconName.HotelNight:
+      return HotelNightIcon
+    case IconName.GiftOpen:
+      return GiftOpenIcon
+    case IconName.CutleryOne:
+      return CutleryOneIcon
+    case IconName.CutleryTwo:
+      return CutleryTwoIcon
+    case IconName.CroissantCoffeeEgg:
+      return CroissantCoffeeEggIcon
+    case IconName.Coin:
+      return CoinIcon
+    case IconName.Bed:
+      return BedIcon
+    case IconName.Voucher:
+      return VoucherIcon
+    default:
+      return null
+  }
+}
--- a/packages/design-system/lib/components/Icons/iconName.ts
+++ b/packages/design-system/lib/components/Icons/iconName.ts
@@ -0,0 +1,181 @@
+export enum IconName {
+  Accesories = 'Accesories',
+  Accessibility = 'Accessibility',
+  AccountCircle = 'AccountCircle',
+  Air = 'Air',
+  AirConAirCooling = 'AirConAirCooling',
+  AirConditioningInRoom = 'AirConditioningInRoom',
+  Airplane = 'Airplane',
+  ArmChair = 'ArmChair',
+  ArrowLeft = 'ArrowLeft',
+  ArrowLeftSmall = 'ArrowLeftSmall',
+  ArrowFrom = 'ArrowFrom',
+  ArrowRight = 'ArrowRight',
+  ArrowRightSmall = 'ArrowRightSmall',
+  ArrowTo = 'ArrowTo',
+  AwardStar = 'AwardStar',
+  Bar = 'Bar',
+  BathroomCabinet = 'BathroomCabinet',
+  Beach = 'Beach',
+  BeautySalon = 'BeautySalon',
+  Bed = 'Bed',
+  Bike = 'Bike',
+  Bouquet = 'Bouquet',
+  Bowling = 'Bowling',
+  Business = 'Business',
+  BusinessCentre = 'BusinessCentre',
+  Calendar = 'Calendar',
+  Camera = 'Camera',
+  CashFree = 'CashFree',
+  Cellphone = 'Cellphone',
+  Check = 'Check',
+  CheckCircle = 'CheckCircle',
+  ChevronDown = 'ChevronDown',
+  ChevronDownSmall = 'ChevronDownSmall',
+  ChevronLeft = 'ChevronLeft',
+  ChevronLeftSmall = 'ChevronLeftSmall',
+  ChevronRight = 'ChevronRight',
+  ChevronRightSmall = 'ChevronRightSmall',
+  ChevronUp = 'ChevronUp',
+  ChevronUpSmall = 'ChevronUpSmall',
+  Chips = 'Chips',
+  City = 'City',
+  Close = 'Close',
+  CloseLarge = 'CloseLarge',
+  CoffeeAlt = 'CoffeeAlt',
+  CoffeeInReceptionAtCharge = 'CoffeeInReceptionAtCharge',
+  CoffeeShop = 'CoffeeShop',
+  Coin = 'Coin',
+  ComplimentaryColdRefreshments = 'ComplimentaryColdRefreshments',
+  Concierge = 'Concierge',
+  ConferenceRoom = 'ConferenceRoom',
+  ConvenienceStore24h = 'ConvenienceStore24h',
+  ConventionCentre = 'ConventionCentre',
+  CroissantCoffeeEgg = 'CroissantCoffeeEgg',
+  CrossCircle = 'CrossCircle',
+  CrossCircleOutline = 'CrossCircleOutline',
+  Cultural = 'Cultural',
+  CutleryOne = 'CutleryOne',
+  CutleryTwo = 'CutleryTwo',
+  Deck = 'Deck',
+  Desk = 'Desk',
+  Diamond = 'Diamond',
+  Dining = 'Dining',
+  DirectDial = 'DirectDial',
+  Directions = 'Directions',
+  DoorOpen = 'DoorOpen',
+  Dresser = 'Dresser',
+  ElectricBike = 'ElectricBike',
+  ElectricCar = 'ElectricCar',
+  Elevator = 'Elevator',
+  Email = 'Email',
+  ExternalLink = 'ExternalLink',
+  ExtraFamilyFriendly = 'ExtraFamilyFriendly',
+  EyeHide = 'EyeHide',
+  EyeShow = 'EyeShow',
+  Facebook = 'Facebook',
+  Fan = 'Fan',
+  Fax = 'Fax',
+  Fitness = 'Fitness',
+  FoodDrinks247 = 'FoodDrinks247',
+  Footstool = 'Footstool',
+  Gallery = 'Gallery',
+  Gaming = 'Gaming',
+  Garage = 'Garage',
+  Gift = 'Gift',
+  GiftOpen = 'GiftOpen',
+  Globe = 'Globe',
+  Golf = 'Golf',
+  Guard = 'Guard',
+  Hairdresser = 'Hairdresser',
+  HairdryerInRoomAllScandic = 'HairdryerInRoomAllScandic',
+  HandKey = 'HandKey',
+  Hanger = 'Hanger',
+  HangerAlt = 'HangerAlt',
+  Heat = 'Heat',
+  Heart = 'Heart',
+  Hiking = 'Hiking',
+  HotelNight = 'HotelNight',
+  House = 'House',
+  Houseboat = 'Houseboat',
+  IceMachine = 'IceMachine',
+  Image = 'Image',
+  InfoCircle = 'InfoCircle',
+  Instagram = 'Instagram',
+  Ironing = 'Ironing',
+  Jacuzzi = 'Jaccuzzi',
+  Kayaking = 'Kayaking',
+  Kettle = 'Kettle',
+  Kids = 'Kids',
+  KidsMocktail = 'KidsMocktail',
+  Landscape = 'Landscape',
+  Lamp = 'Lamp',
+  LaptopSafe = 'LaptopSafe',
+  LaundryMachine = 'LaundryMachine',
+  Link = 'Link',
+  LocalBar = 'LocalBar',
+  Location = 'Location',
+  Lock = 'Lock',
+  Breakfast = 'Breakfast',
+  Luggage = 'Luggage',
+  LuggageLockers = 'LuggageLockers',
+  MagicWand = 'MagicWand',
+  Map = 'Map',
+  Massage = 'Massage',
+  Minibar = 'Minibar',
+  Minus = 'Minus',
+  MoneyHand = 'MoneyHand',
+  Museum = 'Museum',
+  Nature = 'Nature',
+  Nightlife = 'Nightlife',
+  NightShelter = 'NightShelter',
+  NonSmoking = 'NonSmoking',
+  NoSmoking = 'NoSmoking',
+  OpenInNew = 'OpenInNew',
+  OpenInNewSmall = 'OpenInNewSmall',
+  OutdoorFurniture = 'OutdoorFurniture',
+  PalmTree = 'Palmtree',
+  Parking = 'Parking',
+  ParkingOutdoor = 'ParkingOutdoor',
+  Person = 'Person',
+  Pets = 'Pets',
+  Phone = 'Phone',
+  Plus = 'Plus',
+  PlusCircle = 'PlusCircle',
+  Popcorn = 'Popcorn',
+  PriceTag = 'PriceTag',
+  RecordPlayer = 'RecordPlayer',
+  Restaurant = 'Restaurant',
+  RoomService = 'RoomService',
+  SafetyBox = 'SafetyBox',
+  Sauna = 'Sauna',
+  Search = 'Search',
+  Service = 'Service',
+  Shopping = 'Shopping',
+  Skateboarding = 'Skateboarding',
+  Skiing = 'Skiing',
+  Smoking = 'Smoking',
+  Snowflake = 'Snowflake',
+  Spa = 'Spa',
+  Sports = 'Sports',
+  Star = 'Star',
+  StarFilled = 'StarFilled',
+  Street = 'Street',
+  Swim = 'Swim',
+  Theatre = 'Theatre',
+  Swipe = 'Swipe',
+  Thermostat = 'Thermostat',
+  Toilet = 'Toilet',
+  Ticket = 'Ticket',
+  Train = 'Train',
+  Tripadvisor = 'Tripadvisor',
+  Tshirt = 'Tshirt',
+  TshirtWash = 'TshirtWash',
+  TvCasting = 'TvCasting',
+  TVRemote = 'TVRemote',
+  Voucher = 'Voucher',
+  WarningTriangle = 'WarningTriangle',
+  Wheelchair = 'Wheelchair',
+  Wifi = 'Wifi',
+  Kitchen = 'Kitchen',
+}
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -39,6 +39,10 @@
    "./NoRateAvailableCard": "./dist/components/RateCard/NoRateAvailable/index.js",
    "./IconButton": "./dist/components/IconButton/index.js",
    "./Icons": "./dist/components/Icons/index.js",
+    "./Icons/IconByCSSelect": "./dist/components/Icons/IconByCSSelect.js",
+    "./Icons/IconByIconName": "./dist/components/Icons/IconByIconName.js",
+    "./Icons/IllustrationByIconName": "./dist/components/Icons/IllustrationByIconName.js",
+    "./Icons/iconName": "./dist/components/Icons/iconName.js",
    "./Icons/BathroomCabinetIcon": "./dist/components/Icons/Nucleo/Amenities_Facilities/bathroom-cabinet-2.js",
    "./Icons/BedHotelIcon": "./dist/components/Icons/Customised/Amenities_Facilities/BedHotel.js",
    "./Icons/BedIcon": "./dist/components/Icons/Illustrations/Bed.js",