More

frontend/src/components/map/Map.tsx

@@ -14,7 +14,12 @@ import type {
   Bounds,
 } from '../../types';
 
-import { zoomToResolution, getBoundsFromViewState, getMapStyle } from '../../lib/map-utils';
+import {
+  zoomToResolution,
+  getBoundsFromViewState,
+  getMapStyle,
+  getPoiIconUrl,
+} from '../../lib/map-utils';
 import {
   INITIAL_VIEW_STATE,
   MAP_MIN_ZOOM,
@@ -395,7 +400,14 @@ export default memo(function Map({
               ) : (
                 <div className="px-3 py-2">
                   <div className="flex items-center gap-2">
-                    <span className="text-lg leading-none">{popupInfo.emoji}</span>
+                    <img
+                      src={getPoiIconUrl(popupInfo.category, popupInfo.emoji)}
+                      alt=""
+                      aria-hidden="true"
+                      loading="lazy"
+                      referrerPolicy="no-referrer"
+                      className="h-5 w-5 shrink-0 rounded-[4px] bg-white object-contain p-0.5"
+                    />
                     <div>
                       <div className="font-semibold dark:text-warm-100">{popupInfo.name}</div>
                       <div className="flex items-center gap-1.5 text-xs text-warm-500 dark:text-warm-400">