diff --git a/examples/geo/App.jsx b/examples/geo/App.jsx
index 0c1d1f5..5d808a3 100644
--- a/examples/geo/App.jsx
+++ b/examples/geo/App.jsx
@@ -12,6 +12,7 @@ const noItemsMessage = 'We found no places that match your search'
 
 const listbox = [
   {
+    id: 'cities',
     name: 'Cities',
     ratio: 8,
     displayField: 'name',
@@ -21,6 +22,7 @@ const listbox = [
     searchType: 'startswith'
   },
   {
+    id: 'airports',
     name: 'Airports',
     ratio: 2,
     displayField: 'name',
diff --git a/examples/geo/components/groupName/groupName.jsx b/examples/geo/components/groupName/groupName.jsx
index 0ecf647..42a6d2f 100644
--- a/examples/geo/components/groupName/groupName.jsx
+++ b/examples/geo/components/groupName/groupName.jsx
@@ -3,6 +3,7 @@ import styles from './groupName.module.css'
 
 export default function GroupName(props) {
   const {
+    id,
     children: name
   } = props
 
@@ -11,7 +12,7 @@ export default function GroupName(props) {
     airports: '\u{2708}'
   }
 
-  const icon = icons[name.toLowerCase()] || ''
+  const icon = icons[id] || ''
 
   return (
     <>
diff --git a/src/lib/components/hooks/useData.js b/src/lib/components/hooks/useData.js
index 9fe01f1..dc0b3b3 100644
--- a/src/lib/components/hooks/useData.js
+++ b/src/lib/components/hooks/useData.js
@@ -100,6 +100,7 @@ export const fetcher = (query, listbox, defaultListbox, minQueryLength, maxItems
           value: item,
           text: itemText(item, listboxProp[groupIndex].displayField),
           groupIndex,
+          groupId: listboxProp[groupIndex].id,
           groupName: listboxProp[groupIndex].name,
           searchType: listboxProp[groupIndex].searchType,
           defaultListbox: isDefaultListbox
diff --git a/src/lib/components/itemFirst.jsx b/src/lib/components/itemFirst.jsx
index 5ea4a6f..dcce49b 100644
--- a/src/lib/components/itemFirst.jsx
+++ b/src/lib/components/itemFirst.jsx
@@ -10,7 +10,7 @@ export default function ItemFirst(props) {
 
   const groupHeading = !!groupName && (
     GroupName
-      ? <GroupName index={item.groupIndex}>{groupName}</GroupName>
+      ? <GroupName id={item.groupId} index={item.groupIndex}>{groupName}</GroupName>
       : groupName
   )
 
diff --git a/src/lib/index.jsx b/src/lib/index.jsx
index 9330356..5e050c5 100644
--- a/src/lib/index.jsx
+++ b/src/lib/index.jsx
@@ -49,6 +49,7 @@ const listboxRules = PropTypes.oneOfType([
     ]).isRequired,
     searchType: PropTypes.oneOf(searchTypes),
     displayField: PropTypes.string,
+    id: PropTypes.string,
     name: PropTypes.string.isRequired,
     ratio: PropTypes.number
   })),