diff --git a/CHANGELOG.md b/CHANGELOG.md
index afc24685e..f2a9a68a8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,11 +57,13 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :mortar_board: Walkthrough / Help
 #### :rocket: Presets
 * Radio-button based presets fields can be in an non-unique state (e.g. a tunnel which is also a ford) – this is now rendered like a multi selection with conflicting states ([#8796])
+* Add colours for preset categories ([#8799])
 #### :hammer: Development
 
 [#8781]: https://github.com/openstreetmap/iD/issues/8781
 [#8792]: https://github.com/openstreetmap/iD/pull/8792
 [#8796]: https://github.com/openstreetmap/iD/issues/8796
+[#8799]: https://github.com/openstreetmap/iD/issues/8799
 [#8800]: https://github.com/openstreetmap/iD/pull/8800
 [#8805]: https://github.com/openstreetmap/iD/issues/8805
 [#8807]: https://github.com/openstreetmap/iD/issues/8807
diff --git a/css/75_categories.css b/css/75_categories.css
new file mode 100644
index 000000000..eeb35329a
--- /dev/null
+++ b/css/75_categories.css
@@ -0,0 +1,53 @@
+svg.preset-icon-category-border path {
+    stroke-width: 1;
+    stroke: rgb(170, 170, 170);
+    fill: rgba(170, 170, 170, 0.3);
+}
+
+.preset-category-barrier svg.preset-icon-category-border path {
+    stroke: rgb(200, 144, 144);
+    fill: rgba(200, 144, 144, 0.3);
+}
+
+.preset-category-building svg.preset-icon-category-border path {
+    stroke: rgb(224, 110, 95);
+    fill: rgba(224, 110, 95, 0.3);
+}
+
+.preset-category-landuse svg.preset-icon-category-border path {
+    stroke: rgb(196, 189, 25);
+    fill: rgba(196, 189, 25, 0.3);
+}
+
+.preset-category-natural svg.preset-icon-category-border path,
+.preset-category-playground svg.preset-icon-category-border path,
+.preset-category-golf svg.preset-icon-category-border path {
+    stroke: rgb(140, 208, 95);
+    fill: rgba(140, 208, 95, 0.3);
+}
+
+.preset-category-water svg.preset-icon-category-border path,
+.preset-category-waterway svg.preset-icon-category-border path {
+    stroke: rgb(119, 211, 222);
+    fill: rgba(119, 211, 222, 0.3);
+}
+
+.preset-category-utility svg.preset-icon-category-border path {
+    stroke: rgb(125, 125, 125);
+    fill: rgba(219, 219, 125, 0.3);
+}
+
+.preset-category-path svg.preset-icon-category-border path {
+    stroke: rgb(221, 221, 204);
+    fill: rgba(221, 221, 204, 0.3);
+}
+
+.preset-category-road_service svg.preset-icon-category-border path,
+.preset-category-road_minor svg.preset-icon-category-border path,
+.preset-category-road_major svg.preset-icon-category-border path {
+    stroke: #999;
+}
+
+.preset-category-rail svg.preset-icon-category-border path {
+    stroke: #555;
+}
diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js
index 42fc424d3..e92e45ced 100644
--- a/modules/ui/preset_icon.js
+++ b/modules/ui/preset_icon.js
@@ -77,21 +77,16 @@ export function uiPresetIcon() {
       .attr('height', d)
       .attr('viewBox', `0 0 ${d} ${d}`);
 
-    ['fill', 'stroke'].forEach(klass => {
       svgEnter
         .append('path')
-        .attr('class', `area ${klass}`)
+        .attr('class', 'area')
         .attr('d', 'M9.5,7.5 L25.5,7.5 L28.5,12.5 L49.5,12.5 C51.709139,12.5 53.5,14.290861 53.5,16.5 L53.5,43.5 C53.5,45.709139 51.709139,47.5 49.5,47.5 L10.5,47.5 C8.290861,47.5 6.5,45.709139 6.5,43.5 L6.5,12.5 L9.5,7.5 Z');
-    });
 
     categoryBorder = categoryBorderEnter.merge(categoryBorder);
 
     if (category) {
-      const tagClasses = svgTagClasses().getClassesString(category.members.collection[0].addTags, '');
-      categoryBorder.selectAll('path.stroke')
-        .attr('class', `area stroke ${tagClasses}`);
-      categoryBorder.selectAll('path.fill')
-        .attr('class', `area fill ${tagClasses}`);
+      categoryBorder.selectAll('path')
+        .attr('class', `area ${category.id}`);
     }
  }