More

frontend/src/components/map/POIPane.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { ts } from '../../i18n/server';
 import { useCollapsibleGroups } from '../../hooks/useCollapsibleGroups';
 import { trackEvent } from '../../lib/analytics';
+import { POI_CATEGORY_LOGOS } from '../../lib/consts';
 import type { POICategoryGroup } from '../../types';
 import InfoPopup from '../ui/InfoPopup';
 import { SearchInput } from '../ui/SearchInput';
@@ -186,15 +187,30 @@ export default function POIPane({
               {!isCollapsed && (
                 <div className="px-3 py-2">
                   <PillGroup>
-                    {group.categories.map((category) => (
-                      <PillToggle
-                        key={category}
-                        label={ts(category)}
-                        active={selectedCategories.has(category)}
-                        onClick={() => toggleCategory(category)}
-                        size="xs"
-                      />
-                    ))}
+                    {group.categories.map((category) => {
+                      const logo = POI_CATEGORY_LOGOS[category];
+                      return (
+                        <PillToggle
+                          key={category}
+                          label={ts(category)}
+                          icon={
+                            logo ? (
+                              <img
+                                src={logo}
+                                alt=""
+                                aria-hidden="true"
+                                loading="lazy"
+                                referrerPolicy="no-referrer"
+                                className="h-4 w-4 shrink-0 rounded-[3px] bg-white object-contain p-0.5"
+                              />
+                            ) : undefined
+                          }
+                          active={selectedCategories.has(category)}
+                          onClick={() => toggleCategory(category)}
+                          size="xs"
+                        />
+                      );
+                    })}
                   </PillGroup>
                 </div>
               )}