diff --git a/Client/Components/ConfigurationDialog.razor b/Client/Components/ConfigurationDialog.razor
index ca3279d..e346a58 100644
--- a/Client/Components/ConfigurationDialog.razor
+++ b/Client/Components/ConfigurationDialog.razor
@@ -108,7 +108,25 @@
                                                     </div>
                                                     <div class="col-6">
                                                         <label class="form-label">Icon</label>
-                                                        <input type="text" class="form-control form-control-sm" @bind="_config.Shifts[index].Icon" />
+                                                        <div class="input-group">
+                                                            <input type="text" class="form-control form-control-sm" @bind="_config.Shifts[index].Icon" 
+                                                                   placeholder="Unicode, oi-icon-name, or image.png" />
+                                                            <span class="input-group-text">
+                                                                @if (_config.Shifts[index].IsPngIcon)
+                                                                {
+                                                                    <img src="icons/@_config.Shifts[index].Icon" alt="Preview" style="width: 16px; height: 16px;" />
+                                                                }
+                                                                else if (_config.Shifts[index].IsOpenIconicIcon)
+                                                                {
+                                                                    <span class="@_config.Shifts[index].GetOpenIconicClass()" style="font-size: 14px;" title="Open Iconic Icon" aria-hidden="true"></span>
+                                                                }
+                                                                else
+                                                                {
+                                                                    <span style="font-size: 14px;">@_config.Shifts[index].Icon</span>
+                                                                }
+                                                            </span>
+                                                        </div>
+                                                        <small class="form-text text-muted">Examples: ⭐, oi-clock, break-icon.png</small>
                                                     </div>
                                                     <div class="col-6">
                                                         <label class="form-label">Morning Time</label>
diff --git a/Client/Pages/Index.razor b/Client/Pages/Index.razor
index d19b76e..7a74567 100644
--- a/Client/Pages/Index.razor
+++ b/Client/Pages/Index.razor
@@ -71,6 +71,10 @@ else
                                         {
                                             <img src="icons\@shift.Icon" alt="@shift.Name" style="width: 24px; height: 24px;" />
                                         }
+                                        else if (shift.IsOpenIconicIcon)
+                                        {
+                                            <span class="@shift.GetOpenIconicClass()" style="font-size: 16px;" title="@shift.Name" aria-hidden="true"></span>
+                                        }
                                         else
                                         {
                                             @shift.Icon
@@ -120,6 +124,10 @@ else
                                     {
                                         <img src="icons\@shift.Icon" alt="@shift.Name" style="width: 24px; height: 24px;" />
                                     }
+                                    else if (shift.IsOpenIconicIcon)
+                                    {
+                                        <span class="@shift.GetOpenIconicClass()" style="font-size: 16px;" title="@shift.Name" aria-hidden="true"></span>
+                                    }
                                     else
                                     {
                                         @shift.Icon
diff --git a/Server/appsettings.json b/Server/appsettings.json
index 5c8be59..1b2a365 100644
--- a/Server/appsettings.json
+++ b/Server/appsettings.json
@@ -32,13 +32,13 @@
   "Shifts": [
     {
       "Name": "Frei",
-      "Icon": "⚫",
+      "Icon": "oi-circle-x",
       "MorningTime": "",
       "AfternoonTime": ""
     },
     {
       "Name": "Urlaub",
-      "Icon": "🌴",
+      "Icon": "oi-map-marker",
       "MorningTime": "",
       "AfternoonTime": ""
     },
@@ -50,19 +50,19 @@
     },
     {
       "Name": "Früh",
-      "Icon": "🌅",
+      "Icon": "oi-sun",
       "MorningTime": "06:00-14:00",
       "AfternoonTime": ""
     },
     {
       "Name": "Spät",
-      "Icon": "🌆",
+      "Icon": "oi-moon",
       "MorningTime": "",
       "AfternoonTime": "14:00-22:00"
     },
     {
       "Name": "Tag",
-      "Icon": "☀️",
+      "Icon": "oi-clock",
       "MorningTime": "08:00-12:00",
       "AfternoonTime": "13:00-17:00"
     }
diff --git a/Shared/Shift.cs b/Shared/Shift.cs
index 8029e6c..cd60f66 100644
--- a/Shared/Shift.cs
+++ b/Shared/Shift.cs
@@ -8,5 +8,11 @@ namespace ShiftScheduler.Shared
         public string AfternoonTime { get; set; } = string.Empty;
 
         public bool IsPngIcon => Icon.EndsWith(".png", StringComparison.OrdinalIgnoreCase);
+        
+        public bool IsOpenIconicIcon => Icon.StartsWith("oi-", StringComparison.OrdinalIgnoreCase);
+        
+        public bool IsUnicodeIcon => !IsPngIcon && !IsOpenIconicIcon;
+        
+        public string GetOpenIconicClass() => IsOpenIconicIcon ? $"oi {Icon}" : string.Empty;
     }
 }