diff --git a/frontend/public/icons/Est.png b/frontend/public/icons/Est.png
new file mode 100644
index 0000000..0ad746c
Binary files /dev/null and b/frontend/public/icons/Est.png differ
diff --git a/frontend/public/icons/Nord-Est.png b/frontend/public/icons/Nord-Est.png
new file mode 100644
index 0000000..d656c5f
Binary files /dev/null and b/frontend/public/icons/Nord-Est.png differ
diff --git a/frontend/public/icons/Nord-Ouest.png b/frontend/public/icons/Nord-Ouest.png
new file mode 100644
index 0000000..2134497
Binary files /dev/null and b/frontend/public/icons/Nord-Ouest.png differ
diff --git a/frontend/public/icons/Nord.png b/frontend/public/icons/Nord.png
new file mode 100644
index 0000000..c377917
Binary files /dev/null and b/frontend/public/icons/Nord.png differ
diff --git a/frontend/public/icons/Ouest.png b/frontend/public/icons/Ouest.png
new file mode 100644
index 0000000..6548a42
Binary files /dev/null and b/frontend/public/icons/Ouest.png differ
diff --git a/frontend/public/icons/Sud-Est.png b/frontend/public/icons/Sud-Est.png
new file mode 100644
index 0000000..e712bdd
Binary files /dev/null and b/frontend/public/icons/Sud-Est.png differ
diff --git a/frontend/public/icons/Sud-Ouest.png b/frontend/public/icons/Sud-Ouest.png
new file mode 100644
index 0000000..c94e335
Binary files /dev/null and b/frontend/public/icons/Sud-Ouest.png differ
diff --git a/frontend/public/icons/Sud.png b/frontend/public/icons/Sud.png
new file mode 100644
index 0000000..8ed4c8b
Binary files /dev/null and b/frontend/public/icons/Sud.png differ
diff --git a/frontend/src/WeatherCard.jsx b/frontend/src/WeatherCard.jsx
index 11ed121..26f1c7b 100644
--- a/frontend/src/WeatherCard.jsx
+++ b/frontend/src/WeatherCard.jsx
@@ -42,7 +42,15 @@ const WeatherCard = ({ data }) => {
           <span>{data?.meteo?.humidity ?? "Non disponible"}</span>
         </div>
         <div className="grid-item">
-          <span className="label">Vent:</span>
+        <span className="label">Vent:</span>
+        <img
+          src={data?.meteo?.wind ? `../public/icons/${data.meteo.wind}.png` : "#"} 
+          alt={data?.meteo?.wind ? data.meteo.wind : "Image non disponible"}
+          style={{
+            clipPath: "inset(0px 0px 20px 0px)",
+            objectFit: "cover"
+          }}
+        />
           <span>{data?.meteo?.wind ?? "Non disponible"}</span>
         </div>
       </div>