diff --git a/MVMCoreUI/Atomic/Extensions/VDS-Tilelet+Codable.swift b/MVMCoreUI/Atomic/Extensions/VDS-Tilelet+Codable.swift
index 17bca4b5..b0a0c46e 100644
--- a/MVMCoreUI/Atomic/Extensions/VDS-Tilelet+Codable.swift
+++ b/MVMCoreUI/Atomic/Extensions/VDS-Tilelet+Codable.swift
@@ -35,41 +35,67 @@ extension Tilelet.BadgeModel: Codable {
 
 extension Tilelet.DescriptiveIcon: Codable {
     private enum CodingKeys: String, CodingKey {
-        case name, size, surface
+        case name, size, color, accessibleText
     }
     
     public init(from decoder: Decoder) throws {
         let container = try decoder.container(keyedBy: CodingKeys.self)
         let name = try container.decode(Icon.Name.self, forKey: .name)
         let size = try container.decodeIfPresent(Icon.Size.self, forKey: .size) ?? .medium
-        let surface = try container.decodeIfPresent(Surface.self, forKey: .surface) ?? .dark
-        self.init(name: name, size: size, surface: surface)
+        let color = try container.decodeIfPresent(Color.self, forKey: .color)
+        let accessibleText = try? container.decode(String.self, forKey: .accessibleText)
+        if let uiColor = color?.uiColor {
+            self.init(name: name,
+                      colorConfiguration: .init(uiColor, uiColor),
+                      size: size,
+                      accessibleText: accessibleText)
+        } else {
+            self.init(name: name,
+                      size: size,
+                      accessibleText: accessibleText)
+        }
     }
 
     public func encode(to encoder: Encoder) throws {
         var container = encoder.container(keyedBy: CodingKeys.self)
         try container.encode(name, forKey: .name)
         try container.encode(size, forKey: .size)
-        try container.encode(surface, forKey: .surface)
+        try container.encode(accessibleText, forKey: .accessibleText)
+        try container.encodeIfPresent(colorConfiguration.lightColor.hexString, forKey: .color)
     }
 }
 
+extension Tilelet.DirectionalIcon.IconType : Codable {}
+extension Tilelet.DirectionalIcon.IconSize : Codable {}
+
 extension Tilelet.DirectionalIcon: Codable {
     private enum CodingKeys: String, CodingKey {
-        case size, surface
+        case name, size, color, accessibleText
     }
     
     public init(from decoder: Decoder) throws {
         let container = try decoder.container(keyedBy: CodingKeys.self)
-        let size = try container.decodeIfPresent(Icon.Size.self, forKey: .size) ?? .medium
-        let surface = try container.decodeIfPresent(Surface.self, forKey: .surface) ?? .dark
-        self.init(size: size, surface: surface)
+        let iconType = try container.decodeIfPresent(IconType.self, forKey: .name) ?? .rightArrow
+        let size = try container.decodeIfPresent(IconSize.self, forKey: .size) ?? .medium
+        let color = try container.decodeIfPresent(Color.self, forKey: .color)
+        let accessibleText = try? container.decode(String.self, forKey: .accessibleText)
+        if let uiColor = color?.uiColor {
+            self.init(iconType: iconType,
+                      colorConfiguration: .init(uiColor, uiColor),
+                      size: size,
+                      accessibleText: accessibleText)
+        } else {
+            self.init(iconType: iconType,
+                      size: size,
+                      accessibleText: accessibleText)
+        }
     }
 
     public func encode(to encoder: Encoder) throws {
         var container = encoder.container(keyedBy: CodingKeys.self)
+        try container.encode(iconType, forKey: .name)
         try container.encode(size, forKey: .size)
-        try container.encode(surface, forKey: .surface)
+        try container.encode(accessibleText, forKey: .accessibleText)
+        try container.encodeIfPresent(colorConfiguration.lightColor.hexString, forKey: .color)
     }
 }
-