1 files changed, 13 insertions, 4 deletions
diff --git a/src/frontend/app/components/LineIcon.tsx b/src/frontend/app/components/LineIcon.tsx
index 3d613e6..4f4bfd9 100644
--- a/src/frontend/app/components/LineIcon.tsx
+++ b/src/frontend/app/components/LineIcon.tsx
@@ -1,14 +1,23 @@
-import React from "react";
+import React, { useMemo } from "react";
 import "./LineIcon.css";
+import { type RegionId } from "../data/RegionConfig";
 
 interface LineIconProps {
   line: string;
+  region?: RegionId;
 }
 
-const LineIcon: React.FC<LineIconProps> = ({ line }) => {
-  const formattedLine = /^[a-zA-Z]/.test(line) ? line : `L${line}`;
+const LineIcon: React.FC<LineIconProps> = ({ line, region = "vigo" }) => {
+  const formattedLine = useMemo(() => {
+    return /^[a-zA-Z]/.test(line) ? line : `L${line}`;
+  }, [line]);
+  const cssVarName = `--line-${region}-${formattedLine.toLowerCase()}`;
+
   return (
-    <span className={`line-icon line-${formattedLine.toLowerCase()}`}>
+    <span
+      className="line-icon"
+      style={{ borderColor: `var(${cssVarName})` }}
+    >
       {formattedLine}
     </span>
   );